vite react-ts eslint.config.js

### 如何在 Vite React TypeScript 项目中配置 `eslint.config.js` #### 安装必要的依赖 为了使 ESLint 能够正确解析和处理 React 和 TypeScript 文件，在 Vite 项目中需安装如下开发依赖： ```bash npm install -D eslint @babel/eslint-parser eslint-plugin-react eslint-plugin-react-hooks typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier ``` 此命令会安装 ESLint 及其 Babel 解析器，React 插件以及针对 TypeScript 的支持工具[^2]。 #### 初始化 ESLint 配置文件 通过运行初始化向导来创建基本的 `.eslintrc.json` 或者其他格式的基础配置文件: ```bash npx eslint --init ``` 这一步骤将引导完成一些选项的选择，以便自动生成适合项目的初始设置[^1]。 #### 创建或修改 `eslint.config.js` 对于希望集中管理配置的应用程序来说，可以直接编辑根目录下的 `eslint.config.js` 文件。下面是一个适用于 Vite + React + TypeScript 组合的例子： ```javascript // eslint.config.js module.exports = { root: true, parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint', 'react'], extends: [ 'plugin:@typescript-eslint/recommended', 'airbnb', 'airbnb/hooks', 'plugin:react/recommended', 'plugin:prettier/recommended' ], settings: { react: { version: 'detect' // 自动检测使用的 React 版本 } }, env: { browser: true, es6: true, node: true }, rules: { // 添加特定规则覆盖默认行为 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'max-len': ['warn', { code: 100 }], ...require('@typescript-eslint/eslint-plugin').configs.recommended.rules, // 导入推荐的 TS 规则集 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' } ] }, overrides: [ { files: ['*.ts', '*.tsx'], // 对 .ts/.tsx 文件应用额外规则 rules: { '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/no-explicit-any': 'off' } } ] }; ``` 上述配置引入了多个插件并扩展了一些流行的风格指南，同时也调整了几项常见规则以适应现代 JavaScript/TypeScript 开发实践的需求。 #### 整合 Prettier 为了让代码格式化更加统一美观，可以在同一个配置文件里集成 Prettier 来负责最终的代码样式修正工作。确保已经按照前述步骤安装好了 `eslint-config-prettier` 和 `eslint-plugin-prettier` 后，只需简单地将其加入到 `extends` 数组即可启用它们的功能。 #### 测试配置有效性 最后不要忘记测试新建立起来的 Linter 设置是否正常运作。可以通过执行以下命令来进行快速验证： ```bash npx eslint . ``` 这条指令会对当前目录及其子目录中的所有源码进行静态分析，并报告任何违反既定编码标准的地方[^3]。