jshint 靜態代碼檢測工具

安裝

npm install jshint -g

項目中有可能用到的文件:

  • .jshintrc jshint配置文件/或者用--config命令指定一個.json文件
  • .jshintignore jshint不忽略檢測的文件 / 或者用 --exclude-path命令指定一個.gitignore
  • reporter.js 自定義的jshint的輸出方法,具體可參考本文的 附件:reporter

使用

ide拓展

主流的ide都有自己的拓展插件,這里用vscode簡單的說明。
在vscode左側的應用商店搜索jshint排第一個就是。配合項目中的.jshintrc文件可以在ide中報錯。

jshint CLI

jshint自帶命令行

例子 解釋
jshint myfile.js 執行jshint
jshint --reporter=myreporter.js myfile.js 定義reporter
jshint --verbose myfile.js 輸出中加入錯誤碼
jshint --show-non-errors myfile.js 輸出中加入錯誤信息
jshint --exclude path 加入不想被linted的目錄
jshint --exclude-path 指定.jshintignore
--prereq 指定全局變量
jshint --help 幫助
jshint --version 版本
... ...
屏蔽某些錯誤提示

jshint提供了option選項去根據不同的項目需求和程序員習慣開啟或屏蔽一些錯誤或警告提示。但是還是有些提示并不能通過配置去掉。(這有點煩人。。)這時可以用:

/* jshint -W034 */

去除對應的警告。這個W034就是錯誤碼。具體怎么得到:

jshint --verbose myfile.js
myfile.js: line 6, col 3, Unnecessary directive "use strict". (W034)

或者有些ide的提示也會直接提示你錯誤碼。(note: 一般警告的錯誤碼會以W開頭,錯誤的錯誤碼會以E開頭)
如果你想重新啟動被屏蔽的錯誤那就用

/* jshint +W034 */

配置方法

按照順序依次查找以下的config配置:

  • 通過jshint --config ..path/myconfig.json指定config
  • 在package.json里增加一個jshintConfig屬性,在屬性里配置參數。
  • 在項目根目錄添加一個.jshintrc的json配置文件,jshint運行是會從代碼文件目錄往上尋找直到找到.jshintrc文件。都找不到會在全局的默認配置里找.jshintrc文件。

Inline configuration

除了以上三種方法jshint還支持行內配置。
類似這樣,在文件或函數開頭加入:

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

行內配置有以下幾種方式:

jshint開頭,多個選項以逗號分開

/* jshint strict: true */

globals開頭,標識全局變量避免啟用undef選項時應用未定義變量報錯

/* globals MY_LIB: false */

exported,標識全局變量避免啟用unused選項時變量未使用報錯

/* exported EXPORTED_LIB */

ignore,ignore中的代碼不做jshint檢測

// Code here will be linted with JSHint.
/* jshint ignore:start */
// Code here will be ignored by JSHint.
/* jshint ignore:end */

falls through, 避免Switch statements 沒有break報錯

switch (cond) {
    case "one":
        doSomething(); // JSHint will warn about missing 'break' here.
        /* falls through */
    case "two":
        doSomethingElse();
}

jshintrc參數

參考http://jshint.com/docs/options/

具體的參數可以參考上面的官方文檔。這里不做多介紹。

一個例子:

{
    //加強選項:

    //use es6. 3/5/6
    "esversion": 6,

    //循環必須用大括號包起來
    "curly": true,

    //設置為true,禁止使用這個選項 ==和 !=,強制使用 ===和 !==。
    "eqeqeq": false,

    //允許警告js未來版本中定義的標識符。
    "futurehostile": true,

    //檢查無效 typeof操作符的值
    "notypeof": true,

    //檢查變量重復定義
    // 他接受4個值:"inner" 只檢查是否在相同的作用域重復定義;"outer" 檢查外部作用域;
    // false 與inne一樣; true 允許變量覆蓋
    "shadow": "inner",

    //ECMAScript 5嚴格模式
    // "global" - 全局層面的嚴格模式"use strict";
    // "implied" - 文件里面使用"use strict";
    // false - 禁止使用嚴格模式
    // true - 函數上面必須使用一個"use strict"; 
    "strict": "implied",

    //變量未定義
    "undef": true,

    //變量定義未使用
    "unused": true,

    // 設置為true時,禁止使用var聲明變量
    // "varstmt": true,

    // "globals": {
    //     "require": true
    // },

    //寬松選項:

    // 禁止缺少分號警告
    "asi": true,

    //環境選項:
    //暴露瀏覽器屬性的全局變量,列如 window,document;
    //注意:這個選項不暴露變量 alert或 console。
    "browser": true,

    //這個選項定義了全局變量,通常用于日志調試: console, alert等等
    "devel": true,

    //這個選項定義全局變量可以當你的代碼運行在node的運行時環境
    "node": true,

    //這個選項告訴JSHint,輸入代碼描述了一個ECMAScript 6模塊。所有模塊的代碼解釋為嚴格模式代碼。
    "module": true,

    //這個選項定義全局暴露的jQuery庫。
    "jquery": true

}

這里要說的是option里除了加強選項,寬松選項,環境選項還有一些特殊選項:
entend

{
  "extends": "../.jshintrc",
  "globals": {
    "test": false,
    "assert": false
  }
}
//在一些情況下你可能想要在項目配置之外加載一些已有的配置

overrides

{
  "shadow": false,
  "overrides": {
    "lib/*-test.js": {
      "expr": true
    }
  }
}
//在不同的文件中應用不同的配置

附件

<h3 id="reporter">reporters</h3>
JSHint Reporter.js是一個你自定義的代替jshint默認輸出方法的文件。
用jshint命令可以執行你的reporter

jshint --reporter=myreporter.js myfile.js

下面是一個例子:

"use strict";

module.exports = {
  reporter: function (res) {
    var len = res.length;
    var str = "";

    res.forEach(function (r) {
      var file = r.file;
      var err = r.error;

      str += file + ": line " + err.line + ", col " +
        err.character + ", " + err.reason + "\n";
    });

    if (str) {
      process.stdout.write(str + "\n" + len + " error" +
        ((len === 1) ? "" : "s") + "\n");
    }
  }
};

上面的例子中res中存的error的格式為:

[
  {
    file: 'demo.js',
    error:  {
      id: '(error)',
      code: 'W117',
      reason: '\'module\' is not defined.'
      evidence: 'module.exports = {',
      line: 3,
      character: 1,
      scope: '(main)',

      // [...]
    }
  },

  // [...]
]

如果你想用exporter禁止報某些錯誤的話可以寫個判斷,error.code === 'Wxxx' 時 return。

參考地址:http://jshint.com/docs/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,923評論 18 139
  • Spring Boot 參考指南 介紹 轉載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 46,954評論 6 342
  • 嚴格模式 1、設立嚴格模式的目的 消除JavaScript語法的一些不合理、不嚴謹之處,減少一些怪異行為;(會將J...
    K丶Aionro閱讀 1,953評論 0 0
  • 什么是JSHint? 官方網站這樣介紹: JSHint, A Static Code Analysis Tool ...
    9I閱讀 29,551評論 5 51
  • ESLint最初是由Nicholas C. Zakas 于2013年6月創建的開源項目。它的目標是提供一個插件化的...
    gavinDu閱讀 1,829評論 1 1