在Sublime Text 3上集成JSHint檢查

在如何快速開發符合規範的web頁中提到了使用JSHint來幫助開發者檢查語法錯誤，規範代碼風格。本文介紹如何配置Sublime Text 3來集成JSHint。

1、安裝JSHint及編輯器插件

1. 首選確認安裝了Node.js。而後使用以下命令將JSHint安裝爲Node程序。SublimeLinter依賴的JSHint版本爲2.5.0或更新。

npm install -g jshint

JSHint安裝成功後能夠在終端經過命令行進行驗證。

2. 安裝SublimeLinter和SublimeLinter-jshint插件

使用Package Control安裝SublimeLinter和SublimeLinter-jshint插件，安裝步驟詳見如何快速開發符合規範的web頁，「ST插件安裝」一節。安裝完成後重啓Sublime Text3。

2、使用和配置SublimeLinter

重啓編輯器後應該就能看到JSHint的提示了。若是SublimeLinter聲稱linter可執行文件沒法找到，請確保JSHint正確安裝，且其路徑已經被加到PATH環境變量（OS X在終端啓動文件中配置，Windows則添加路徑至path系統環境變量）。

上圖是JSHint提示一個警告的例子，警告以黃色點在行號左側標出，相關的變量被高亮提示，點擊提示框會在狀態欄顯示具體信息。光標不在任何提示框時狀態欄顯示發現的錯誤和警告數量。SublimeLinter提供了右鍵菜單（和快捷鍵）在各錯誤間跳轉，或者列出全部發現的錯誤。

SublimeLinter有幾種監控模式（右鍵 > SublimeLinter > Lint Mode），分別是Background（實時監測），Load / Save，Save Only和Manual。錯誤/警告的提示樣式也能夠更改（右鍵 > SublimeLinter > Mark Style 和 Choose Gutter Theme）。更多的設置請參考SublimeLinter的配置文件（Sublime Text菜單項 > Perferences > Package Settings > SublimeLinter > Settings User）。

3、配置JSHint

JSHint經過.jshintrc文件配置驗證規則，該文件應放置在驗證目標文件的某個祖先目錄中（經常使用作法是放置在用戶HOME目錄）。若是文件不存在請手工建立。一個示例.jshintrc內容以下。

{ // 提示項定製 "eqeqeq": false, // 不提示使用 == 和 !== 的通常比較 "-W041": false, // 不提示使用 == 和 !== 與''或0的比較 "eqnull": true, // 不提示和 null 比較 "sub": true, // 不提示使用 [] 形式訪問對象屬性 // "es5": true, // ES5裏尾部逗號是合法的 "es3": true, // 提示尾部逗號 "bitwise": true, // 提示位操做符的使用（防止邏輯運算符筆誤） "curly": true, // 提示條件語句和循環語句的語句體沒有使用大括號包裹 "immed": true, // 提示當即執行函數沒有使用小括號包裹 "latedef": "nofunc",// 提示變量使用先於變量聲明（但函數聲明除外） "noarg": true, // 提示 arguments.caller 和 arguments.callee 的使用 "undef": true, // 提示變量未聲明就使用（跨文件全局變量請在predef中顯式列出） "unused": true, // 提示未使用的變量 // 環境感知 "browser": true, // 感知瀏覽器API，對應變量默認爲已聲明的，如 document, navigator, FileReader "jquery": true, // 感知jQuery API // "devel": true, // 感知調試API，如console, alert等，不推薦用於正式發佈 "predef": [ // 列出已知的全局變量，默認爲已聲明的 "Ext", "XMLifeOperating", "sendPutRequest", "sendRequest", "sendGetRequest", "sendDeleteRequest", "requestAction", "requestException", "uploadImage", "uploadBlobImage", "ConvertUtils", "rpc", "RpcCall", "RpcNamespace", "deepExtend", "objectClone" ] }

SublimeLinter同時支持指定.jshintrc位置，覆蓋「沿着父文件夾查找」的規則。經過在SublimeLinter的配置文件中合併以下內容達到這個目的。

{ "user": { "linters": { "jshint": { "@disable": false, "args": [ "--config", "${home}/.jshintrc" ], "excludes": [] } } } }