JSHint-javascript語法檢查規范工具使用及與Sublime集成

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 錯誤解析1

一、安裝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://xxxxxx/Linuxjc/1141046.html TechArticle