SublimeText3系列（2）-使用SublimeLinter检查Javascript与CSS代码

1.什么是linter？

linter是用来检查代码是否符合规则的工具，例如检查Javascript代码的jshint工具，你能够设置其规则"eqeqeq":true，那么若是在你的代码文件中使用了==而不是===，那么检查的时候就会给出提示。

2.什么是SublimeLinter

SublimeLinter是SublimeText的插件，它只是一个进行代码检查的框架，能够包括其余代码检查插件。
SublimeLinter能够容纳许多linter插件，如SublimeLinter-jshint、SublimeLinter-csslint。SublimeLinter至关于一个插件容器，而具体的插件则负责调用具体的linter工具进行代码检查，如jshint、csslint。
对于不一样的代码文本，SublimeLinter可使用不一样的代码检查工具进行检查。例如.js文件使用jshint， .css文件使用csslint。

3.为何用SublimeLinter？

进行代码检查的其实是jshint与csslint这些代码检查工具。
例如咱们要对JS代码文件myApp.js进行检查，不使用SublimeText编辑器的话，咱们须要在windows的命令行窗口输入jshint myApp.js，而后检查结果会输出在命令行窗口，你能够按照一条条的提示修正代码。
而SublimeLinter优化了这个过程，它能够在你编写代码的时候就实时进行代码检查(固然这个时机是能够配置的，能够实时检查，也能够在保存文件的时候检查等)。并且检查的结果会直接在你的代码上进行提示，省去了你每次关闭便捷器，再去命令行窗口检查的麻烦，并且结果更加直观。
固然，SublimeText进行代码检查的插件有不少，你也能够选用其余的代码检查插件。

4.安装SublimeLinter

4.1安装SublimeLinter框架

推荐你们使用PackageControl进行SublimeLinter的安装，使用快捷键Ctrl+Shift+P，输入Install Package, 而后输入SublimeLinter安装。关于PackageControl，前文中已有介绍。

4.2安装linter插件

因为SublimeLinter只是一个linter插件的框架，所以，还须要安装额外的linter插件。
本文中介绍Javascript代码检查插件JSHint，与CSS代码检查插件csslint。
使用PackageControl分别安装SublimeLinter-jshint与SublimeLinter-csslint

4.3安装linter工具

这一步安装的是具体的代码检查工具，咱们使用jshint与csslint。这两个模块的安装须要node和npm的支持，你们能够到NodeJS官网下载windows的node安装包安装，网上资料不少，就再也不讨论。
在安装好node与npm后，使用
npm install jshint -g
npm install csslint -g
将jshint与csslint两个模块安装到全局环境

5.SublimeLinter的设置

SublimeLinter的Settings可以使用一个设置栈来表示，栈中位置高的设置能够覆盖位置低的设置，SublimeLinter融合栈中全部的设置，最后造成代码检查时的设置。

Inline overrides
Inline settings
.sublimelinterrc settings
Project settings
User settings
Default settings

SublimeLinter的设置可分为三种类型:Global、Linter、Meta。
Global类型的设置用来控制SublimeLinter的行为和显示，例如"error_color"用来设置错误标记的颜色
Linter类型的设置针对具体的linter工具，Linter类型的设置所有放在linters这个设置中，使用object表示，object中的子项用来配置具体的linter。如

"linters": {
   "csslint": {
      "@disable": false,
      "args": [],
      "errors": "",
      "excludes": [],
      "ignore": "",
      "warnings": ""
   },
   "jshint": {
     "@disable": false,
     "args": [],
     "excludes": []
   }
}

Meta类型的设置所有以"@"开头，Meta类型能够在全局范围进行设置，此时能够控制全部的linter，例如设置"@disable":true，那么全部的linter都被禁用；Meta类型若是在单独的linter中设置，就只能用来控制单独的linter。

5.1 Default settings

Default settings是SublimeLinter与linter默认写入的，在SublimeLinter更新的时候会被覆盖，所以不要修改Default settings

5.2 User settings

User Settings保存在Packages/User/SublimeLinter.sublime-settings文件中，能够经过Preferences->Package Settings->Sublime-Linter->Settings-User打开。
为了让你们知道哪些设置是可用的，每次打开这个文件，SublimeLinter都会列出全部的设置项。
对用户来言，User Settings实际上是当作SublimeLinter的全局设置来用的

5.3 Project settings

Project settings用来对项目的代码检查进行配置，能够经过Project->Edit Project打开SublimeText的项目配置文件。
全部的Project settings都放在一个"SublimeLinter"的object中。在"SublimeLinter"对象中配置的Sublime Linter配置对项目中的全部文件都是有效的。

