ESLint

ESLint 是一個按照規則給出報告的程式碼檢測工具，使用它可以避免低階錯誤和統一程式碼風格，這對公司團隊開發非常實用。

安裝

1.全域性安裝

如果你想使用ESLint適用於你所有的專案，建議全域性安裝ESLint

npm i -g eslint

初始化配置檔案

./node_modules/.bin/eslint --init

2.區域性安裝

單個專案使用

npm i -D eslint

初始化配置檔案

eslint --inint

3.安裝步驟

至此，安裝完成。

配置

指定執行環境

"env": {
    browser: true
 
,
    node: true,
},

指定全域性變數

• 使用註釋來配置

/* global __DEV__, fetch */
/* global __DEV__:true, fetch:true */

• 使用配置檔案來配置

"globals": {
    "__DEV__": true,
    "fetch": true
  },

規則

規則等級有三種：

• “off”或者0： 關閉規則
• “warn”或者1： 開啟規則，作為警告。
• “error”或者2： 開啟規則，作為錯誤。

例如：

• 使用註釋來配置

/* eslint no-console: "off"
 
, no-undef: "error" */
/* eslint no-console: 0, no-undef: 2 */

• 使用配置檔案來配置

"rules": {
    "no-console": "off",
    "no-undef": "off",
    "no-useless-constructor": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true,
        "optionalDependencies": false
 
,
        "peerDependencies": false
      }
    ],
    "react/jsx-filename-extension": "off"
  }

當然，也可以在註釋中關閉規則

/* eslint-disable */
/* eslint-enable */

/* eslint-disable no-alert, no-console */
/* eslint-enable no-alert, no-console */

使用方法

在package.json檔案中加入以下程式碼

"scripts": {
    "lint": "eslint --ext .js ./src --fix",
}

命令列工具下執行yarn run lint, 即會檢測程式碼。

Prettier

Prettier是程式碼格式化工具，能夠統一個人或者團隊的程式碼風格。

安裝

npm i -D prettier

配置

在工程根目錄下建立.prettierrc.js檔案，

module.exports = {
  printWidth: 120, // 換行字串閾值
  semi: true, // 句末加分號
  singleQuote: true, // 用單引號
  trailingComma: 'none', // 最後一個物件元素加逗號
  bracketSpacing: true, // 物件，陣列加空格
  jsxBracketSameLine: false, // jsx > 是否另起一行
  arrowParens: 'avoid', // (x) => {} 是否要有小括號
  requirePragma: false, // 是否要註釋來決定是否格式化程式碼
  proseWrap: 'preserve' // 是否要換行
};

外掛

npm i -D eslint eslint-config-prettier eslint-plugin-prettier

結合.eslintrc.json配置

"extends": ["airbnb", "prettier", "plugin:prettier/recommended"],
"plugins": ["react", "prettier"],

使用方法

在package.json檔案中加入以下程式碼

"scripts": {
  "prettier": "prettier --write src/**/*.js"
}

在命令列工具下執行 prettier --write src/**/*.js, src對應的是你資料夾

Pre-commit Hook

Pre-commit Hook是在Git提交之前用來檢查待提交程式碼是否有錯誤的工具。

安裝

npm i -D husky lint-staged pretty-quick

配置

在package.json檔案中加入以下程式碼

 "scripts": {
    "precommit": "pretty-quick --staged",
  },
  "lint-staged": {
    "*.{js,json,md}": [
      "prettier --write",
      "git add"
    ],
    "*.js": [
      "yarn lint --fix",
      "git add"
    ]
  },

使用

使用Git提交程式碼的時候，會自動檢測程式碼並進行格式化，如何有錯誤會終止push

VSCode

• 安裝ESLint Prettier外掛
• 在設定中新增

"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true

當你儲存時會自動修復一些空格縮排、單雙引號及句末是否加;的錯誤，但是你變數未宣告等錯誤需要手動去修復。

效果圖

寫在最後

剛開始使用ESLint的時候，你可能會遇到各種各樣的紅色波浪線錯誤。不要覺得莫名其妙，這說明你的程式碼規範有很多值得去補充修正的地方，好好去弄明白eslint中的規則，形成良好的程式碼風格，這不管是對個人還是團隊而言都是值得使用的。

附上Demo，感興趣的可以看一看。