團隊程式碼規範 ESLint + Prettier + EditorConfig

佩奇烹飪家發表於2022-01-25
EsLint

image.png

懶人攻略（快速上手使用總結）

沒有時間深入瞭解？6步快速帶你配置團隊程式碼規範，抄作業還不快樂嗎！

  1. 分別安裝VSCode外掛：Prettier、ESLint、EditorConfig;

  2. 拉取最新程式碼，執行npm install ，自動本地下載 eslint、eslint-config-prettier、babel-eslint、prettier、eslint-config-prettier 等依賴；

    npm install eslint eslint-config-prettier babel-eslint prettier eslint-config-prettier --save-dev
  3. 按需新增 .prettierrc 、.stylelintrc、.editorconfig等配置檔案來規範團隊程式碼，具體配置可酌情參考文末推薦配置。
  4. 安裝 Pre-commit Hook: npx mrm lint-staged
  5. 執行 git commit 後 ESLint 會進行格式檢查並自動修復，對於不能自動修復的語法會進行警告並阻止 commit；

  6. 在package.json中新增命令，使用npm run lint檢查語法和格式，使用npm run lint —fix對語法和格式進行修復

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

全文結束!（手動滑稽.png）

ESLint

ESLint 是什麼

是一個開源的 JavaScript 的 linting 工具，使用 espree 將 JavaScript 程式碼解析成抽象語法樹 (AST)，然後通過AST 來分析我們程式碼，從而給予我們兩種提示：

  1. 程式碼質量問題：使用方式有可能有問題(problematic patterns)
  2. 程式碼風格問題：風格不符合一定規則 (doesn’t adhere to certain style guidelines)
    官方文件：ESLint - 外掛化的 JavaScript 程式碼檢測工具 - ESLint中文文件

先決條件

  • Node.js (>=6.14)；
  • npm version 3+。

使用

安裝 ESLint

npm install eslint —save-dev

安裝 babel-eslint

npm install babel-eslint --save-dev

安裝 eslint-config-prettier

npm install eslint-config-prettier --save-dev

確保 ESLint 配置不會與 Prettier 配置衝突。安裝後會自動關閉ESLint非必要以及與 Prettier 衝突的規則；

初始化 ESLint 配置檔案

使用 eslint --init 開始建立一個 ESLint 配置檔案

錯誤等級

  • “off” or 0 - 關閉規則
  • “warn” or 1 - 將規則視為一個警告（不會影響退出碼）
  • “error” or 2 - 將規則視為一個錯誤 (退出碼為1)

官方推薦規則

配置說明

  • Environments - 指定指令碼的執行環境。每種環境都有一組特定的預定義全域性變數。
  • Globals - 指令碼在執行期間訪問的額外的全域性變數。
  • Rules - 啟用的規則及其各自的錯誤級別。
  • plugins - 第三方外掛
  • Extends - 繼承
  • Parser - 解析器，ESLint 預設使用 Espree 作為其解析器。
  • parserOptions — 常用於設定語法解析器的一些配置。

忽略ESLint

新增 .eslintignore 檔案，你可以通過在專案根目錄建立一個 .eslintignore 檔案告訴 ESLint 去忽略特定的檔案和目錄
.eslintignore 檔案是一個純文字檔案，其中的每一行都是一個 glob 模式表明哪些路徑應該忽略檢測。例如，以下將忽略所有的 JavaScript 檔案：

**/*.js

檔案中取消 ESLint 常用註釋

/* eslint-disable */ —- 禁用全部規則 放在檔案頂部則整個檔案範圍都不檢查 
/* eslint-disable no-alert, no-console */ -— 禁用某些規則 
// eslint-disable-line -— 當前行上禁用規則 
// eslint-disable-next-line —- 下一行上禁用規則

常用命令列

檢視所有命令列選項：eslint -h

自動修復問題：eslint —-fix

禁用使用.eslintrc中的配置：eslint -—no-eslintrc

對單個檔案或檔案目錄進行格式化：eslint [options] [file|dir|glob]*

使用指定目錄中的其他規則：eslant —-rulesdir [path::String]

只報告錯誤，預設false：eslint —-quiet

只檢查有改動的檔案，預設false：eslint -—cache

明確格式化報告的輸出檔案：eslint -o, —output-file path::String

Prettier

Prettier 是什麼

官方文件：Prettier
上面我們說到，ESLint 主要解決了兩類問題，但其實 ESLint 主要解決的是程式碼質量問題。另外一類程式碼風格問題其實 ESLint 並沒有完全做完，因為這些問題”沒那麼重要”，程式碼質量出問題意味著程式有潛在 Bug，而風格問題充其量也只是看著不爽。
這時候就出現了 Prettier，Prettier 聲稱自己是一個有主見 (偏見) 的程式碼格式化工具 (opinionated code formatter)，Prettier 認為格式很重要，所以相當於 Prettier 接管了兩個問題其中的程式碼格式的問題，而使用 Prettier + ESLint 就完全解決了兩個問題。

