ESLint 靜態程式碼檢查

xiangzhihong發表於2019-02-27

ESLint簡介

ESLint是一個用來識別 ECMAScript 並且按照規則給出報告的程式碼檢測工具，使用它可以避免低階錯誤和統一程式碼的風格。如果每次在程式碼提交之前都進行一次eslint程式碼檢查，就不會因為某個欄位未定義為undefined或null這樣的錯誤而導致服務崩潰，可以有效的控制專案程式碼的質量。

在許多方面，它和 JSLint、JSHint 相似，除了少數的例外：

ESLint 使用 Espree 解析 JavaScript。
ESLint 使用 AST 去分析程式碼中的模式。
ESLint 是完全外掛化的。每一個規則都是一個外掛並且你可以在執行時新增更多的規則。

使用

安裝

ESLint 支援多種安裝方式，可以通過 npm 來安裝，也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

全域性安裝

npm i -g eslint
複製程式碼

區域性安裝（推薦）

npm i -D eslint
複製程式碼

初始化

安裝完畢後，接下來新建一個配置檔案.eslintrc.js，或者使用如下的命令列來自動生成，命令如下：

eslint --init
複製程式碼

配置

注意：如果你之前使用的版本低於 1.0.0，請檢視遷移指南。執行 eslint --init 之後，.eslintrc 檔案會在你的資料夾中自動建立。檔案的內容大體如下：

{
    "env": {
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "script"
    },
    "rules": {
        "no-console": 0,
        "no-unused-vars": "error",
        "no-use-before-define": "error",
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "curly": ["error", "all"],
        "default-case": "error",
        "no-else-return": "error",
        "no-empty-function": "error",
        "no-implicit-coercion": "error",
        "no-invalid-this": "error",
        "no-loop-func": "error",
        "no-multi-spaces": "error",
        "no-new-func": "error",
        "no-useless-return": "error",
        "global-require": "error",
        "no-path-concat": "error",
        "no-sync": "error",
        "array-bracket-spacing": [
            "error",
            "never" 
        ],
        "block-spacing": [
            "error",
            "always"
        ],
        "brace-style": [
            "error",
            "1tbs"
        ],
        "camelcase": "error",
        "comma-dangle": [
            "error",
            "always-multiline"
        ],
        "comma-spacing": [
            "error",
            { "before": false, "after": true }
        ],
        "comma-style": [
            "error",
            "last"
        ],
        "key-spacing": [
            "error", 
            { "beforeColon": false, "afterColon": true }
        ],
        "lines-around-comment": [
            "error",
            { "beforeBlockComment": true }
        ],
        "newline-after-var": [
            "error",
            "always"
        ],
        "newline-before-return": "error",
        "no-multi-assign": "error",
        "max-params": [1, 3],
        "new-cap": [
            "error",
            {
                "newIsCap": true,
                "capIsNew": false
            }
        ],
        "no-multiple-empty-lines": [
            "error",
            {
                "max": 2
            }
        ],
        "no-shadow-restricted-names": "error",
        "no-undef-init": "error",
        "keyword-spacing": "error",
        "space-before-blocks": [
            "error",
            "always"
        ]
    }
}

複製程式碼

ESlint支援的可配置資訊主要分為3類：

Environments：Javascript 腳步將要執行在什麼環境中（如：nodejs，browser，commonjs等）,ESlint支援的所有環境都可以在官網查到。
Globals：執行程式碼時腳步需要訪問的額外全域性變數。
Rules：開啟某些規則，也可以設定規則的等級。

檢測規則

接下來，可以在配置檔案中設定一些規則。ESLint規則的三種級別：

"off" 或者 0：關閉規則。
"warn" 或者 1：開啟規則，並且作為一個警告（不影響exit code）。
"error" 或者 2：開啟規則，並且作為一個錯誤（exit code將會是1）。

例如，下面的一些配置規則：

