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

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"] 強制在塊之前使用一致的空格

{
    "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 檔案告訴 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"]
}

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中的程式碼