藉助SublimeLinter編寫高質量的JavaScript & CSS程式碼

　　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 執行會更加流暢。

　　（2）校驗引擎

"sublimelinter_executable_map":

{

    "javascript":"D:/nodejs/node.exe",

    "css":"D:/nodejs/node.exe"

}

　　這裡是配置 JavaScript 和 CSS 校驗需要用到的 JS 引擎（這裡用的是 Node.js）的安裝路徑。

　　（3）JSHint 選項

　　SublimeLinter 使用 JSHint 作為預設的 JavaScript 校驗器，也可以配置為 jslint 和 gjslint（closure linter）。下面我使用的 jshint 校驗選項，大家可以根據自己的編碼風格自行配置，選項的含義可以參考這裡：http://www.jshint.com/docs/#options

"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

}

　　（4）CSSLint 選項

　　SublimeLinter 使用 CSSLint 作為 CSS 的校驗器，下面是預設配置的校驗選項，可以根據個人編碼風格修改：

"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"

}