"console":"off" 禁用 console。
"no-unused-vars":2 禁止出現未使用過的變數。
"no-use-before-define":2 不允許在變數定義之前使用它們。
"linebreak-style":[2, "unix"] 強制使用一致的換行風格。
"quotes": ["error", "single"] 強制使用一致的單引號。
"semi":["error", "always"] 控制行尾部分號。
"curly":["error", "all"] 強制所有控制語句使用一致的括號風格。
"default-case": "error" switch 語句強制 default 分支，也可新增 // no default 註釋取消此次警告。
"no-else-return":"error" 禁止 if 語句中有 return 之後有 else。
"no-implicit-coercion": "error" 禁止出現空函式.如果一個函式包含了一條註釋，它將不會被認為有問題。
"no-invalid-this": "error" 禁止 this 關鍵字出現在類和類物件之外。
"no-loop-func":"error" 禁止在迴圈中出現 function 宣告和表示式。
"no-multi-spaces":"error" 禁止使用多個空格。
"no-new-func":"error" 禁止對空Function 物件使用 new 操作符。
"no-useless-return":"error" 禁止沒有任何內容的return;
"global-require": "error" 要求 require() 出現在頂層模組作用域中。
"no-path-concat": "error" 禁止對 dirname 和 filename進行字串連線
"no-sync": "error" 禁用同步方法。
"array-bracket-spacing": ["error", "never"] 指定陣列的元素之間要以空格隔開(, 後面)， never引數：[ 之前和 ] 之後不能帶空格，always引數：[ 之前和 ] 之後必須帶空格。
"block-spacing": ["error", "always"] 禁止或強制在單行程式碼塊中使用空格(禁用)。
"brace-style": ["error", "1tbs"]
"camelcase": "error" 強制駝峰法命名。
"comma-dangle": ["error", "always-multiline"] 陣列和物件鍵值對最後一個逗號， never引數：不能帶末尾的逗號, always引數：必須帶末尾的逗,always-multiline：多行模式必須帶逗號，單行模式不能帶逗號號。
"comma-spacing": ["error", { "before": false, "after": true }] 控制逗號前後的空格。
"comma-style": ["error", "last"] 控制逗號在行尾出現還是在行首出現 (預設行尾)。
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }] 該規則規定了在物件字面量語法中，key和value之間的空白，冒號前不要空格，冒號後面需要一個空格。
"lines-around-comment": ["error", { "beforeBlockComment": true }] 要求在註釋周圍有空行 ( 要求在塊級註釋之前有一空行)。
"newline-after-var": ["error", "always"] 要求或禁止 var 宣告語句後有一行空行。
"newline-before-return": "error" 要求 return 語句之前有一空行。
"no-multi-assign": "error" 連結變數的賦值可能會導致意外的結果並難以閱讀，不允許在單個語句中使用多個分配。
"max-params": [1, 3] function 定義中最多允許的引數數量。
"new-cap": ["error", { "newIsCap": true, "capIsNew": false}] 建構函式首字母大寫。
"no-multiple-empty-lines": ["error", {"max": 2}] 空行不能夠超過2行。
"no-shadow-restricted-names": "error" 禁止對一些關鍵字或者保留字進行賦值操作，比如NaN、Infinity、undefined、eval、arguments等。
"no-undef-init": "error" 禁止把undefined賦值給一個變數。
"keyword-spacing": "error" keyword 前後需要空格。
"space-before-blocks": ["error","always"] 強制在塊之前使用一致的空格。

忽略檢測

既然有檢測的規則，那麼必然有忽略檢測的配置。要新增忽略檢測的規則，首先要在專案根目錄建立一個 .eslintignore 檔案告訴 ESLint 去忽略掉不需要檢測的檔案或者目錄。

或者通過package.json檔案設定需要忽略檢測的物件，例如：

