【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 約束和統一前端程式碼規範

前言

本文介紹 vue3-element-admin 如何通過ESLint 檢測 JS/TS 程式碼、Prettier 格式化程式碼、Stylelint 檢測 CSS/SCSS 程式碼和設定 EditorConfig 來全方位約束和統一前端程式碼規範。

ESLint 程式碼檢測

ESLint 可組裝的JavaScript和JSX檢查工具，目標是保證程式碼的一致性和避免錯誤。

ESLint 安裝

安裝 ESLint 外掛

VSCode 外掛市場搜尋 ESLint 外掛並安裝

安裝 ESLint 依賴

npm i -D eslint

ESLint 設定

ESLint 設定(.eslintrc.cjs)

執行命令完成 ESLint 設定初始化

npx eslint --init

根目錄自動生成的 .eslintrc.cjs 設定內容如下：

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {},
};

ESLint 解析器設定

在預設設定基礎上需要修改解析器為 vue-eslint-parser ，不然在檢測執行中出現 error Parsing error: '>' expected 的解析錯誤，修改 .eslintrc.cjs 如下：

ESLint 忽略設定(.eslintignore)

根目錄新建 .eslintignore 檔案，新增忽略檔案， ESLint 校驗會忽略這些檔案，設定如下：

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets

.eslintrc.cjs
.prettierrc.cjs
.stylelintrc.cjs

ESLint 檢測指令

package.json 新增 eslint 檢測指令：

  "scripts": {
    "lint:eslint": "eslint \"src/**/*.{vue,ts,js}\" --fix"
  }

ESLint 檢測

ESLint 檢測 & 驗證

執行命令進行ESLint檢測：

npm run lint:eslint

ESLint 儲存自動檢測

開啟 File → Preferences → Settings 搜尋 Editor: Code Actions On Save 選擇 Workspace標籤設定工作區，點選 Edit in settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 開啟eslint自動檢測
  }
}

Prettier 程式碼格式化

Prettier 一個「有態度」的程式碼格式化工具。

Prettier 安裝

安裝 Prettier 外掛

VSCode 外掛市場搜尋 Prettier - Code formatter 外掛安裝

安裝 Prettier 依賴

npm install -D prettier

Prettier 設定

Prettier 設定 (.prettierrc.cjs)

根目錄建立.prettierrc.cjs 檔案，複製 官方預設設定 （詳細設定：Prettier 中文網 - Options）

module.exports = {
  // (x)=>{},單個引數箭頭函數是否顯示小括號。(always:始終顯示;avoid:省略括號。預設:always)
  arrowParens: "always",
  // 開始標籤的右尖括號是否跟隨在最後一行屬性末尾，預設false
  bracketSameLine: false,
  // 物件字面量的括號之間列印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
  bracketSpacing: true,
  // 是否格式化一些檔案中被嵌入的程式碼片段的風格(auto|off;預設auto)
  embeddedLanguageFormatting: "auto",
  // 指定 HTML 檔案的空格敏感度 (css|strict|ignore;預設css)
  htmlWhitespaceSensitivity: "css",
  // 當檔案已經被 Prettier 格式化之後，是否會在檔案頂部插入一個特殊的 @format 標記，預設false
  insertPragma: false,
  // 在 JSX 中使用單引號替代雙引號，預設false
  jsxSingleQuote: false,
  // 每行最多字元數量，超出換行(預設80)
  printWidth: 120,
  // 超出列印寬度 (always | never | preserve )
  proseWrap: "preserve",
  // 物件屬性是否使用引號(as-needed | consistent | preserve;預設as-needed:物件的屬性需要加引號才新增;)
  quoteProps: "as-needed",
  // 是否只格式化在檔案頂部包含特定註釋(@prettier| @format)的檔案，預設false
  requirePragma: false,
  // 結尾新增分號
  semi: true,
  // 使用單引號 (true:單引號;false:雙引號)
  singleQuote: false,
  // 縮排空格數，預設2個空格
  tabWidth: 2,
  // 元素末尾是否加逗號，預設es5: ES5中的 objects, arrays 等會新增逗號，TypeScript 中的 type 後不加逗號
  trailingComma: "es5",
  // 指定縮排方式，空格或tab，預設false，即使用空格
  useTabs: false,
  // vue 檔案中是否縮排 <style> 和 <script> 標籤，預設 false
  vueIndentScriptAndStyle: false,
};

格式化忽略設定( .prettierignore)

根目錄新建 .prettierignore 檔案，新增忽略設定如下：

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets

prettier 格式化指令

package.json 新增 prettier 格式化指令：

  "scripts": {
    "lint:prettier": "prettier --write \"**/*.{js,ts,json,css,less,scss,vue,html,md}\""
  }

Prettier 格式化

Prettier 格式化 & 驗證

執行命令進行 Prettier 程式碼格式化：

npm run lint:prettier