image.png

使用

安裝 prettier

npm install —save-dev —save-exact prettier

安裝 eslint-config-prettier

npm install —save-dev eslint-config-prettier

確保 ESLint 配置不會與 Prettier 配置衝突。安裝後會自動關閉ESLint非必要以及與 Prettier 衝突的規則；

安裝 lint-staged

npx mrm lint-staged

將Prettier與預提交工具結合使用。這可以在提交之前通過git add重新格式化標記為“staged”的檔案。在安裝之前，請確保Prettier已安裝並位於devDependencies中。

其他方案詳見 https://prettier.io/docs/en/p...

忽略 Prettier

使用.prettierignore檔案完全忽略（即不重新格式化）某些檔案和資料夾。

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

總結

  • 在你的編輯器中安裝正確版本的 Prettier 外掛，確保團隊中每個人安裝的版本是一致的；
  • 在專案中本地安裝正確版本的 Prettier 依賴，確保團隊中每個人安裝的版本是一致的；
  • 新增一個 .prettierrc.json 配置檔案去告訴編輯器你正在使用 Prettier；
  • 新增一個 .prettierignore 配置檔案告訴你的編輯器哪些檔案不需要格式化；
  • 通過執行 npx prettier —write . 去格式化整個專案的檔案；
  • 通過執行 npx prettier —check . 檢查每個專案檔案的格式規範；
  • 使用 eslint-config-prettier 確保 ESLint 和 Prettier 能夠完美協作；
  • 設定 pre-commit 鉤子確保每一次提交的程式碼都是經過格式化的。

EditorConfig

EditorConfig 是什麼

官方文件：EditorConfig
主要用於維護多個編輯器和 IDE 從事同一專案的多個開發人員的一致編碼風格。EditorConfig 專案包括一個用於定義編碼樣式的檔案格式和一個文字編輯器外掛集合，這些文字編輯器外掛使編輯器可以讀取檔案格式並遵循定義的樣式。
EditorConfig 和 ESLint 側重點不同，EditorConfig 更偏向於程式碼風格，定義和維護一致的編碼風格。ESLint 側重於檢查 Javascript 程式設計語法錯誤，二者並不衝突，同時配合使用可以使程式碼風格更加優雅。

推薦配置

editorConfig配置：.editorConfig檔案

# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
# 適用範圍：跨編輯器和IDE編寫程式碼，保持一致的簡單編碼風格

# special property that should be specified at the top of the file outside of any sections. Set to true to stop .editorconfig files search on current file.
root = true 

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf # set to lf, cr, or crlf to control how line breaks are represented.
insert_final_newline = true # set to true to ensure file ends with a newline when saving and false to ensure it doesn't.

# Indentation override for all JS under lib directory
[**.{js,vue,ts}]
charset = utf-8 # set to latin1, utf-8, utf-8-bom, utf-16be or utf-16le to control the character set.
indent_style = space # set to tab or space to use hard tabs or soft tabs respectively.
indent_size = 4 # use 4 spaces instead of tabs;
trim_trailing_whitespace = true # remove trailing white space characters when saving

[*.md]
trim_trailing_whitespace = false

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 4

Prettier配置 ：.prettierrc檔案

{
    "singleQuote": true,
    "semi": true,
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "printWidth": 200,
    "proseWrap": "never",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "tabWidth": 4,
    "trailingComma": "none",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
}

ESLint配置： .eslintrc.js檔案

module.exports = {
    env: {
        es6: true,
        browser: true,
        node: true,
        commonjs: true,
        amd: true
    },
    extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:prettier/recommended'],
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
        parser: 'babel-eslint'
    },
    plugins: ['vue', 'prettier'],
    rules: {
        'prettier/prettier': 'error',
        indent: ['error', 4],
        'linebreak-style': ['error', 'unix'],
        quotes: ['error', 'single'],
        semi: ['error', 'always']
    }
};

VSCode 編輯器擴充外掛

  1. Prettier - Code formatter - Visual Studio Marketplace

    VSCode中 Prettier - Code formatter 外掛設定詳細教程：GitHub - prettier/prettier-vscode: Visual Studio Code extension for Prettier
  2. Vetur - Visual Studio Marketplace
  3. ESLint - Visual Studio Marketplace
  4. EditorConfig for VS Code - Visual Studio Marketplace

參考文獻

搞懂 ESLint 和 Prettier - 知乎

我是佩奇烹飪家，現居上海，一隻勤勞的前端攻城獅，愛專研，愛技術，愛分享。
個人筆記，整理不易，再次感謝 閱讀 、點贊、收藏 和 關注 ！
文章有任何問題歡迎大家留言指出，也歡迎大家一起交流學習！

相關文章