image.png

点击图片报名上海、南京源创会

Sublime Text 是目前最受欢迎的代码编辑器,因其高效、简洁和插件丰富等特点受到开发者的喜爱。

为了帮助大家充分利用 Sublime 的优势,本文筛选了开发者日常使用较多的 15 款 Sublime Text 插件。如果您有更好的项目推荐,欢迎留言分享。

01

**Package Control **

image.png

这是 Sublime 的插件管理器,可以为安装和删除软件包带来方便。如果你尚未安装此插件,建议先安装,以便于试用文中提及的其他插件。

02

JavaScript & NodeJS Snippets

image.png

这是用以编写常见 JavaScript 表达式的快捷方式集合。不用编写 document.querySelector('selector'),你只需键入 qs,按下 Tab 键,Sublime 就能帮你完成其余的工作。

03

Emmet

image.png

与前面提到的插件类似,这是一组专门用来提高书写代码速度的便利工具,不同之处在于 Emmet 适用于 HTML 和 CSS 。将它整合进文本编辑器,可以提供一些功能和快捷方式,加快开发速度。它提供包括 Eclipse、IDEA、UltraEdit、SlickEdit 等的插件。

Emmet 有点复杂,如果你想要一款更简单的插件,我推荐 HTML Snippets,它的功能相对较少,但是使用方便,还有很好的直接文档。

04

Advanced New File

image.png

这个牛X的软件包可以快速创建新文件。你无需浏览文件件或点击菜单,只要打开 super+alt+n 提示,然后将路径写给新文件即可。该插件能自动创建路径中不存在的目录,还能自动补全文件名称。

05

Git

image.png

在 Sublime Text 的命令行面板上,Git 集成可以直接进行工作。这个包提供了快速访问大量 Git 的常用命令,它允许开发者直接添加文件,提交或者打开 Git 日志,而不需要离开 Sublime。

06

GitGutter

image.png

这是非常有用的扩展,它标记了源代码的每一行,告诉你,它的 Git 状态,还给出了你一个发生了的变更梗概。GitGutter 还可以将,git 的HEAD,origin,你选择的分支,或者甚至是某一次的提交与你的文件进行比较。

07

Side Bar Enhancement

image.png

你正在 Sublime Text 中处理的项目工程可以在左侧的面板中进行概览。尽管它给你提供了一些操作文件的选项,但是可选的操作相当有限。该插件通过向右键菜单增加了超过20多个选项来改变了这一现状, 其中就包括了在浏览器中打开(Open in browser),复制(duplicate), 以及许多其它的实用功能。

08

ColorPicker

image.png

这是一个小巧实用的颜色拾取器,很容易上手,非常适合用来快速地抓取颜色的16进制值。插件会打开一个独立的窗口,你可以从一个调色板上选择一种颜色,或者使用滴管直接从屏幕上的任何位置拾取颜色。

09

Placeholders

image.png

Sublime Text 3 有一个内置 Lorem Ipsum 生成器,可用于创建虚拟文本。Placeholders 插件对这一功能进行了扩展,并允许 ST 快速生成占位符图像,表单,列表和表格。

10

DocBlockr

image.png

DocBlockr 可轻松为函数生成描述,包括它们所运用的参数,返回的值和变量类型。非常适合那些喜欢给函数定义添加详细描述的用户。

11

SublimeCodeIntel

image.png

代码智能插件会对你的源代码文件进行索引,让你能快速的找到并跳转到函数的声明。该扩展对于流行较广以及不那么流行的编程语言都比较适用。

12

Minify

image.png

这是一个代码压缩器和美化器的二合一插件。Minify 会用你目前正在打开的文件创建出一个新的 .min 或者 .pretty 版本,并且会放在同级目录之下。可用于 CSS, HTML, JavaScript, JSON 还有SVGs。

这个要依赖外部的 node.js 库来进行压缩和美化, 所以你需要单独安装它们:

image.png

13

Sublime Linter

image.png

这个包让代码编辑器能够对语法错误,不好的编码实践以及其它一些开发人员可能会犯的错误进行检查。SublimeLinter 本身所扮演的只是一个检查功能的基础框架,所以针对你所使用的每种语言,还需要安装单独的插件。

14

Color Highlighter

image.png

这是一项你可以在许多其它的IDE或者文本编辑器中看到的功能, 但是 Sublime 里面却没有, 它就是着色预览功能。使用 Color Highlighter 扩展,你就能在 ST 中启用该功能了, 然后就可以直接在样式表中看到十六进制和 RGBA 值是如何被转成颜色的。

15

语言支持包

image.png Sublime 可以为超过50种语言提供代码高亮,但是仍然有一些框架或新 Web 语言尚未得到支持。幸好编辑器支持插件,社区可以为任何能想到的语言开发并发布语言包。

AngularJS

TypeScript

Babel (React)

补充:主题 为文本编辑器安装一款漂亮的主题会让写代码编写变得更加愉悦。社区拥有许多很不错的 Sublime text 主题和配色,这里列出了我们最喜欢的一些:

Agila (截图中使用的主题)

Material Theme

Brogrammerhttps://mp.weixin.qq.com/s/bepcaoydov9dtYOBBOMDgg