外包类设计网站网址搜索

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/
│  └─ ...