{
  "name": "my_project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": ""
  },
  "eslintConfig": { // 也可配置eslint
    "env": {
      "es6": true,
      "node": true
    }
  },
  "eslintIgnore": ["test.js"]
}
複製程式碼

Gulp中使用ESLint

除了npm方式之外，ESLint還支援Gulp外掛方式使用，使用之前需要先安裝外掛。

npm install gulp-eslint
複製程式碼

如果要使用gulp-eslint進行eslint規則的校驗，可以使用下面的方式：

var gulp = require('gulp');
var eslint = require('gulp-eslint');
gulp.task('lint',function(){
    return gulp.src(['app/**/*.js']) //指定的校驗路徑
        .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校驗檔案
        .pipe(eslint.format())
});
複製程式碼

ESLint技巧

eslint-config-standard

eslint-config-standard是一個標準的ESLint規則檢測庫，因此只需要安裝這個庫就可以省去配置ESLint規則。

然後，在專案的根目錄裡面手動建立一個.eslintrc檔案，然後在裡面新增如下程式碼：

{
  "extends": "standard"
}
複製程式碼

執行完以上步驟，就可以使用ESLint這個工具來校驗專案裡的程式碼。

在Vue專案裡，.vue檔案寫的是類似於html的格式，不是標準的JavaScript檔案，ESLint無法直接識別.vue檔案裡的JavaScript程式碼，那麼這個時候我們需要去安裝一個工具，安裝命令如下：

 npm i eslint-plugin-html -D
複製程式碼

因為在vue檔案裡面寫JavaScript程式碼也是寫在script標籤裡面的，這個外掛的作用就是識別一個檔案裡面script標籤裡面的JS程式碼，官方也是這麼推薦的。所以我們要在.eslintrc檔案裡面新增一段指令碼：

{
  "extends": "standard",
  "plugins": [
    "html"
  ]
}

複製程式碼

執行完以上步驟後，我們跳轉到package.json檔案裡面的scripts裡面新增一條命令：

"lint": "eslint --ext .js --ext .jsx --ext .vue src/"

複製程式碼

在上面的指令碼命令中，ext後面需要寫上指定檢測檔案的字尾，如.js、.jsx、 .vue等，緊接著後面要寫上一個引數，這個引數就是我們要檢測哪個目錄下面的檔案，一般專案檔案都在src下面，所以在後面寫上src/就好。

現在我們就可以到terminal裡面輸入$ npm run lint，來檢驗專案裡的程式碼是否符合ESLint的規則。

ESLint自動修復報錯

一般來說，當我們使用命令“npm run lint”檢測JavaScript的時候，基本上都會出現非常的多報錯，基本上就是滿屏的error和warning。

在報這麼多的錯誤之後，如果我們一條一條地去修復，就會變的非常的麻煩，相信剛接觸ESLint的童鞋都深有體會。其實這些錯誤都可以讓ESLint幫助我們自動地修復。具體來說，只需要在package.json檔案裡面的scripts裡面新增一條命令即可：

"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"

複製程式碼

當我們再去terminal中執行命令：$ npm run lint-fix，你會發現沒有那麼多飄紅的報錯，也沒有滿屏的error和warning了。

當然，還有一種萬能方法，就是在報錯的JS檔案中第一行寫上/* eslint-disable */，具體可以參考Command line Interface

eslint-loader

有時候，我們希望在專案開發的過程當中，每次修改程式碼都能夠自動進行ESLint的檢查。因為在我們改程式碼的過程中去做一次檢查，如果有錯誤，我們就能夠很快地去定位到問題並解決問題。這時候我們可以藉助eslint-loader外掛。

npm i eslint-loader babel-eslint -D
複製程式碼

執行完安裝操作後，我們還需要在.eslintrc檔案裡面配置如下指令碼：

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "parser": "babel-eslint"
}

複製程式碼

