专为前端开发者准备的 15 款优秀的 Sublime Text 插件

640?wx_fmt=jpeg

作者 | IT程序狮
链接 | https://www.jianshu.com/p/87fe1139f668


Sublime Text 已成为了目前最流行的代码编辑器之一。它的反应速度、简单易用性以及丰富的插件生态,让众多前端开发者们为之倾倒。

为了帮助开发者们更便捷地使用 Sublime Text ,我们决定制作一个 Sublime Text 扩展列表,它包含了我们日常使用的一些插件。当然,如果我们所列举的插件中没有你喜欢的,也随时欢迎你在评论中与我们分享它们。

1、插件包管理器

640?wx_fmt=other

首先,我们将从包管理器开始。Package Control 是 Sublime Text 的插件包管理器,它提供了 Sublime 中插件包的安装与删除。若你没有安装它,那么我们后续推荐的插件,你也就无法尝试咯。

2、JavaScript 与 NodeJS 代码段

一个用于编写常见 JavaScript 代码段的集合插件。为什么要费劲逐个敲下 document.querySelector('selector')文本,你只需要利用快捷键 qs,并按下 Tab 键,剩下的代码,Sublime 将帮你自动补全。

3、Emmet

上述的插件类似,Emmet 也是一款让你更快捷编码的插件。但 Emmet 适用于 HTML 与 CSS 代码的编写,它可以让你一次性输入长标签、嵌套元素或者整个页面模板。

如果你觉得 Emmet 有些复杂,那么你可以尝试一个叫做 HTML 代码段的插件。它更简单易用,并且使用文档写的也很直接。

译者注:Emmet 的前身是大名鼎鼎的 Zen coding,相信前端开发者们不会陌生。这里再分享一个使用手册,希望对你有所帮助。

4、Advanced New File

一款助你在 Sublime 中快速创建新文件的插件。你只需要使用菜单,并利用快捷键 ctrl+alt+n 打开提示框,写入新文件的路径,即可配置新文件。

该插件还支持自己编写路径保存,甚至文件夹的名称也可以自动完成。

5、Git

640?wx_fmt=other

一款可以直接在 Sublime 命令选项面板中工作的 Git 集成插件。该插件提供了一些常用的 Git 命令,你可以在 Sublime 中完成,诸如添加、提交或查看 Git 日志等功能。

6、 GitGutter

640?wx_fmt=other

一个非常实用的 Sublime 扩展。它会告诉你自上次 Git Commit 以来已经改变的代码行,并给出相应的概述。你也可以用它来与你已提交到 Git 上的文件进行详细的对比。

7、Side Bar Enhancements

640?wx_fmt=other

在 Sublime Text 中,你可以在左侧面板中了解正在进行的项目。虽然,它为你提供了一些使用文件的基本选项,但默认的操作是相当有限的。

当你右键菜单选项的时候,这个插件将会为你提供超过 20 个选项来增强你的可操作性。包括在浏览器中打开、复制以及其他有用的功能。

8、ColorPicker

640?wx_fmt=other

一个小巧实用的取色器。它可以快速地抓取十六进制的色值,使用非常简单。你可以在单独的窗口打开它,从调色板中取色,或使用滴管在屏幕的任意位置取色。

9、 Placeholders

Sublime Text 3 有一个内置的 Lorem Ipsum(占位符) 生成器,你可以使用它来创建虚拟文本。而该插件则扩展了占位符生成器的功能,你就可以通过 Sublime Text 快速地生成占位符图像、表单、列表和表。

10、 DocBlockr

一个可以向函数添加详细注释的插件。DocBlockr 可以帮助你轻松地为函数添加相应的描述,包括参数、返回的值和变量类型。

11、 SublimeCodeIntel

个智能代码自动补全插件,它能帮你索引你的源文件,并能让你快速地找到并跳转到相应的函数中。

所以,这个扩展适用于流行以及相对冷门的编程语言。

12、 Minify

640?wx_fmt=other

一个代码美化与压缩的插件,适用于 CSS、HTML、JavaScript、JSON 和 SVG.

此包依赖于外部 Node.js 库进行缩小和美化,故你需要单独安装它们。

 
 

640?wx_fmt=other

此插件能够帮助开发人员检测代码中存在的语法错误,不规范的或者错误的代码写法。它支持各类开发语言。

但 Sublime Linter 本身只是一个基础的框架,所以使用的时候,你还需要安装单独的插件来满足不同语言的使用需求。

14、Color Highlighter

你可以在许多 IDE 和文本编辑器中看到颜色高亮功能,而 Sublime 中是不支持颜色预览的。但是,有了这款插件,在你使用 Sublime 时就能够帮你检测出 CSS 文件中的颜色码。无论是 Hex 码,或是 RGB 码都能很好的显示。

15、 Language Packs

640?wx_fmt=other

虽然 Sublime Text 具有超过 50 种编程语言代码的高亮显示。但是,仍然有部分框架和 Web 开发语言,目前还不支持。不过,由于编辑器插件的性质,社区也能够为任何编程语言创建和提供相应的包。

  • AngularJS

  • TypeScript

  • Babel (React)

额外的彩蛋:主题

在 Sublime Text 上安装一个漂亮的主题,势必会使你能够更愉快地编写代码。当然,这里也有一些我们喜欢的主题与你分享:

  • Agila(截图中使用的主题)

  • Material Theme

  • Brogrammer

感谢你的阅读。若你有所收获,欢迎点赞与分享。


640?wx_fmt=jpeg

640?wx_fmt=jpeg

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值