代码校验工具 SublimeLinter 的安装与使用

• 序
• 安装 SublimeLinter
• JavaScript 语法检查
  • 安装 SublimeLinter-jshint
  • 安装 nodeJS 和 jshint
• css 语法检查
  • 安装 SublimeLinter-csslint
  • 在 nodeJS 下安装 csslint

序

本文我将讲述一下 SublimeLinter 的安装过程。
其组件 jshint 的安装与使用。
其组件 csslint 的安装与使用。
我将基于 Sublime Text 3 来安装。
使用 Sublime Text 2 的用户阅读本文是没有帮助的。

SublimeLinter 是 Sublime 的插件，它的作用是检查代码语法是否有错误，并提示。习惯了 IDE 下写代码的人一定需要一款在 Sublime 上类似的语法检查工具。下面我们开始。

安装 SublimeLinter

如同其他插件一样使用 Package Control 来安装。

1. 按下 Ctrl+Shift+p 进入 Command Palette
2. 输入install进入 Package Control: Install Package
3. 输入SublimeLinter。进行安装.

安装完成后可以看到这样一段话：

Welcome to SublimeLinter, a linter framework for Sublime Text 3.
 
                  * * * IMPORTANT! * * *

         SublimeLinter 3 is NOT a drop-in replacement for
        earlier versions.

         Linters *NOT* included with SublimeLinter 3, 
         they must be installed separately.
 
         The settings are different.
 
                 * * * READ THE DOCS! * * *
 
 Otherwise you will never know how to install linters, nor will
 you know about all of the great new features in SublimeLinter 3.
 
 For complete documentation on how to install and use SublimeLinter,
 please see:
 
 http://www.sublimelinter.com

可以看到具体的 Linters 组件不被包含在 SublimeLinter 3 中，所以我们要额外独立安装组件。
可以针对不同的语言安装不同的组件。

JavaScript 语法检查

SublimeLinter-jshint 是基于 nodeJS 下的 jshint 的插件，实际上 SublimeLinter-jshint 调用了 nodeJS 中 jshint 的接口来进行语法检查的。

安装 SublimeLinter-jshint

为了让 JavaScript 代码有语法检查，我们安装 SublimeLinter-jshint
同样的方法，我们安装 SublimeLinter-jshint

1. 按下 Ctrl+Shift+p 进入 Command Palette
2. 输入install进入 Package Control: Install Package
3. 输入SublimeLinter-jshint。进行安装.

如下图

安装完成后我们可以看到下面的一段话

SublimeLinter-jshint
  -------------------------------
  This linter plugin for SublimeLinter provides an interface to jshint.
  
  ** IMPORTANT! **
  
  Before this plugin will activate, you *must*
  follow the installation instructions here:
  
  https://github.com/SublimeLinter/SublimeLinter-jshint

安装 nodeJS 和 jshint

在插件开始工作之前，我们必须再看一下上述插件的安装说明
通过 SublimeLinter-jshint 的说明 我们可以看到，这个组件依赖于 nodeJS 下的 jshint，所以我们安装 nodeJS 环境和 nodeJS 下的 jshint。

1. 安装 Node.js
2. 通过 npm 安装jshint

在命令行下输入如下代码，完成安装

npm install -g jshint

安装完成后命令行中出现如下的信息

C:\Users\Administrator\AppData\Roaming\npm\jshint -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint\bin\jshint
jshint@2.6.3 C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint
├── strip-json-comments@1.0.2
├── underscore@1.6.0
├── exit@0.1.2
├── shelljs@0.3.0
├── console-browserify@1.1.0 (date-now@0.1.4)
├── htmlparser2@3.8.2 (domelementtype@1.3.0, entities@1.0.0, domhandler@2.3.0, readable-stream@1.1.13, domutils@1.5.1)
├── minimatch@1.0.0 (sigmund@1.0.0, lru-cache@2.5.0)
└── cli@0.6.6 (glob@3.2.11)

可以查看 jshint 版本，已确认安装完成。

C:\Users\Administrator>jshint -v
jshint v2.6.3

现在，恭喜你，我们使用 Sublime 编辑 JavaScript 文件，就会有语法检查了！

在编辑过程中，会有如下提示

点击提示点后，Sublime 状态栏也会有相应的说明

css 语法检查

与 jshint 同理，SublimeLinter-csslint 也是基于 nodeJS 下的 csslint 的插件，实际上 SublimeLinter-csslint 调用了 nodeJS 中 csslint 的接口来进行语法检查的。

安装 SublimeLinter-csslint

同样的方法。

1. 按下 Ctrl+Shift+p 进入 Command Palette
2. 输入install进入 Package Control: Install Package
3. 输入SublimeLinter-csslint。进行安装.

如下图

安装完成后我们可以看到下面的一段话

SublimeLinter-csslint
-------------------------------
This linter plugin for SublimeLinter provides an interface to csslint.

** IMPORTANT! **

Before this plugin will activate, you *must*
follow the installation instructions here:

https://github.com/SublimeLinter/SublimeLinter-csslint

在使用插件之前，必须遵循上述网址中的安装说明

在 nodeJS 下安装 csslint

进入上述的 GitHub 地址，csslint 的说明页。我们知道了和 jshint 一样，csslint 也是基于 nodeJS 下的 csslint 来使用的。

这里安装 nodeJS 过程省略。
只需用 npm 安装 csslint 即可。

在命令行中输入

npm install -g csslint   

安装完成后命令行中出现如下的信息

C:\Users\Administrator\AppData\Roaming\npm\csslint -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint\cli.js
csslint@0.10.0 C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint
└── parserlib@0.2.5

可以查看 csslint 版本，已确认安装完成。

C:\Users\Administrator>csslint --version
v0.10.0

现在，恭喜你，我们使用 Sublime 编辑 css 文件，就会有语法检查了！

在编辑过程中，会有如下提示

点击提示点后，Sublime 状态栏也会有相应的说明