import globals from "globals"; import pluginJs from "@eslint/js"; import tseslint from "typescript-eslint"; import pluginReact from "eslint-plugin-react"; /** @type {import('eslint').Linter.Config[]} */ export default [ { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] }, { languageOptions: { globals: { ...globals.browser, ...globals.node } } }, pluginJs.configs.recommended, ...tseslint.configs.recommended, pluginReact.configs.flat.recommended, { rules: { // eslint (http://eslint.cn/docs/rules) "no-var": "error", // 要求使用 let 或 const 而不是 var "no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行 "no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们 "prefer-const": "off", // 此规则旨在标记使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const "no-irregular-whitespace": "off", // 禁止不规则的空白 "no-unexpected-multiline": "error", // 禁止空余的多行 "no-useless-escape": "off", // 禁止不必要的转义字符 // react "react/prop-types": "off", // 使用 TypeScript 或其他类型检查工具，可以关闭此规则，因为可能已经有更好的类型检查机制。 "react/react-in-jsx-scope": "off", // 如果你使用 React 17 及以上，不需要在每个文件中导入 React，可关闭此规则。 "react/display-name": "warn", // 对组件缺少 displayName 属性发出警告，有助于调试和性能分析。 // typeScript (https://typescript-eslint.io/rules) "@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量 "@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore "@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长 "@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间。 "@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型 "@typescript-eslint/ban-types": "off", // 禁止使用特定类型 "@typescript-eslint/explicit-function-return-type": "off", // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明 "@typescript-eslint/no-var-requires": "off", // 不允许在 import 语句中使用 require 语句 "@typescript-eslint/no-empty-function": "off", // 禁止空函数 "@typescript-eslint/no-use-before-define": "off", // 禁止在变量定义之前使用它们 "@typescript-eslint/ban-ts-comment": "off", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述 "@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!) "@typescript-eslint/explicit-module-boundary-types": "off", // 要求导出函数和类的公共类方法的显式返回和参数类型 } } ]; 代码优化扩展，添加注释

### Vite React 18 TypeScript 项目中优化 ESLint 配置并添加注释 以下是针对 `eslint.config.js` 文件的优化配置，同时为每个规则添加了详细的注释说明： ```javascript // eslint.config.js module.exports = { // 使用 @typescript-eslint/parser 解析器以支持 TypeScript 语法[^1] parser: '@typescript-eslint/parser', // 扩展基础规则集，包含 ESLint 推荐规则、React 推荐规则和 TypeScript 推荐规则 extends: [ 'eslint:recommended', // 使用 ESLint 的推荐规则 'plugin:react/recommended', // 使用 React 的推荐规则 'plugin:@typescript-eslint/recommended', // 使用 TypeScript 的推荐规则 'plugin:react/jsx-runtime' // 支持 React 17+ 的 JSX 运行时[^2] ], // 添加插件以支持 React 和 TypeScript 的特定规则 plugins: ['react', '@typescript-eslint'], // 设置代码运行环境，避免未知全局变量导致错误 env: { browser: true, // 支持浏览器全局变量 es2021: true, // 支持 ES2021 特性 node: true // 支持 Node.js 全局变量 }, // 声明全局变量以避免报错 globals: { React: 'writable' // 声明 React 为可写入的全局变量 }, // 配置解析选项以支持现代 JavaScript 和 JSX parserOptions: { ecmaVersion: 'latest', // 使用最新 ECMAScript 版本 sourceType: 'module', // 指定源码为模块化 ecmaFeatures: { jsx: true // 启用 JSX 支持 } }, // 自定义规则配置，根据团队需求调整规则严格程度 rules: { // 强制使用接口而不是类型别名，提高代码一致性 '@typescript-eslint/consistent-type-definitions': ['error', 'interface'], // 禁止不必要的 any 类型，强制开发者明确类型定义 '@typescript-eslint/no-explicit-any': 'error', // 禁止未使用的变量，减少潜在的错误 '@typescript-eslint/no-unused-vars': 'warn', // 禁止在类成员中使用 public 修饰符（TypeScript 默认公开） '@typescript-eslint/explicit-member-accessibility': 'off', // 要求 React 组件有 displayName 属性，便于调试 'react/display-name': 'warn', // 禁止在 JSX 中直接使用箭头函数，避免性能问题 'react/jsx-no-bind': 'warn', // 强制在 JSX 属性中使用双引号，保持代码风格一致 'jsx-quotes': ['error', 'prefer-double'], // 禁止使用 console，避免生产环境中输出调试信息 'no-console': 'warn', // 禁止使用 debugger，避免调试代码残留 'no-debugger': 'error', // 强制对象字面量中的属性排序，提高代码可读性 'object-property-newline': ['error', { allowAllPropertiesOnSameLine: false }], // 强制函数参数之间的空格，保持代码风格一致 'space-in-parens': ['error', 'never'] }, // 设置 React 版本以启用相关规则 settings: { react: { version: '18.0' // 指定 React 版本 } } }; ``` --- ### 优化点说明 - **解析器选择**：使用 `@typescript-eslint/parser` 是为了支持 TypeScript 语法。 - **扩展规则集**：通过 `extends` 字段引入基础规则、React 规则以及 TypeScript 推荐规则，确保代码符合最佳实践[^1]。 - **插件支持**：`react` 和 `@typescript-eslint` 插件分别提供 React 和 TypeScript 的特定规则支持[^1]。 - **环境配置**：`env` 字段定义了代码运行的环境，避免因未知全局变量导致错误[^3]。 - **自定义规则**：`rules` 字段允许开发者根据团队需求调整规则严格程度，例如禁止 `any` 类型或强制使用接口定义。 --- ### VSCode 配置建议 为了确保 ESLint 在开发过程中生效，可以在 VSCode 的 `settings.json` 文件中添加以下配置： ```json { "editor.codeActionsOnSave": { "source.fixAll.eslint": true // 每次保存时自动修复 ESLint 错误 }, "prettier.eslintIntegration": true // 让 Prettier 使用 ESLint 的代码格式进行校验[^3] } ``` --- ### 注意事项 确保安装以下依赖包以支持 ESLint 和 TypeScript 的功能： ```bash npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint ``` 此外，如果需要全局样式支持，可以参考 `vite.config.ts` 的配置[^2]，确保样式文件被正确引入。 ---