SublimeLinter 是前端編碼利器——Sublime Text 的一款外掛，用於高亮提示使用者編寫的程式碼中存在的不規範和錯誤的寫法，支援 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多種開發語言。這篇文章介紹如何在 Windows 中配置 SublimeLinter 進行 JS & CSS 校驗。
準備工作
安裝 Sublime Text 包管理工具：http://wbond.net/sublime_packages/package_control
使用 Sublime Text 包管理工具安裝 SublimeLinter：https://github.com/SublimeLinter/SublimeLinter
安裝 Node.js，建議安裝 Windows Installer 版本：http://nodejs.org
引數配置
開啟 SublimeLinter 的配置檔案，Preferences->Package Settings->SublimeLinter->Settings – User，進行如下配置：
|
1 |
"sublimelinter": "save-only", |
SublimeLinter 的執行模式，總共有四種，含義分別如下：
- true – 在使用者輸入時在後臺進行即時校驗；
- false – 只有在初始化的時候才進行校驗；
- “load-save” – 當檔案載入和儲存的時候進行校驗；
- “save-only” – 當檔案被儲存的時候進行校驗；
推薦設定為 “save-only”，這樣只在編寫完程式碼，儲存的時候才校驗，Sublime Text 執行會更加流暢。
|
1 2 3 4 |
"sublimelinter_executable_map": { "javascript": "D:/nodejs/node.exe", "css": "D:/nodejs/node.exe" } |
這裡是配置 JavaScript 和 CSS 校驗需要用到的 JS 引擎（這裡用的是 Node.js）的安裝路徑。
SublimeLinter 使用 JSHint 作為預設的 JavaScript 校驗器，也可以配置為 jslint 和 gjslint（closure linter）。下面我使用的 jshint 校驗選項，大家可以根據自己的編碼風格自行配置，選項的含義可以參考這裡：http://www.jshint.com/docs/#options
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
"jshint_options": { "strict": true, "noarg": true, "noempty": true, "eqeqeq": true, "undef": true, "curly": true, "forin": true, "devel": true, "jquery": true, "browser": true, "wsh": true, "evil": true } |
SublimeLinter 使用 CSSLint 作為 CSS 的校驗器，下面是預設配置的校驗選項，可以根據個人編碼風格修改：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
"csslint_options": { "adjoining-classes": "warning", "box-model": true, "box-sizing": "warning", "compatible-vendor-prefixes": "warning", "display-property-grouping": true, "duplicate-background-images": "warning", "duplicate-properties": true, "empty-rules": true, "errors": true, "fallback-colors": "warning", "floats": "warning", "font-faces": "warning", "font-sizes": "warning", "gradients": "warning", "ids": "warning", "import": "warning", "important": "warning", "known-properties": true, "outline-none": "warning", "overqualified-elements": "warning", "qualified-headings": "warning", "regex-selectors": "warning", "rules-count": "warning", "shorthand": "warning", "star-property-hack": "warning", "text-indent": "warning", "underscore-property-hack": "warning", "unique-headings": "warning", "universal-selector": "warning", "vendor-prefix": true, "zero-units": "warning" } |