Eslint、Prettier、.vscode 配置

首先，三者關(guān)聯(lián)及各自作用

• ESLint 做語(yǔ)法和規(guī)范校驗(yàn)，結(jié)合 Prettier 負(fù)責(zé)格式化。
• .vscode 通過 ESLint 插件自動(dòng)運(yùn)行校驗(yàn)和修復(fù)，保證團(tuán)隊(duì)開發(fā)體驗(yàn)統(tǒng)一。

其次 Eslint、Prettier 的關(guān)聯(lián)

• Prettier 負(fù)責(zé)代碼的排版和格式，保證風(fēng)格統(tǒng)一，省去開發(fā)者爭(zhēng)論格式問題時(shí)間。
• ESLint 負(fù)責(zé)代碼規(guī)范和質(zhì)量，發(fā)現(xiàn)潛在問題和錯(cuò)誤，保持代碼健康。
• 同時(shí)用的話，Prettier 負(fù)責(zé)格式，ESLint 負(fù)責(zé)規(guī)范，兩者互不沖突，搭配更完美。

開發(fā)配置示例

接下來(lái)是一套適合 React + Vite + TypeScript 項(xiàng)目，結(jié)合 ESLint + Prettier + VS Code 的完整配置示例，保證團(tuán)隊(duì)開發(fā)體驗(yàn)統(tǒng)一且規(guī)范。

1. 安裝依賴

npm install --save-dev eslint prettier @eslint/js eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-prettier eslint-config-prettier

// 依賴列表eslint 
prettier
@eslint/js
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-prettier
eslint-config-prettier

2. eslint.config.js

// eslint.config.js// 引入官方推薦的 JS 基礎(chǔ)規(guī)則（等同于 "eslint:recommended"）
import js from '@eslint/js';
// 引入 TypeScript ESLint 插件和解析器（包含推薦規(guī)則）
import tseslint from 'typescript-eslint';
// 引入 React、React Hooks、可訪問性（a11y）相關(guān) ESLint 插件
import pluginReact from 'eslint-plugin-react';
import pluginReactHooks from 'eslint-plugin-react-hooks';
import pluginJsxA11y from 'eslint-plugin-jsx-a11y';
// 引入 prettier 插件（用于讓 ESLint 檢查 Prettier 格式問題）
import pluginPrettier from 'eslint-plugin-prettier';
// 引入 prettier 配置文件，傳入 ESLint 中校驗(yàn) prettier 規(guī)則（可選）
import prettierConfig from './prettier.config.js';/** @type {import("eslint").Linter.FlatConfig[]} */
// Flat Config 是一種基于數(shù)組的配置方式，每個(gè)對(duì)象對(duì)應(yīng)一類文件或規(guī)則
export default [{// 匹配需要被 ESLint 校驗(yàn)的文件files: ['**/*.{js,cjs,mjs,ts,tsx,jsx}'],// 配置解析器和語(yǔ)言環(huán)境languageOptions: {parser: tseslint.parser, // 使用 TypeScript 的解析器parserOptions: {ecmaVersion: 'latest', // 支持最新 ECMAScript 語(yǔ)法sourceType: 'module',  // 支持 ES 模塊ecmaFeatures: {jsx: true, // 支持 JSX},},},// 注冊(cè)使用到的插件plugins: {react: pluginReact,'react-hooks': pluginReactHooks,'jsx-a11y': pluginJsxA11y,prettier: pluginPrettier,},// 合并推薦規(guī)則 + 自定義規(guī)則rules: {// 官方 JS 推薦規(guī)則（比如禁止未定義變量）...js.configs.recommended.rules,// TypeScript 推薦規(guī)則（比如類型注解錯(cuò)誤、any 等）...tseslint.configs.recommended.rules,// React 推薦規(guī)則（比如 prop 校驗(yàn)）...pluginReact.configs.recommended.rules,// 可訪問性規(guī)則（比如圖片缺少 alt 屬性）...pluginJsxA11y.configs.recommended.rules,// React Hooks 推薦規(guī)則（比如 useEffect 必須傳依賴數(shù)組）...pluginReactHooks.configs.recommended.rules,// 啟用 prettier 規(guī)則（會(huì)把 prettier 的格式問題當(dāng)成 ESLint error）'prettier/prettier': ['error', prettierConfig],// 關(guān)閉 React 17+ 中不再需要的規(guī)則（無(wú)需 import React）'react/react-in-jsx-scope': 'off',},// 額外配置插件所需的環(huán)境（如 react 版本自動(dòng)識(shí)別）settings: {react: {version: 'detect',},},},
];

3. prettier.config.js

// prettier.config.js
/** @type {import("prettier").Config} */
export default {// 每行最大長(zhǎng)度（超過就換行）printWidth: 100,// 縮進(jìn)的空格數(shù)（比如 2 表示縮進(jìn)為兩個(gè)空格）tabWidth: 2,// 每行末尾是否加分號(hào)（true 表示加）semi: true,// 使用單引號(hào)代替雙引號(hào)（比如 'hello' 而不是 "hello"）singleQuote: true,// 多行對(duì)象或數(shù)組的最后一項(xiàng)是否加逗號(hào)（es5 表示對(duì)象/數(shù)組/函數(shù)參數(shù)中尾項(xiàng)加逗號(hào)）trailingComma: 'es5',// 對(duì)象中的大括號(hào)是否有空格（true 表示 `{ foo: bar }` 而不是 `{foo: bar}`）bracketSpacing: true,// 箭頭函數(shù)的參數(shù)是否加括號(hào)（always 表示即使只有一個(gè)參數(shù)也加括號(hào)，如 `(x) => x`）arrowParens: 'always',// 設(shè)置換行符風(fēng)格（auto 表示跟隨系統(tǒng)，避免 git diff 因換行符差異）endOfLine: 'auto',// 引入 Prettier 插件：自動(dòng)對(duì) Tailwind CSS 類名進(jìn)行排序plugins: ['prettier-plugin-tailwindcss'],
};

4. .vscode/settings.json

// .vscode/settings.json
{// 禁用 VS Code 自帶的保存時(shí)自動(dòng)格式化功能（交由 ESLint 處理）"editor.formatOnSave": false,// 禁用默認(rèn)格式化器，避免與 ESLint/Prettier 沖突"editor.defaultFormatter": null,// 配置 VS Code 中哪些文件類型由 ESLint 插件進(jìn)行校驗(yàn)"eslint.validate": ["javascript",         // 普通 JS 文件"javascriptreact",    // React 中的 JS（.jsx）"typescript",         // TypeScript 文件"typescriptreact"     // React 中的 TS（.tsx）],// 啟用保存時(shí)的代碼操作功能（Code Action），用于觸發(fā) ESLint 的自動(dòng)修復(fù)"editor.codeActionsOnSave": {"source.fixAll": true,           // 啟用所有類型的修復(fù)（包括 ESLint 和其他插件）"source.fixAll.eslint": true     // 啟用 ESLint 的自動(dòng)修復(fù)（比如修復(fù)格式、空格、變量未使用等）}
}

最終結(jié)構(gòu)

my-project/
├─ .vscode/
│  └─ settings.json
├─ eslint.config.js 
├─ prettier.config.js 
├─ package.json
├─ src/
│  └─ ...