5.4 .sublimelinterrc settings

.sublimelinterrc settings是你们用的比较多的方法。
经过在项目目录下创建.sublimelinterrc文件来控制目录及其子目录中代码文件的SublimeLinter设置。
SublimeLinter会先在文件的当前目录中查找.sublimelinterrc文件，若是找不到，会向上一级目录继续查找。第一个被找到的.sublimelinterrc文件，用做.sublimelinterrc settings的设置，SublimeLinter并不对全部.sublimelinterrc文件的设置进行融合
对.sublimelinterrc文件查找的深度，经过"rc_search_limit"进行设置。默认为3，设置为null表示只对.sublimelinterrc文件的根目录有效，设置为0表示禁止.sublimelinterrc文件的查找。

Projects/
    Foobar/
        build/
            out.py
        src/
            foo/
                foo.py
                foobar.py
                baz/
                    baz.py
            bar/
                bar.py
        test/
            footest.py
            foobartest.py

如对上面的文件结构，"rc_search_limit"设置为3。那么.sublimelinterrc文件在如下目录将分别影响如下文件:

• foo – foo.py, foobar.py 和 baz/baz.py

• src – foo, foo/baz, and bar目录下的全部文件

• Foobar – build, src/foo, src/bar, 和test目录下的文件, 可是src/foo/baz目录下的文件不受影响，其查找深度应至少为4。

5.5 Inline settings与Inline overrides

Inline settings用来针对单个文件进行设置。
Inline overrides用来针对单个文件进行设置，但与覆盖设置栈中的其余设置不一样，它能够添加或删除设置的项。
具体请参考这里。

6. SublimeLinter的运行模式

SublimeLinter的运行模式，总共有四种，分别以下：

true - 在用户输入时在后台进行即时校验
false - 只有在初始化的时候才进行校验
"load-save" - 当文件加载和保存的时候进行校验
"save-only" - 只有当文件被保存的时候进行校验
根据我的爱好选择，我的推荐"save-only"
可在Tools->Sublime Linter->Lint Mode中进行设置
错误标记样式(Mark Style)以及侧边栏主题(Gutter Theme)也可在Tools->Sublime Linter中进行设置。你们能够选择本身喜欢的外观。
这样在每次保存文件时，SublimeLinter就会进行检查了。效果以下

黄色表明警告，红色表明错误。
只有颜色和标记提示还不够，能够Ctrl+Shift+P打开命令行窗口，输入Show All Errors，那么就会在一个窗口中给出全部的错误提示了~以下图

能够在每次保存时显示错误提示窗口。经过Tools->Sublime Linter->Show Errors On Save设置，也可在User Settings或者.sublimelinterrc settings中设置

7. jshint与csslint设置

jshint与csslint能够在.jshintrc与.csslintrc中设置，个人设置以下：
.jshintrc文件设置

{
  "bitwise": true,//不能使用位运算符&
  "curly": true,//不能省略循环和条件语句的大括号
  "forin":true,//for in须要hasOwnProperty检查
  "latedef":"nofunc",//先定义变量,函数声明除外
  "undef":true,//变量未定义
  "unused":"strict",//检查未使用的变量与函数参数，跳过函数
  "noarg":true,//禁止使用 arguments.caller 和 arguments.callee
  "maxparams": 4,//最多参数个数
  "browser":true,//容许与浏览器相关的关键字,如document、history、clearIntreval等
  "devel":true,//容许与开发相关的关键字,像alert,console等
  "indent": 2,//缩进2空格
  "maxerr":50,//超过50个错误,jslint中止工做
  "newcap":true,//容许构造器函数首字母非大写
  "nomen": true,//不容许在两边(最前或最后)悬挂下划线符号(_)
  "plusplus": false,//容许++和--
  "eqeqeq": true,//使用===作判断
  "maxlen": 120,//行最大长度
  "strict":true,//函数级别必须有"use strict"指令
  //"maxstatements": 5,//限制函数内声明语句的个数
  "node": true,//node环境
  "jquery":true//jquery环境
}

.csslintrc文件设置

{
  "adjoining-classes": false,
  "box-sizing": false,
  "box-model": false,
  "compatible-vendor-prefixes": false,
  "floats": false,
  "font-sizes": false,
  "gradients": false,
  "important": false,
  "known-properties": false,
  "outline-none": false,
  "qualified-headings": false,
  "regex-selectors": false,
  "shorthand": false,
  "text-indent": false,
  "unique-headings": false,
  "universal-selector": false,
  "unqualified-attributes": false
}