在Sublime Text 3上集成JSHint檢查

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

一、安裝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。

二、使用和配置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）。

三、配置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": []
            }
        }
    }
}