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,進行如下配置:
"sublimelinter": "save-only",
SublimeLinter 的運行模式,總共有四種,含義分別如下:
- true - 在用戶輸入時在后台進行即時校驗;
- false - 只有在初始化的時候才進行校驗;
- "load-save" - 當文件加載和保存的時候進行校驗;
- "save-only" - 當文件被保存的時候進行校驗;
推薦設置為 “save-only”,這樣只在編寫完代碼,保存的時候才校驗,Sublime Text 運行會更加流暢。
"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
"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 的校驗器,下面是默認配置的校驗選項,可以根據個人編碼風格修改:
"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"
}
