25个最好的Sublime文本插件的前端开发人员

每个开发者都有自己的工具和特殊的设置–我知道我是这样的。正是这些工具可以帮助你成为一个更快、更强、更高效的开发者。

我发现新工具的方法之一是通过与其他开发者配对。我会在处理一个问题的时候,看到和我配对的人在两秒钟的时间里做了一些神奇的事情。

这时我就会中断配对会议,去了解那个工具是什么,在哪里得到它,以及如何使用它。这绝不是寻找新工具的最有效方式,但往往是我找到最好的工具的时候。

考虑到这一点,我花了一些时间对Shopify的前端开发人员进行了调查,以获得他们不能没有的Sublime Text插件的清单。

为了让事情变得更简单,我把插件分为以下几类。

  • 安装
  • 剪辑和代码风格
  • 纳入Git
  • Linters和语法高亮
  • 编辑的改进
  • 主题和乐趣

如果你想确保你正在建立的东西是安全的,一定要检查我们的网站安全的文章。

安装

1. 包裹控制

包控制是第一个也可能是最基本的Sublime Text插件。它可以使软件包或插件轻松地安装、下载和更新到Sublime Text中。包和插件这两个术语经常被互换使用。

Sublime Text plugins: package control

要安装Package Control,请遵循Package Control网站上的说明。在那里,你可以简单地在Windows上键入ctrl+shift+p,或者在Mac上键入cmd+shift+p来打开命令调色板。

