🚀 作者主頁： 有來技術
🔥 開源項目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template
🌺 倉庫主頁： GitCode︱ Gitee ︱ Github
💖 歡迎點贊 👍 收藏 ?評論 📝 如有錯誤敬請糾正！
目錄
- 前言
- 集成 ESLint
- 安裝插件
- 配置 ESLint
- 快速初始化
- 定制化配置
- 添加 ESLint 運行腳本
- 測試 ESLint
- 集成 Prettier
- 安裝插件
- 安裝依賴
- 配置 Prettier
- 配置忽略文件
- 添加格式化腳本
- 保存自動格式化
- 測試 Prettier
- 集成 Stylelint
- 安裝插件
- 安裝依賴
- 配置 Stylelint
- 配置忽略文件
- 添加 Stylelint 腳本
- 保存自動修復
- 測試 Stylelint
- 結語
前言
本指南以開源項目 vue3-element-admin 的 Vue3 + TypeScript 技術棧為基礎，提供 2025 年前端開發中 ESLint V9、Prettier 和 Stylelint 的最新配置與最佳實踐，幫助開發者快速集成工具，提升團隊協作效率和代碼質量。
集成 ESLint
ESLint 是一款 JavaScript 和 TypeScript 的代碼規范工具，能夠幫助開發團隊保持代碼風格一致并減少常見錯誤。
ESLint 中文網：https://eslint.nodejs.cn/
安裝插件
VSCode 插件市場搜索 ESLint 插件并安裝
配置 ESLint
快速初始化
按照 ESLint 官方指南，可以使用以下命令快速生成 ESLint 配置文件：
npm init @eslint/config@latest
運行該命令后，ESLint 將通過交互式問答的方式，幫助安裝相關依賴并生成默認配置文件 eslint.config.js。
默認生成的配置如下：
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";/** @type {import('eslint').Linter.Config[]} */
export default [{files: ["**/*.{js,mjs,cjs,ts,vue}"]},{languageOptions: { globals: globals.browser }},pluginJs.configs.recommended,...tseslint.configs.recommended,...pluginVue.configs["flat/essential"],{files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];
定制化配置
由于項目使用了 Vue 3 和 TypeScript，我們需要在默認配置的基礎上進行調整，以適配當前項目。首先，安裝必要的 ESLint 依賴：
pnpm add -D eslint-plugin-vue vue-eslint-parser eslint-config-prettier eslint-plugin-prettier
| 依賴 | 作用 |
|---|---|
| eslint-plugin-vue | 提供 Vue 相關的 ESLint 規則 |
| vue-eslint-parser | 解析 .vue 文件 |
| eslint-config-prettier | 關閉與 Prettier 沖突的 ESLint 規則 |
| eslint-plugin-prettier | 將 Prettier 作為 ESLint 規則進行檢測 |
以下是優化后的 eslint.config.js 配置，涵蓋了 JavaScript、TypeScript 和 Vue 代碼的檢查規則，并集成了 Prettier 進行代碼格式化。
// https://eslint.nodejs.cn/docs/latest/use/configure/configuration-filesimport globals from "globals";
import pluginJs from "@eslint/js"; // JavaScript 規則
import pluginVue from "eslint-plugin-vue"; // Vue 規則
import pluginTypeScript from "@typescript-eslint/eslint-plugin"; // TypeScript 規則import parserVue from "vue-eslint-parser"; // Vue 解析器
import parserTypeScript from "@typescript-eslint/parser"; // TypeScript 解析器import configPrettier from "eslint-config-prettier"; // 禁用與 Prettier 沖突的規則
import pluginPrettier from "eslint-plugin-prettier"; // 運行 Prettier 規則/** @type {import('eslint').Linter.Config[]} */
export default [// 指定檢查文件和忽略文件{files: ["**/*.{js,mjs,cjs,ts,vue}"],ignores: ["**/*.d.ts"],},// 全局配置{languageOptions: {globals: {...globals.browser,...globals.node// 添加自定義的類型// PageQuery: "readonly"},},plugins: { prettier: pluginPrettier },rules: {...configPrettier.rules, // 關閉與 Prettier 沖突的規則...pluginPrettier.configs.recommended.rules, // 啟用 Prettier 規則"prettier/prettier": "error", // 強制 Prettier 格式化"no-unused-vars": ["error",{argsIgnorePattern: "^_", // 忽略以 _ 開頭的變量未使用警告varsIgnorePattern: "^[A-Z0-9_]+$", // 忽略變量名為大寫字母、數字或下劃線組合的未使用警告（枚舉定義未使用場景）ignoreRestSiblings: true, // 忽略解構賦值中同級未使用變量的警告},],},},// JavaScript 配置pluginJs.configs.recommended,// TypeScript 配置{files: ["**/*.ts"],ignores: ["**/*.d.ts"], // 排除d.ts文件languageOptions: {parser: parserTypeScript,parserOptions: {sourceType: "module",},},plugins: { "@typescript-eslint": pluginTypeScript },rules: {...pluginTypeScript.configs.strict.rules, // TypeScript 嚴格規則"@typescript-eslint/no-explicit-any": "off", // 允許使用 any"@typescript-eslint/no-empty-function": "off", // 允許空函數"@typescript-eslint/no-empty-object-type": "off", // 允許空對象類型},},// Vue 配置{files: ["**/*.vue"],languageOptions: {parser: parserVue,parserOptions: {parser: parserTypeScript,sourceType: "module",},},plugins: { vue: pluginVue, "@typescript-eslint": pluginTypeScript },processor: pluginVue.processors[".vue"],rules: {...pluginVue.configs["vue3-recommended"].rules, // Vue 3 推薦規則"vue/no-v-html": "off", // 允許 v-html"vue/multi-word-component-names": "off", // 允許單個單詞組件名},},
];
添加 ESLint 運行腳本
為了方便使用 ESLint，我們可以在 package.json 中添加 lint 腳本：
{"scripts": {"lint:eslint": "eslint --cache \"src/**/*.{vue,ts}\" --fix",}
}
該命令會自動修復符合 ESLint 規則的代碼問題，并輸出檢查結果。
測試 ESLint
在 App.vue 文件中添加一個未使用的變量，并運行以下命令：
pnpm run lint:eslint
集成 Prettier
Prettier 是一個代碼格式化工具，能夠和 ESLint 配合使用，確保代碼風格統一。
prettier 中文網：https://prettier.nodejs.cn/
安裝插件
VSCode 插件市場搜索 Prettier - Code formatter 插件安裝
安裝依賴
pnpm install -D prettier eslint-config-prettier eslint-plugin-prettier
- prettier：主要的 Prettier 格式化庫。
- eslint-config-prettier：禁用 ESLint 中與 Prettier 沖突的規則。
- eslint-plugin-prettier：將 Prettier 的規則作為 ESLint 的規則來運行。
配置 Prettier
參考 Prettier 官方配置文檔 在項目根目錄下新建配置文件 .prettierrc.yaml，用于定義代碼格式化規則。我們選擇 YAML 格式，原因如下：
- JSON 文件不支持注釋，不利于配置的說明和維護。
- JS 文件在某些情況下配置可能不生效（例如，測試發現
printWidth: 100仍會按默認值 80 換行），可能是優先級問題，建議進一步驗證。
以下是推薦的基礎配置，供參考使用：
# 每行最多字符數量，超出換行(默認80)
printWidth: 100
# 縮進空格數，默認2個空格
tabWidth: 2
# 指定縮進方式，空格或tab，默認false，即使用空格
useTabs: false
# 使用分號
semi: true
# 使用單引號 (true:單引號;false:雙引號)
singleQuote: false
# 末尾使用逗號
trailingComma: all
配置忽略文件
項目根目錄新建 .prettierignore 文件指定 Prettier 不需要格式化的文件和文件夾
# .prettierignore
node_modules
dist
public
*.min.js
添加格式化腳本
在 package.json 文件中添加：
{"scripts": {"lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,css,scss,vue,html,md}\""}
}
保存自動格式化
打開 VSCode 的 File → Preferences → Settings，然后選擇 Open Settings (JSON)，添加以下配置
{"editor.formatOnSave": true, // 保存格式化文件"editor.defaultFormatter": "esbenp.prettier-vscode" // 指定 prettier 為所有文件默認格式化器
}
測試 Prettier
下圖演示了保存時的自動格式化效果，展示了代碼中引號和換行的自動調整：
集成 Stylelint
Stylelint 一個強大的 CSS linter(檢查器)，可幫助您避免錯誤并強制執行約定。
Stylelint 官網：https://stylelint.io/
安裝插件
VSCode 插件搜索 Stylelint 并安裝
安裝依賴
pnpm install -D postcss postcss-html postcss-scss stylelint stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-recess-order stylelint-config-html stylelint-prettier
| 依賴 | 說明 | 備注 |
|---|---|---|
| postcss | CSS 解析工具，允許使用現代 CSS 語法并將其轉換為兼容的舊語法 | - |
| postcss-html | 解析 HTML (類似 HTML) 的 PostCSS 語法 | 參見 postcss-html 文檔 |
| postcss-scss | PostCSS 的 SCSS 解析器 | 參見 postcss-scss 文檔，支持 CSS 行類注釋 |
| stylelint | stylelint 核心庫 | 參見 stylelint |
| stylelint-config-recommended | 提供了基礎的 Stylelint 配置，適用于大多數項目，允許自定義規則集 | 與 stylelint-config-standard 相比，此配置提供了更多的靈活性 |
| stylelint-config-recommended-scss | 擴展基礎配置，為 SCSS 特定規則提供支持 | 參見 stylelint-config-recommended-scss 文檔 |
| stylelint-config-recommended-vue | 擴展基礎配置，為 Vue 文件中的樣式提供支持 | 參見 stylelint-config-recommended-vue 文檔 |
| stylelint-config-recess-order | 提供優化樣式順序的配置 | 參見 CSS 書寫順序規范 |
| stylelint-config-html | 為 HTML (類似 HTML) 文件提供共享配置 | 參見 stylelint-config-html 文檔 |
| stylelint-prettier | 統一代碼風格，格式沖突時以 Prettier 規則為準 | 參見 stylelint-prettier |
其中選擇 stylelint-config-recommended 替代 stylelint-config-standard 的原因在于它不僅提供了靈活性，還更加輕量。stylelint-config-recommended 默認包含的規則較少，避免了 stylelint-config-standard 中可能不需要的規則，這樣可以減少配置的復雜度，提高項目的啟動速度，同時讓開發者能夠集中關注對項目真正重要的風格指南。輕量配置有助于簡化工作流程，特別是在大型或復雜的項目中。
配置 Stylelint
根目錄新建 .stylelintrc.cjs 文件，配置如下：
{"extends": ["stylelint-config-recommended","stylelint-config-recommended-scss","stylelint-config-recommended-vue/scss","stylelint-config-html/vue","stylelint-config-recess-order"],"plugins": ["stylelint-prettier"],"overrides": [{"files": ["**/*.{vue,html}"],"customSyntax": "postcss-html"},{"files": ["**/*.{css,scss}"],"customSyntax": "postcss-scss"}],"rules": {"import-notation": "string","selector-class-pattern": null,"custom-property-pattern": null,"keyframes-name-pattern": null,"no-descending-specificity": null,"no-empty-source": null,"selector-pseudo-class-no-unknown": [true,{"ignorePseudoClasses": ["global", "export", "deep"]}],"unit-no-unknown": [true, {"ignoreUnits": ["rpx"]}] "property-no-unknown": [true,{"ignoreProperties": []}],"at-rule-no-unknown": [true,{"ignoreAtRules": ["apply", "use", "forward"]}]}
}
配置忽略文件
根目錄創建 .stylelintignore 文件，配置忽略文件如下：
*.min.js
dist
public
node_modules
添加 Stylelint 腳本
package.json 添加 Stylelint 檢測指令：
"scripts": {"lint:stylelint": "stylelint \"**/*.{css,scss,vue,html}\" --fix"}
保存自動修復
項目根目錄下.vscode/settings.json 文件添加配置：
{"editor.codeActionsOnSave": {"source.fixAll.stylelint": true },"stylelint.validate": ["css", "scss", "vue", "html"]
}
為了驗證把尺寸屬性 width 放置在定位屬性 position 前面，根據 CSS 書寫順序規范 推斷是不符合規范的，在保存時 Stylelint 自動將屬性重新排序，達到預期。
測試 Stylelint
執行以下命令進行檢測
npm run lint:stylelint
結語
通過集成 ESLint、Prettier 和 Stylelint，您的項目將實現代碼規范與風格的高度統一，提升開發效率和代碼質量。這些工具的結合不僅能夠自動檢測和修復代碼問題，還能確保團隊協作中的一致性，減少溝通成本。隨著項目的迭代，持續優化配置并遵循最佳實踐，將為您的團隊帶來更高效的開發體驗，同時為項目的長期維護打下堅實的基礎。讓我們以規范為基石，以工具為助力，共同打造高質量的代碼！
