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

我会带着你远行 2022-12-25 03:58 143阅读 0赞

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

为了帮助开发者们更便捷地使用 Sublime Text ，我们决定制作一个 Sublime Text 扩展列表，它包含了我们日常使用的一些插件。当然，如果我们所列举的插件中没有你喜欢的，也随时欢迎你在评论中与我们分享它们。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]  
1、插件包管理器

首先，我们将从包管理器开始。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 打开提示框，写入新文件的路径，即可配置新文件。该插件还支持自己编写路径保存，甚至文件夹的名称也可以自动完成。

1.  Git

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

1.  GitGutter

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

1.  Side Bar Enhancements

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

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

8、ColorPicker

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

9、Placeholders

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

10、DocBlockr

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

11、SublimeCodeIntel

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

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

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

12、Minify

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

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

npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo

13、Sublime Linter

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

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

14、Color Highlighter

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

15、Language Packs

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

AngularJS

TypeScript

Babel (React)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]: /images/20221120/12140e152d7943dd91f430309571175a.png