VSCode + ESLint + Prettier 代碼語法檢查和格式化

前言

在我們做項目的時候，特別是團隊協作時，每個人的編碼風格和編碼方式都不一樣，這樣在同一個項目中看起來會比較亂，特別是如果每個人在修改代碼時都按自己的規則做一下格式化，那麼提交記錄也會很亂，導致後面查問題也不好查。爲此，同一項目或同一團隊有必要保持一個統一的編碼規範。這類介紹一下如何在 vscode 中通過 eslint + prettier 來對代碼進行語法檢查和風格統一。目前我們的項目主要是 tsx 爲主，接下來的配置說明也將以 tsx 爲主。

配置 ESLint

常用配置

eslint 主要用於語法檢查，而 prettier 主要用於代碼風格，爲了避免 eslint 中包含的代碼風格檢查與 prettier 衝突，應該將代碼風格檢查交給 prettier，而 eslint 只專注於語法檢查。並且 eslint 的語法檢查規則每個人想法也不一樣，這裏博主推薦 AlloyTeam 團隊的 eslint-config-alloy，它已經爲我們提供了一套完善的配置規則，並且與 Prettier 是完全兼容的（eslint-config-alloy 不包含任何代碼格式的規則，代碼格式的問題交給更專業的 Prettier 去處理）。

首先安裝對應的 node_modules

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-alloy

然後在項目根目錄下創建一個.eslintrc.js文件，文件內容如下：

module.exports = {
  extends: ["alloy", "alloy/react", "alloy/typescript"],
  env: {
    // Your environments (which contains several predefined global variables)
    //
    browser: true,
    node: true,
    mocha: true,
    jest: true
    // jquery: true
  },
  globals: {
    // Your global variables (setting to false means it's not allowed to be reassigned)
    //
    // myGlobal: false
  },
  rules: {
    // Customize your rules
    // "@typescript-eslint/explicit-member-accessibility": 0,
    // "@typescript-eslint/explicit-function-return-type": 0
  },
  settings: {
    react: {
      pragma: "React",
      version: "detect"
    }
  }
};

eslint-plugin-react的插件配置的 settings 中沒有指定具體的 React 版本，所以運行時會有提示信息：

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .

所以在.eslintrc.js加上配置，指定自動檢測選擇當前安裝的版本：

react: {
    pragma: 'React',
    version: 'detect'
}

至此，我們在 package.json 中加上對應的運行腳本即可對對應文件進行語法檢查和語法修復

{
    "scripts": {
        "eslint": "eslint src --ext .ts,tsx --fix"
    }
}

如果我們需要指定 eslint 語法檢查時忽略某些文件，可以在根目錄下新建文件.eslintignore，在該配置文件裏配置不需要檢查的文件，配置規則與我們常用的.gitignore類似。

在 VSCode 中集成 ESLint 檢查

在編輯器中集成 ESLint 檢查，可以在開發過程中就發現錯誤，甚至可以在保存時自動修復錯誤，極大的增加了開發效率。

要在 VSCode 中集成 ESLint 檢查，我們需要先安裝 ESLint 插件，點擊「擴展」按鈕，搜索 ESLint，然後安裝即可。

VSCode 中的 ESLint 插件默認是不會檢查 .ts 和 .tsx 後綴的，需要在項目根目錄下創建一個配置文件 .vscode/settings.json，添加以下配置：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

這樣，在你保存文件的時候就可以自動檢查並修復不符合語法規則的問題。

配置 Prettier

常用配置

Prettier 聚焦於代碼的格式化，通過語法分析，重新整理代碼的格式，讓所有人的代碼都保持同樣的風格。

首先需要安裝 Prettier：

npm install --save-dev prettier

然後創建一個 prettier.config.js 文件，裏面包含 Prettier 的配置項。Prettier 的配置項很少，這裏我推薦大家一個配置規則，作爲參考：

// prettier.config.js or .prettierrc.js
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 4 個空格縮進
  tabWidth: 4,
  // 不使用縮進符，而使用空格
  useTabs: false,
  // 行尾需要有分號
  semi: true,
  // 使用單引號
  singleQuote: true,
  // 對象的 key 僅在必要時用引號
  quoteProps: "as-needed",
  // jsx 不使用單引號，而使用雙引號
  jsxSingleQuote: false,
  // 末尾不需要逗號
  trailingComma: "none",
  // 大括號內的首尾需要空格
  bracketSpacing: true,
  // jsx 標籤的反尖括號需要換行
  jsxBracketSameLine: false,
  // 箭頭函數，只有一個參數的時候，也需要括號
  arrowParens: "always",
  // 每個文件格式化的範圍是文件的全部內容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要寫文件開頭的 @prettier
  requirePragma: false,
  // 不需要自動在文件開頭插入 @prettier
  insertPragma: false,
  // 使用默認的折行標準
  proseWrap: "preserve",
  // 根據顯示樣式決定 html 要不要折行
  htmlWhitespaceSensitivity: "css",
  // 換行符使用 lf
  endOfLine: "lf"
};

然後在 package.json 中加上對應的運行腳本即可對對應文件進行代碼的格式化

{
    "scripts": {
        "pretty": "prettier --write src/** --check"
    }
}

同樣，如果我們需要指定 Prettier 格式化時忽略某些文件，可以在根目錄下新建文件.prettierignore，在該配置文件裏配置不需要格式化的文件，配置規則與我們常用的.gitignore類似。

在 VSCode 中集成 Prettier 檢查

安裝 VSCode 中的 Prettier 插件

然後修改 .vscode/settings.json：

{
  "files.eol": "\n",
  "editor.tabSize": 4,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

這樣就實現了保存文件時對代碼自動格式化。

參考：

• https://ts.xcatliu.com/engineering/lint