Eslint、Prettier、.vscode 配置

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

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

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

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

開發(fā)配置示例

接下來是一套適合 React + Vite + TypeScript 項目，結(jié)合 ESLint + Prettier + VS Code 的完整配置示例，保證團隊開發(fā)體驗統(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 中校驗 prettier 規(guī)則（可選）
import prettierConfig from './prettier.config.js';/** @type {import("eslint").Linter.FlatConfig[]} */
// Flat Config 是一種基于數(shù)組的配置方式，每個對象對應(yīng)一類文件或規(guī)則
export default [{// 匹配需要被 ESLint 校驗的文件files: ['**/*.{js,cjs,mjs,ts,tsx,jsx}'],// 配置解析器和語言環(huán)境languageOptions: {parser: tseslint.parser, // 使用 TypeScript 的解析器parserOptions: {ecmaVersion: 'latest', // 支持最新 ECMAScript 語法sourceType: 'module',  // 支持 ES 模塊ecmaFeatures: {jsx: true, // 支持 JSX},},},// 注冊使用到的插件plugins: {react: pluginReact,'react-hooks': pluginReactHooks,'jsx-a11y': pluginJsxA11y,prettier: pluginPrettier,},// 合并推薦規(guī)則 + 自定義規(guī)則rules: {// 官方 JS 推薦規(guī)則（比如禁止未定義變量）...js.configs.recommended.rules,// TypeScript 推薦規(guī)則（比如類型注解錯誤、any 等）...tseslint.configs.recommended.rules,// React 推薦規(guī)則（比如 prop 校驗）...pluginReact.configs.recommended.rules,// 可訪問性規(guī)則（比如圖片缺少 alt 屬性）...pluginJsxA11y.configs.recommended.rules,// React Hooks 推薦規(guī)則（比如 useEffect 必須傳依賴數(shù)組）...pluginReactHooks.configs.recommended.rules,// 啟用 prettier 規(guī)則（會把 prettier 的格式問題當(dāng)成 ESLint error）'prettier/prettier': ['error', prettierConfig],// 關(guān)閉 React 17+ 中不再需要的規(guī)則（無需 import React）'react/react-in-jsx-scope': 'off',},// 額外配置插件所需的環(huán)境（如 react 版本自動識別）settings: {react: {version: 'detect',},},},
];

3. prettier.config.js

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

4. .vscode/settings.json

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

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

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