vscode配置JSHint提示工具

vscode配置JSHint提示工具

本文介紹vscode配置JSHint提示工具，規範JavaScript的編碼。

---

1. 首先“Ctrl + P”輸入“ext install jshint”，或者選擇側邊欄“擴展”直接搜索“jshint”;
   然後，下載jshint,如圖：
   
   安裝第一個jshint,因爲我已經安裝了所以沒有綠色“安裝”按鈕，點擊安裝按鈕即可安裝。注：不要安裝圖中第二個，我之前就是安裝這個，結果後來各種使用不成功（會用的人除外），另外也不要安裝JSCS
   Linter、JS”Standarder”Linter等，如果安裝了可以disable,因爲好像會有衝突。
2. 然後，在對應的項目根目錄下新建一個.jshintrc文件，不要把後綴寫成json(eslint的配置文件爲json),如圖:
   
3. 然後，在.jshintrc文件中配置，JSHint的配置項，如：

{
    "globals": {
        "$": false,
        "window": false,
        "document":false
    },
    "strict": true,
    "curly": true,
    "eqeqeq": true,
    "noarg": true,
    "noempty": true,
    "quotmark": "single",
    "undef": true,
    "unused": true
}

其中，globals設置明確用作全局變量的名字，以此來辨別被遺忘的var聲明，strict爲嚴格模式，curly設置循環或者條件語句必須使用花括號包圍，eqeqeq設置禁止使用 ==和 !=，強制使用 ===和 !==，noarg設置禁止使用 arguments.caller和 arguments.callee，noempty設置不允許出現空代碼塊，quotmark設置“single”表示字符串只允許用單引號，undef設置提示變量 未定義，unused設置提示變量定義了未使用。
JSHint的配置項可參考http://jshint.com/docs/options/
嚴格模式可參考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
4. 最後，完成第3步並重啓vscode之後，JSHint已經開始生效發揮作用了，如圖：
點擊警告表示會在編輯器下方顯示不符合規範的提示，在代碼中也會出現綠色下劃線提示，如圖：

注：然而JSHint中有一些配置項已經棄用了，比如indent用來配置代碼縮進的空格數，若要indent發揮作用需要將jshint回滾至版本2.5以下。另外也可以通過自己設置編輯器來設置tab對應的空格數，設置方法爲在“首選項”中選擇”用戶設置“，配置“settings.json”,並保存：

// 將設置放入此文件中以覆蓋默認設置
{
     "editor.detectIndentation": false,
     "editor.tabSize": 2
}

其中editor.detectIndentation設置爲false,表示不讓編輯器根據文本類型自動分配tab對應的空格數，editor.tabSize設置tab對應的空格數，若不修改默認爲4。
重啓vscode，設置即發揮作用，“Alt+Shift+F”可以直接將代碼格式化爲縮進對應的空格數。

對於JavaScript的編碼規範和編寫寫應當避免的問題，可參考另外兩篇文章：
JavaScript幾點編碼規範的說明
JavaScript需要避免的問題總結