Eslint、Prettier、.vscode 配置

Eslint、Prettier、.vscode 配置

首先，三者关联及各自作用

• ESLint 做语法和规范校验，结合 Prettier 负责格式化。
• .vscode 通过 ESLint 插件自动运行校验和修复，保证团队开发体验统一。

其次 Eslint、Prettier 的关联

• Prettier 负责代码的排版和格式，保证风格统一，省去开发者争论格式问题时间。
• ESLint 负责代码规范和质量，发现潜在问题和错误，保持代码健康。
• 同时用的话，Prettier 负责格式，ESLint 负责规范，两者互不冲突，搭配更完美。

开发配置示例

接下来是一套适合 React + Vite + TypeScript 项目，结合 ESLint + Prettier + VS Code 的完整配置示例，保证团队开发体验统一且规范。

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 基础规则（等同于 "eslint:recommended"）
import js from '@eslint/js';
// 引入 TypeScript ESLint 插件和解析器（包含推荐规则）
import tseslint from 'typescript-eslint';
// 引入 React、React Hooks、可访问性（a11y）相关 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 规则（可选）
import prettierConfig from './prettier.config.js';

/** @type {import("eslint").Linter.FlatConfig[]} */
// Flat Config 是一种基于数组的配置方式，每个对象对应一类文件或规则
export default [
  {
    // 匹配需要被 ESLint 校验的文件
    files: ['**/*.{js,cjs,mjs,ts,tsx,jsx}'],
    // 配置解析器和语言环境
    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,
    },
    // 合并推荐规则 + 自定义规则
    rules: {
      // 官方 JS 推荐规则（比如禁止未定义变量）
      ...js.configs.recommended.rules,
      // TypeScript 推荐规则（比如类型注解错误、any 等）
      ...tseslint.configs.recommended.rules,
      // React 推荐规则（比如 prop 校验）
      ...pluginReact.configs.recommended.rules,
      // 可访问性规则（比如图片缺少 alt 属性）
      ...pluginJsxA11y.configs.recommended.rules,
      // React Hooks 推荐规则（比如 useEffect 必须传依赖数组）
      ...pluginReactHooks.configs.recommended.rules,
      // 启用 prettier 规则（会把 prettier 的格式问题当成 ESLint error）
      'prettier/prettier': ['error', prettierConfig],
      // 关闭 React 17+ 中不再需要的规则（无需 import React）
      'react/react-in-jsx-scope': 'off',
    },
    // 额外配置插件所需的环境（如 react 版本自动识别）
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
];

3. prettier.config.js

// prettier.config.js
/** @type {import("prettier").Config} */
export default {
  // 每行最大长度（超过就换行）
  printWidth: 100,
  // 缩进的空格数（比如 2 表示缩进为两个空格）
  tabWidth: 2,
  // 每行末尾是否加分号（true 表示加）
  semi: true,
  // 使用单引号代替双引号（比如 'hello' 而不是 "hello"）
  singleQuote: true,
  // 多行对象或数组的最后一项是否加逗号（es5 表示对象/数组/函数参数中尾项加逗号）
  trailingComma: 'es5',
  // 对象中的大括号是否有空格（true 表示 `{ foo: bar }` 而不是 `{foo: bar}`）
  bracketSpacing: true,
  // 箭头函数的参数是否加括号（always 表示即使只有一个参数也加括号，如 `(x) => x`）
  arrowParens: 'always',
  // 设置换行符风格（auto 表示跟随系统，避免 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），用于触发 ESLint 的自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll": true,           // 启用所有类型的修复（包括 ESLint 和其他插件）
    "source.fixAll.eslint": true     // 启用 ESLint 的自动修复（比如修复格式、空格、变量未使用等）
  }
}

最终结构

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