為什麼我們要配置parser呢？因為我們的專案是基於webpack的，專案裡的程式碼都是需要經過babel去處理的。babel處理的這種語法可能對ESLint不是特別的支援，然後我們使用loader處理ESLint的時候就會出現一些問題。所以一般來說，我們用webpack和babel來進行開發的專案，都會指定它的parser使用babel-eslint。

同時，使用webpack方式構建的專案，還需要在webpack.config.base.js的module下面的rules裡面新增一個如下指令碼：

rules: [
  {
    test: /\.(vue|js|jsx)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    enforce: 'pre'
  },
  ......
]

複製程式碼

然後我們就可以使用命令 $ npm run dev就可以在開發環境進行ESLint錯誤檢測。

附： cn.eslint.org/ www.imooc.com/article/322…

vuecli結合eslint靜態檢查
2017-11-06
VueEsLint
ReactFlow程式碼靜態檢查
2018-07-20
React
python程式碼檢查工具(靜態程式碼審查)
2021-09-08
Python
FindBugs：Java 靜態程式碼檢查
2016-08-14
Java
CSS 程式碼靜態質量檢查
2015-08-01
CSS
JavaScript 程式碼靜態質量檢查
2015-07-15
JavaScript
Vue eslint 程式碼檢查配置
2018-10-27
VueEsLint
JS程式碼檢查工具ESLint
2018-05-23
JSEsLint
(十八)前端使用eslint程式碼檢查
2019-01-09
前端EsLint
利用 ESLint 檢查程式碼質量
2016-08-31
EsLint
[原創]Java靜態程式碼檢查工具介紹
2014-06-20
Java
程式碼靜態掃描規則——型別轉換檢查
2022-01-16
型別
機器學習&惡意程式碼靜態檢測
2022-01-14
機器學習
React的靜態型別檢查
2020-11-04
React型別
選擇靜態程式碼安全檢測工具指南
2023-09-19
靜態程式碼檢測工具(SAST)有哪些作用
2023-12-07
AST
Vue中的靜態型別檢查
2020-11-04
Vue型別
Sublime Text 中配置 Eslint 程式碼檢查和自動修復
2019-03-04
EsLint
靜態程式碼塊
2018-08-29
如何高效實施靜態程式碼檢測工具SAST?
2021-06-17
AST
大家有沒有關於 Python 執行起來不錯的程式碼檢查工具？用於 CICD 裡面的靜態程式碼檢查
2020-05-07
Python
Flow_JS靜態型別檢查器
2018-08-12
JS型別
Android 隱私合規靜態檢查
2021-11-01
Android
靜態程式碼安全檢測服務包括哪些內容?
2023-09-26
VScode下搭配ESLint、TSLint、stylelint的程式碼檢查配方
2019-03-11
VSCodeEsLint
Java靜態程式碼塊
2020-12-19
Java
靜態代理程式碼示例
2020-11-23
Flow：Facebook 的 JavaScript 靜態型別檢查器
2014-11-27
JavaScript型別
你也許不知道的Vuejs – 使用ESLint檢查程式碼質量
2019-03-04
VueJSEsLint
你也許不知道的Vuejs - 使用ESLint檢查程式碼質量
2018-03-13
VueJSEsLint
flow–facebook出品的javascript靜態型別檢查器
2015-08-02
JavaScript型別
03.ElementUI原始碼學習:程式碼風格檢查和格式化配置（ESlint ＆ Prettier）
2021-04-17
UI原始碼EsLint
為你的react app增加eslint自動格式化和程式碼提交檢查
2019-04-18
ReactAPPEsLint
程式碼風格統一：使用husky, prettier, eslint在程式碼提交時自動格式化，並檢查程式碼。
2018-11-20
EsLint
查詢(1)--靜態查詢
2014-02-21
三分鐘從零單排js靜態檢查
2019-01-29
JS
Model Inspector — 軟體模型靜態規範檢查工具
2022-04-22
模型
Android 隱私合規靜態檢查實現(二)
2021-12-27
Android