![崇高文本插件:命令调色板安装包控制。

一旦命令调色板打开,你就可以键入安装包,从包控制网站安装插件。你也可以键入Add Repository,允许你添加不在Package Control网站上的插件,只需使用它们的仓库url(确保不要在最后包含.git)。最后,Remove Package,将让你通过删除插件以及Sublime包目录中的任何资产来卸载系统中的插件。

在我们的综述中找到你的新宠Markdown编辑器。

Snippets和代码风格

Snippets是Sublime Text的一大内置功能。你可以建立你自己的,除了使用预装的,或者使用像Emmet这样有一堆插件的插件。代码段的工作方式很简单–你只需开始输入一个关键词来激活一个代码段,然后按tab键来展开文本。

2. Emmet

![崇高文本插件:emmet用Emmet展开标记。

Emmet是一个插件,它可以通过使用片段来实现更快的HTML和CSS创建。它使用的缩写可以扩展为有效的HTML标签。

例如,要建立一个导航,你只需要输入以下代码。

Which will expand to:

查看Emmet插件

3. Alignment

崇高文本插件:对齐用Alignment对齐变量定义。

Alignment插件可以帮助轻松对齐多个选区,或者多行选区。这意味着你可以通过定界符(如=)来对齐多个选择,或多行选择。只需在Windows上键入 “ctrl + alt + a”,或在Mac上键入 “cmd + ctrl + a”,即可对齐你的选择。要用:来对齐,请按照本教程设置自定义定界符。

查看对齐插件

Git整合

大多数开发人员使用某种类型的版本控制。最近,Git似乎是最流行的。这里有一些Sublime Text的Git相关插件,让Git的工作变得更加简单。

4. SublimeGit

sublime文本插件:sublime git

SublimeGit将Git带入Sublime,所以你不需要在命令行和你的文本编辑器之间来回走动。你过去必须为这个插件付费(这就是它的厉害之处),但在去年,它被开源了。它有一个庞大的功能列表,你可以在SublimeGit文档中找到。要想快速上手,请安装该插件,然后使用Command Palette来启动你的Git命令。

查看SublimeGit插件

5. GitGutter

Sublime文本插件:gitgutter在Sublime文本的gutter中修改了行,删除了区域边框,插入了行指示器。

GitGutter为Sublime带来了一些原生的Atom功能,在侧边栏的水沟中添加了差异提示。此外,你还可以将鼠标悬停在侧边栏的指示器上,看到一个diff弹窗。你可以对变化执行各种命令,比如复制diff状态的内容,将变化恢复到Git中的状态,跳转到下一个或上一个变化等等。

查看我们为前端开发者列出的21个最佳Atom包。

查看GitGutter插件

6. GitHubinator

![崇高文本插件:githubinator在Github上打开Git责备选定行。

GitHubinator是一个插件,可以在远程GitHub或Bitbucket仓库上显示选定的文本。你只需高亮显示你想要搜索的文本,右击打开上下文菜单,然后在默认浏览器中启动相应的Github或Bitbucket网页。如果你需要弄清楚谁之前在一个文件上工作过,或者检查Git的责备,这个插件就很神奇。

查看GitHubinator插件

7. GitOpenChangedFiles

![sublime文字插件:gitopenchangedfiles

GitOpenChangedFiles并不讳言它的作用,它的名字就说明了一切。只需安装并在 Mac 上运行 “cmd + option + o”,或在 Windows 上运行 “ctrl + shift + o”,就能看到这个插件在 Sublime Text 中为你打开相应的文件,并附上你在分支中修改的所有文件。

查看GitOpenChangedFiles插件

你可能也喜欢: Shopify主题开发的基本资源列表。

Linters和语法高亮显示。

在团队中工作时,一致性是必不可少的。Linters和语法高亮有助于提供这种一致性并设定最佳实践。

8. SublimeLinter

![崇高文本插件:sublimelinter

SublimeLinter是Sublime上最受欢迎的linter,因为它目前在Package Manager上的下载量排名前25位。安装后,你还需要为你可能使用的各种语言安装插件。

要做到这一点,只需打开Package Control安装同名的插件。只需键入SublimeLinter-<lintername>,例如SublimeLinter-jshint。你必须用SublimeLinter安装linter插件–Sublime Text 3的版本没有预装它们。

查看SublimeLinter插件

9. ChangeQuotes

sublime text plugins: changequotes用命令调色板将双引号改为单引号。

ChangeQuotes “转换单引号和双引号,并在字符串中重新回避引号”,根据他们的文档。安装后,无论何时你想改变引号,请确保你的光标在被引用的文本内。打开命令调色板运行 “ChangeQuotes”–不需要选择文本来更改引号。

查看ChangeQuotes插件

有一大堆插件的语法高亮。这些是我们在Shopify使用的两个主要插件,在Sublime Text现有语法高亮之外。

10. SASS

Sass插件为Sass和SCSS文件增加了语法高亮和标签/代码完成功能。

查看Sass插件

11. Babel

![崇高文本插件:语法语法高亮由Babel提供。

Babel为ES6 JavaScript添加语法定义,并提供React JSX扩展。

查看Babel插件

12. Siteleaf’s Liquid Syntax

Siteleaf的Liquid Syntax为Liquid添加了液体语法高亮,以及一些方便的片段。

查看Siteleaf的Liquid Syntax

编辑器改进

13. SideBarEnhancements

![崇高的文字插件:sidebarenhancements左:SidebarEnhancements之前。右:侧边栏增强之前。SidebarEnhancements之后。

SideBarEnhancements为Sublime Text提供了对文件和文件夹侧边栏操作的增强功能。特别是,它将删除选项设置为 “移动到垃圾桶”,包括 “用…打开”,让您能够移动文件,等等。

查看侧栏增强插件

14. Maybs Quit

![崇高的文字插件:maybs退出

Maybs Quit可以实现快速面板确认退出Sublime Text。cmd/ctrl+w “和 “cmd/ctrl+q “在键盘上的距离太近,会导致错误。当你只想关闭一个文件时,通过使用Maybs Quit避免无意中退出Sublime Text!

查看Maybs Quit插件

15. AutoFileName

![崇高的文字插件:autofilename

AutoFileName 贯彻了它的名字:它自动完成文件名。当你输入时,它会触发一个下拉菜单,其中包含与你现有文件和后续路径相关的文件名。

查看自动文件名插件

你可能也喜欢: 如何为自定义主题添加CSS文本动画。

16. 在浏览器中查看

崇高的文字插件:在浏览器中查看

View In Browser可以帮助你用一个简单的快捷键 “ctrl+alt+v “在默认浏览器中启动你的项目。它还可以为您电脑上安装的其他各种浏览器启用快捷方式,如Chrome、Firefox、Internet Explorer等。

浏览器中的结账视图插件

17. GhostText

sublime text插件:ghosttext用GhostText插件将CodePen链接到Sublime Text。????

GhostText可能是我这段时间看到的最酷的插件之一。它允许你将你的Sublime Text编辑器(与你所有的插件??)链接到浏览器中的文本区域。例如,你可以在CodePen上工作,但在你的主文本编辑器中做所有的编辑。你只需要安装插件和浏览器扩展。只需突出显示你想链接的文本区域,然后点击浏览器扩展:然后神奇的事情发生了。✨????????✨

查看GhostText插件

18. BracketHighlighter

sublime text plugins: brackethighlighter Sublime Text 3中的括号高亮显示。

BracketHighlighter的作用就像它说的那样:它能高亮你代码中的括号。它能匹配各种括号,如[](){}""''#!xml <tag></tag>,以及您添加的自定义括号。

查看BracketHighlighter插件

19. Gutter Color

![崇高的文字插件:沟槽色

Gutter Color是一个伟大的插件,它可以为所有包含颜色的行显示一个彩色图标。这个插件的好处是,与其他插件相比,颜色高亮是有点不太干扰,因为它只出现在水沟(而不是高亮字后面)。它会让你的设计师满意。

20. ColorPicker

![崇高的文字插件:colorpicker

ColorPicker启用了一个颜色选择器对话框,允许用户插入或更改所选颜色。要打开颜色选择器,只需在Mac上键入cmd+shift+c,或在Windows或Linux上键入ctrl+shift+c。默认情况下,插入的hex码是大写字母,但你可以通过进入偏好设置,然后进入包设置,将其改为小写字母。

查看ColorPicker插件

21. A File Icon

崇高的文字插件:一个文件图标
一个文件图标是伟大的,很容易扫描你有什么文件在你的项目。它只是简单地在你的项目侧栏中为支持的文件添加漂亮的和可定制的图标。它受Material和Boxy Themes的支持,可以定制主题图标。

查看一个文件图标插件

∮主题和乐趣

由于你很可能会花很多时间使用你的文本编辑器,所以尽可能让它在视觉上令人愉悦是很好的。重要的是要知道,主题和配色方案不同。主题是编辑器本身的外观,如侧边栏用户界面、标签、模态窗口等。配色方案是主编辑区的背景和语法高亮色。

模板图标

增长您的技能的资源

获取免费的技术产品CSV副本,直接发送到您的收件箱。

电子邮件

免费获取副本

_通过输入您的电子邮件 – 我们也会向您发送与Shopify相关的营销邮件。您可以随时取消订阅。

我们的虚拟齿轮正在转动。

请注意,它可以采取
我们的电子邮件15分钟
以达到您的收件箱。

22. 色彩崇高

崇高文本插件:Color Sublime用Color Sublime切换各种配色方案。

Color Sublime是一个插件,它可以为你的编辑器安装颜色方案。这些配色方案可以改变语法高亮。这样做的好处是,你可以在一个方案列表中循环,而不是必须安装每一个方案,看看你是否喜欢。

查看Color Sublime插件

23. DA UI

![崇高的文字插件:da ui

DA UI是一套美观、简洁的界面和语法主题,适用于Sublime Text 3。DA UI插件还支持A文件图标的自定义图标。

查看DA UI插件

24. 主题 – Spacegray

崇高的文字插件:空格灰

主题 – Spacegray是一套为Sublime Text 2和3定制的UI主题,非常简约和干净。Spacegray还带有Base16颜色方案。

25. Emoji

![崇高的文字插件:表情符号

因为……为什么不呢。表情符号插件允许你通过命令调色板插入表情符号。惊人的!

查看 Emoji 插件

你可能也喜欢: 如何为你的客户制作最好的404页面.

插件的所有! ????

你可以安装一大堆插件来定制你的开发体验。希望本文能向你展示一些你会喜欢的新插件。做对你和你的工作有意义的事情,以及任何能让你更有效率的事情。祝你编码愉快!

与Shopify合作伙伴计划一起发展您的业务

无论您是提供营销,定制,还是网页设计和开发服务,Shopify合作伙伴计划都会让您获得成功。免费加入并获得收入分享的机会、发展业务的工具以及充满激情的商务社区。

报名

发表评论 0

Your email address will not be published. Required fields are marked *