面向 Web 开发者的 Sublime Text 插件

时间:2021-12-06 14:45:09

Package Control

在 Sublime Text 上大家都用 Package Control 来管理安装插件,所以它是我们要安装的第一个插件,安装方法见这里。关于 Package Control 的使用方法这里不再赘述。

面向 Web 开发者的 Sublime Text 插件

JSHint

Linter 是帮助你检查代码问题的一类工具,帮你发现潜在的错误或不好的代码习惯。JSHint 是检查 JavaScript 代码的好工具,支持很多编辑器和 IDE 。面向 Web 开发者的 Sublime Text 插件

Sublime 上要使用 JSHint 可以安装:SublimeLinter-JSHint 插件。注意安装这个插件前需要先安装 SublimeLinter 以及 jshint 命令本身,更多信息见 SublimeLinter-JSHint 安装说明。简单地说就是:

  1. 安装 jshint 命令:npm install -g jshint
  2. Package Control 安装:SublimeLinter ,重启 sublime
  3. Package Control 安装:SublimeLinter-jshint

注:JavaScript 有许多 linter 工具,如 JSLint 、JSHint 和 ESLint 。JSLint 是 JavaScript 大师 Douglas Crockford 创作和维护的。JSHint 是 JSLint 的 fork 版,由社区维护,更可扩展、更灵活,使用者也更多,Mozilla、jQuery 都在用 JSHint 。ESLint 是另一位 JavaScript 专家  Nicholas C. Zakas 主导的社区项目。

注:SublimeLinter 是 Sublime 上 linter 类插件的 framework,所以很多 linter 都依赖这个插件。Package Control: Install Package 中输入 SublimeLinter- 会列出大量 SublimeLinter- 开头的 linter 插件,如下图:

面向 Web 开发者的 Sublime Text 插件

JSCS

代码中没有错误还不够,好的代码需要遵循一致的代码风格(代码不仅仅给机器用,还是给人看不是吗?)。JSCS 是检查代码风格的工具,可以配置很多代码风格规则,例如空格的要求、括号的位置等,还可以直接使用  jQuery、Google 等代码风格方案。

Sublime 上需要安装 SublimeLinter-JSCS 。这个插件同样依赖 SublimeLinter 以及 jscs 命令本身。简单安装说明如下:

  1. 安装 jscs 命令:npm install jscs -g
  2. Package Control 安装:SublimeLinter ,重启 sublime (如果你还没装 SublimeLinter 的话,否则请跳过)
  3. Package Control 安装:SublimeLinter-jscs

此外,你还可以安装一个 JSCS-Formatter 插件,实现自动代码格式化。

面向 Web 开发者的 Sublime Text 插件

ColorHighliter

Color highlighter 插件可以自动显示 CSS 或 Sass 中声明的颜色,让你一目了然。默认配置下,当鼠标移到颜色变量上时背景就会变为声明的颜色。

面向 Web 开发者的 Sublime Text 插件

还可以设置多种颜色显示方式,默认配置见: ‘Package Settings’ > ‘Color Highlighter’ > ‘Settings – Default’ 。例如,我们在该插件的 User 设置中做如下设置可以达到下图的显示效果:

1
2
3
{
  "ha_style": "filled"
}

面向 Web 开发者的 Sublime Text 插件

Gutter Color 和 Color Picker 是另外两个颜色相关的插件。

AutoFileName

AutoFileName 在你在输入文件名是提供自动提示,减少人为的输入错误。

面向 Web 开发者的 Sublime Text 插件

Autoprefixer

Autoprefixer 插件让帮你自动添加 CSS 厂商前缀,个人使用比较方便。如果是正式的项目,可以使用其它自动构建工具在构建过程中统一实现。

面向 Web 开发者的 Sublime Text 插件

作者:韩国恺。本系列文章以 Addy & Matt 的系列视频 Totally Tooling Tips 的内容为基础重新整理而成,主要介绍一些(前端)开发者喜欢的工具和技巧。