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
}