ESLint 是在 ECMAScript/JavaScript 程式碼中識別和報告模式匹配的工具，可以檢查常見的Javascript程式碼錯誤，如果每次在程式碼提交之前都進行一次eslint程式碼檢查，就不會因為某個欄位未定義為undefined或null這樣的錯誤而導致服務崩潰，可以有效的控制專案程式碼的質量。

全域性安裝

npm i eslint -g

初始化

如果專案中沒有.eslintrc.json配置檔案，可透過--init引數生成一個新的檔案

eslint --init

檔案配置

透過env配置需要啟動的環境

"env": {
    "es6": true, // 支援新的 ES6 全域性變數，同時自動啟用 ES6 語法支援
    "node": true // 啟動node環境
}

校驗規則

ESLint規則的三種級別
- "off"或者0，不啟用這個規則
- "warn"或者1，出現問題會有警告
- "error"或者2，出現問題會報錯
"no-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"] 強制所有控制語句使用一致的括號風格

error

    let a = 1;

    if (a) return a;

success

    let a = 1;

    if (a) {
        return a;
    }

"default-case": "error" switch 語句強制 default 分支，也可新增 // no default 註釋取消此次警告

"no-else-return": "error" 禁止 if 語句中有 return 之後有 else

error

    let a = 1;

    if (a) {
        return a;
    } else {
        return false;
    }

success

    let a = 1;

    if (a) {
        return a;
    }

    return false;

"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() 出現在頂層模組作用域中

error

    function foo() {

        if (condition) {
            const fs = require("fs");
        }
    }

success

    const fs = require("fs");

    function foo() {

        if (condition) {
            // todo fs ...
        }
    }

"no-path-concat": "error" 禁止對 dirname 和 filename進行字串連線
- error
```
    const fullPath = __dirname + 'test.js';
```
- success
兩個path.join()和path.resolve()是任何地方正在建立的檔案或目錄路徑為字串連線合適的替代品
```
    const path = require('path');
    const fullPath1 = path.join(__dirname, 'test.js');
    const fullPath2 = path.resolve(__dirname, 'test.js');
```
"no-sync": "error" 禁用同步方法
"array-bracket-spacing": ["error", "never"] 指定陣列的元素之間要以空格隔開(, 後面)， never引數：[ 之前和 ] 之後不能帶空格，always引數：[ 之前和 ] 之後必須帶空格
"block-spacing": ["error", "always"] 禁止或強制在單行程式碼塊中使用空格(禁用)

"brace-style": ["error", "1tbs"]

error

    const condition = 1;

    if (condition)
    {
        // todo:
    }

success

    const condition = 1;

    if (condition) {
        // todo:
    }

"camelcase": "error" 強制駝峰法命名
"comma-dangle": ["error", "always-multiline"] 陣列和物件鍵值對最後一個逗號， never引數：不能帶末尾的逗號, always引數：必須帶末尾的逗,always-multiline：多行模式必須帶逗號，單行模式不能帶逗號號
"comma-spacing": ["error", { "before": false, "after": true }] 控制逗號前後的空格
"comma-style": ["error", "last"] 控制逗號在行尾出現還是在行首出現 (預設行尾)
- error
```
    let a = 1
        , b = 2;
```
- success
```
    let a = 1,
        b = 2;
```
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }] 該規則規定了在物件字面量語法中，key和value之間的空白，冒號前不要空格，冒號後面需要一個空格
- error
```
    const obj = { a:1, b:2 };
```
- success
```
    const obj = {a: 1, b: 2};
```
"lines-around-comment": ["error", { "beforeBlockComment": true }] 要求在註釋周圍有空行 ( 要求在塊級註釋之前有一空行)
"newline-after-var": ["error", "always"] 要求或禁止 var 宣告語句後有一行空行
"newline-before-return": "error" 要求 return 語句之前有一空行
"no-multi-assign": "error" 連結變數的賦值可能會導致意外的結果並難以閱讀，不允許在單個語句中使用多個分配
- error
```
    let a = b = c = 1;
```
- success
```
    let a = 1;
    let b = 1;
    let c = 1;
```

"max-params": [1, 3] function 定義中最多允許的引數數量

error

    function test(a, b, c, d) {
        return a + b + c + d;
    }

    test(1, 2, 3, 4);

success

    function test({a, b, c, d}) {
        return a + b + c + d;
    }

    test({a: 1, b: 2, c: 3, d: 4});

"new-cap": ["error", { "newIsCap": true, "capIsNew": false}] 建構函式首字母大寫
- error
```
    class test {

    }

    new test();
```
- success
```
    class Test {

    }

    new Test();
```
"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"] 強制在塊之前使用一致的空格

.eslintrc.json

{
    "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"
        ]
    }
}

忽略檔案（.eslintignore）

以透過在專案根目錄建立一個 .eslintignore 檔案告訴 ESLint 去忽略掉不需要檢測的檔案或者目錄

方法一: 新建.eslintignore檔案

```.eslintignore
test.js


* 方法二: 透過package.json檔案設定

package.json

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

結合pre-commit使用

eslint可以結合pre-commit外掛使用，目的是在package.json的scripts之前對一些指定的命令提前執行, 相當於一個勾子

//npm install --save-dev pre-commit

//package.json 檔案
"scripts": {
  "dev": "node app",
  "lint": "eslint .",
  "fix": "eslint --fix ."
},
"pre-commit": [
  "fix",
  "lint"
],

//執行git commit -m 'test' 提交程式碼時 會先執行pre-commit中的程式碼

NodeJs專案開發中應用ESLint程式碼規範

相關文章