JSHint-javascript語法檢查規範工具使用及與Sublime整合

• 一、安裝nodejs的jshint
  • 安裝Node.js環境
  • 安裝nodejs的jshint[^4] csshint
• 二、sublime中的jshint安裝設定
  • 方式一、 使用Sublimelinter，支援css等多種語言驗證
  • 方式二、使用Sublime JSHint Gutter，僅支援js驗證
• 三、jshint的檢查規則的三種設定方式[^1]
  • 1. 自定義.jshintrc檔案
  • 2. 設定放到專案的 package.json 檔案裡面， jshintConfig 下面
  • 3. 內聯設定（Inline configuration）
• 四、在Sublimelinter或者JSHint Gutter中設定.jshintrc
• 五、.jshintrc設定中文詳細定義[^{2]，官方設定列表[3]}
  • 1. 強制選項(Enforcing options) 如果設為true會產生更多錯誤提示
  • 2. 寬鬆選項(Relaxing options) 如果設為true會產生較少錯誤提示
  • 3. 環境(Environments)

---

JSHint，發現錯誤和潛在問題的社群驅動的工具
JSLint 錯誤解析¹

一、安裝nodejs的jshint

安裝Node.js環境

jshint其功能實現需要node.js支援，所以去node.js官網單擊找到當前平台的版本進行下載安裝。

安裝nodejs的jshint² csshint

$ npm   install -g jshint$ npm   install -g csshint#測試$ jshint -v$ csshint  -v#單獨使用校驗測試$ jshint myfile.jsmyfile.js: line 10, col 39, Octal literals are not allowed in strict mode.1 error

二、sublime中的jshint安裝設定

方式一、 使用Sublimelinter，支援css等多種語言驗證

通過sublime的package control安裝Sublimelinter
在sublime中按下Cmd+Shift+P開啟命令查詢視窗，輸入pci找到packge control install回車

稍等等待彈出package查詢視窗，輸入Sublimelinter，按下回車安裝。

然後使用同樣方法安裝SublimeLinter-jshint、SublimeLinter-csshint。

此時，一般情況下，你開啟編輯器，檢視js檔案會發現，已經有了語法校驗。

檢視SublimeLinter-jshint設定,右鍵 -> Sublimelinter -> Open User Settings

禁用Sublimelinter-jshint ，右鍵 -> Sublimelinter -> Toggle Linter 回車即可切換 啟用狀態

方式二、使用Sublime JSHint Gutter，僅支援js驗證

在sublime中按下Cmd+Shift+P開啟命令查詢視窗，輸入pci找到packge control install回車，稍等等待彈出package查詢視窗，輸入js gutter，按下回車安裝。

JS Gutter設定

js gutter預設未開啟檢查，設定編輯，載入或儲存時自動檢查
右鍵 -> JSHint -> Set Plugin Options 將對應設定的false改為true即可開啟檢查

{    "lint_on_edit": true,    "lint_on_load": true,    "lint_on_save": true}

三、jshint的檢查規則的三種設定方式³

1. 自定義.jshintrc檔案

一般.jshintrc檔案放置在模組根目錄，如果沒有找到，會一直向上及目錄查詢，直到找到檔案系統的根目錄/，如果沒找到採用預設規則。

2. 設定放到專案的 package.json 檔案裡面， jshintConfig 下面

3. 內聯設定（Inline configuration）

在js檔案中的註釋中設定例如：

/* jshint undef: true, unused: true *//* globals MY_GLOBAL */

四、在Sublimelinter或者JSHint Gutter中設定.jshintrc

JSHint Gutter 右鍵 -> JSHint -> set Linting Preference 預設.jshintrc檔案

Sublimelinter 右鍵 -> Sublimelinter -> Open User Settings 指定.jshintrc檔案路徑

五、.jshintrc設定中文詳細定義⁴，官方設定列表⁵

1. 強制選項(Enforcing options) 如果設為true會產生更多錯誤提示

{    "bitwise": true ,  //禁用位運算子，位運算子&在 JavaScript 中使用較少，經常是把 && 錯輸成 &    "curly": true , //迴圈或者條件語句必須使用花括號包圍    "eqeqeq": true , //強制使用三等號    "es3": true  ,  //相容低階瀏覽器 IE 6/7/8/9    "freeze": true , //禁止重寫原生物件的原型，比如 Array，Date        /*            Array.prototype.count = function (value) { return 4; };            // -> Warning: Extending prototype of native object: 'Array'.            為原生物件新增屬性確實看上去很方便，但也帶來了潛在的問題            一是如果專案中有多處為同一個物件新增了同樣的屬性（或函數），則很可能產生衝突；            二是如果某段邏輯依賴於物件屬性遍歷，則可能產生錯誤。          */    "immed": true,        /** 匿名函數呼叫必須            (function() {               // body             }());            而不是            (function() {               // body            })();            這是為了表明，表示式的值是函數的結果，而不是函數本身        */    "indent": 4 , //程式碼縮排    "latedef": "nofunc" , //禁止定義之前使用變數，忽略 function 函數宣告    "newcap": true , //構造器函數首字母大寫    "noarg":true , //禁止使用 arguments.caller 和 arguments.callee，未來會被棄用， ECMAScript 5 禁止使用 arguments.callee    "quotmark": false , //為 true 時，禁止單引號和雙引號混用    "undef": true , //變數未定義    "unused": true , //變數未使用    "strict":true , //嚴格模式    "maxparams": 4 , //最多引數個數    "maxdepth": 4  , //最大巢狀深度    "maxcomplexity":true , //複雜度檢測    "maxlen": 600 ,  //最大行數    "predef": [        "before",        "beforEach",        "after",        "afterEach",        "-toberemoved"    ]  // 用來自定義一些環境變數，變數前面有有-號表示從環境中移除次變數    //預定義變數為ReadOnly 不能在js檔案的註釋中使用}

2. 寬鬆選項(Relaxing options) 如果設為true會產生較少錯誤提示

{    "asi": true , //控制“缺少分號”的警告    "boss": true , //控制“缺少分號”的警告    "debug": true ,//"debug": true    "evil": true , //控制 eval 使用警告    "lastsemic": true ,//檢查一行程式碼最後宣告後面的分號是否遺漏    "laxcomma": true , //檢查不安全的折行，忽略逗號在最前面的程式設計風格    "loopfunc": true , //檢查迴圈內巢狀 function    "multistr": true ,//檢查多行字串    "notypeof": true , //檢查無效的 typeof 操作符值    "sub": true , //person['name'] vs. person.name    "supernew": true , //new function () { ... } 和 new Object;    "validthis": true //在非構造器函數中使用 this}

3. 環境(Environments)

{    "browser": true ,//預定義全域性變數 document，navigator，FileReader 等    "devel": true , //定義用於偵錯的全域性變數：console，alert    "jquery": true, //定義全域性變數 $    "node": true, //定義全域性變數  module export等}

本文永久更新連結地址：http://www.linuxidc.com/Linux/2016-06/132543.htm