ESLint 靜態代碼檢查

時間 2019-11-17

原文原文鏈接

ESLint簡介

ESLint是一個用來識別 ECMAScript 而且按照規則給出報告的代碼檢測工具，使用它能夠避免低級錯誤和統一代碼的風格。若是每次在代碼提交以前都進行一次eslint代碼檢查，就不會由於某個字段未定義爲undefined或null這樣的錯誤而致使服務崩潰，能夠有效的控制項目代碼的質量。html

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

ESLint 使用 Espree 解析 JavaScript。
ESLint 使用 AST 去分析代碼中的模式。
ESLint 是徹底插件化的。每個規則都是一個插件而且你能夠在運行時添加更多的規則。

使用

安裝

ESLint 支持多種安裝方式，能夠經過 npm 來安裝，也能夠在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。node

全局安裝

npm i -g eslint
複製代碼

局部安裝（推薦）

npm i -D eslint
複製代碼

初始化

安裝完畢後，接下來新建一個配置文件.eslintrc.js，或者使用以下的命令行來自動生成，命令以下：webpack

eslint --init
複製代碼

配置

注意：若是你以前使用的版本低於 1.0.0，請查看遷移指南。運行 eslint --init 以後，.eslintrc 文件會在你的文件夾中自動建立。文件的內容大致以下：es6

{
    "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類：web

Environments：Javascript 腳步將要運行在什麼環境中（如：nodejs，browser，commonjs等）,ESlint支持的全部環境均可以在官網查到。
Globals：執行代碼時腳步須要訪問的額外全局變量。
Rules：開啓某些規則，也能夠設置規則的等級。

檢測規則

接下來，能夠在配置文件中設置一些規則。ESLint規則的三種級別：npm

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

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

"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 去忽略掉不須要檢測的文件或者目錄。gulp

或者經過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…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。