Prettier 儲存自動格式化

VSCode 的 settings.json 設定:

{
  "editor.formatOnSave": true, // 儲存格式化檔案
  "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定 prettier 為所有檔案預設格式化器
}

驗證儲存自動格式化

Stylelint CSS 檢測

Stylelint 一個強大的 CSS linter(檢查器)，可幫助您避免錯誤並強制執行約定。官方網站： https://stylelint.io

注意官網明確指出 Stylelint 作為 CSS 程式碼規範檢測而不作為程式碼格式化工具使用（Prettier 是更好的選擇），新版本(15.0.0)為此廢棄相關的 rules

Stylelint 安裝

安裝 Stylelint 外掛

VSCode 外掛搜尋 Stylelint 並安裝

安裝 Stylelint 依賴

pnpm install -D stylelint stylelint-config-standard stylelint-config-recommended-scss stylelint-config-recommended-vue postcss postcss-html postcss-scss stylelint-config-recess-order stylelint-config-html

依賴	說明	備註
stylelint	stylelint 核心庫	stylelint
stylelint-config-standard	Stylelint 標準共用設定	stylelint-config-standard 檔案
stylelint-config-recommended-scss	擴充套件 stylelint-config-recommended 共用設定併為 SCSS 設定其規則	stylelint-config-recommended-scss 檔案
stylelint-config-recommended-vue	擴充套件 stylelint-config-recommended 共用設定併為 Vue 設定其規則	stylelint-config-recommended-vue 檔案
stylelint-config-recess-order	提供優化樣式順序的設定	CSS 書寫順序規範
stylelint-config-html	共用 HTML (類似 HTML) 設定，捆綁 postcss-html 並對其進行設定	stylelint-config-html 檔案
postcss-html	解析 HTML (類似 HTML) 的 PostCSS 語法	postcss-html 檔案
postcss-scss	PostCSS 的 SCSS 解析器	postcss-scss 檔案，支援 CSS 行類註釋

Stylelint 設定

Stylelint 設定(.stylelintrc.cjs)

根目錄新建 .stylelintrc.cjs 檔案，設定如下：

module.exports = {
  // 繼承推薦規範設定
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recommended-scss",
    "stylelint-config-recommended-vue/scss",
    "stylelint-config-html/vue",
    "stylelint-config-recess-order",
  ],
  // 指定不同檔案對應的解析器
  overrides: [
    {
      files: ["**/*.{vue,html}"],
      customSyntax: "postcss-html",
    },
    {
      files: ["**/*.{css,scss}"],
      customSyntax: "postcss-scss",
    },
  ],
  // 自定義規則
  rules: {
    // 允許 global 、export 、v-deep等偽類
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global", "export","v-deep", "deep"],
      },
    ],
  },
};

Stylelint 忽略設定(.stylelintignore)

根目錄建立 .stylelintignore 檔案，設定忽略檔案如下：

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets

Stylelint 檢測指令

package.json 新增 Stylelint 檢測指令：

  "scripts": {
      "lint:stylelint": "stylelint  \"**/*.{css,scss,vue,html}\" --fix"
  }

Stylelint 檢測

Stylelint 檢測 & 驗證

執行以下命令完成

npm run lint:stylelint

驗證

StyleLint 儲存自動檢測

VSCode 的 settings.json 設定內容如下:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true // 開啟 Stylelint 儲存自動檢測
  },
  // Stylelint 校驗檔案
  "stylelint.validate": ["css", "scss", "vue", "html"]
}

為了驗證把尺寸屬性 width 放置在定位屬性 position 前面，根據 CSS 書寫順序規範 推斷是不符合規範的，在儲存時 Stylelint 自動將屬性重新排序，達到預期。

EditorConfig 編輯器設定

EditorConfig 主要用於統一不同 IDE 編輯器的編碼風格。官方網站: https://editorconfig.org/

安裝 EditorConfig 外掛

VSCode 搜尋 EditorConfig for VS Code 外掛並安裝

設定 EditorConfig

根目錄建立 .editorconfig 檔案，新增設定如下：

# http://editorconfig.org
root = true

# 表示所有檔案適用
[*]
charset = utf-8 # 設定檔案字元集為 utf-8
end_of_line = lf # 控制換行型別(lf | cr | crlf)
indent_style = tab # 縮排風格（tab | space）
insert_final_newline = true # 始終在檔案末尾插入一個新行

# 表示僅 md 檔案適用以下規則
[*.md]
max_line_length = off # 關閉最大行長度限制
trim_trailing_whitespace = false # 關閉末尾空格修剪

專案原始碼

完整專案原始碼地址如下，如果有相關問題可以通過專案 關於我們 新增交流群。

	Gitee	Github
倉庫地址	vue3-element-admin	vue3-element-admin

關於我們

如果交流群二維條碼過期，請新增我的微信備註 vue3 拉你進群

微信交流群	我的微信