100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 前端开发者必备!15款优秀的Sublime Text插件

前端开发者必备!15款优秀的Sublime Text插件

时间:2018-08-18 23:40:13

相关推荐

前端开发者必备!15款优秀的Sublime Text插件

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

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

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 打开提示框,写入新文件的路径,即可配置新文件。

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

5. Git

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

6. GitGutter

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

7. Side Bar Enhancements

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

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

8、ColorPicker

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

9、Placeholders

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

10、DocBlockr

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

11、SublimeCodeIntel

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

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

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)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。