vite react eslint.config.js

### 在 Vite 和 React 项目中配置 `eslint.config.js`

为了确保 ESLint 能够有效工作并遵循最佳实践，在 Vite 和 React 项目的设置过程中，`eslint.config.js` 的配置至关重要。

#### 安装必要的依赖

首先，需要安装一些必需的开发工具包来支持 ESLint 功能：

npm install --save-dev eslint @babel/eslint-parser vite-plugin-eslint

这一步骤引入了 ESLint 及其 Babel 解析器和支持 Vite 构建系统的插件[^3]。

#### 初始化 ESLint 配置

通过命令行初始化 ESLint 设置，以便自动生成基础配置文件：

npx eslint --init

此过程会引导完成一系列选项的选择，从而创建适合项目的 `.eslintrc.json`, `.eslintrc.yaml`, `.eslintrc.yml`, or `.eslintrc.js` 文件之一。对于大多数情况，默认选择即可满足需求。

#### 编辑 `vite.config.js`

接下来修改 `vite.config.js` 来集成 ESLint 插件功能。以下是具体的实现方式：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [
    react(),
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.jsx']
    })
  ],
});

上述代码片段展示了如何导入所需的模块并将它们应用到 Vite 的构建流程当中。特别注意的是 `include` 参数指定了哪些路径下的 JavaScript 或 JSX 文件应该被纳入 ESLint 检查范围之内[^1]。

#### 创建或更新 `.eslintrc.*` 文件

最后一步是调整现有的 `.eslintrc.*` 文件（如果存在），或者新建该文件以定义更详细的规则集。例如，可以在根目录下建立名为 `.eslintrc.js` 的文件，并加入如下内容：

module.exports = {
  parser: "@babel/eslint-parser",
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["react-app", "plugin:react/recommended"],
  settings: {
    react: {
      version: "detect"
    }
  },
};

这段配置设定了使用 Babel 解析器处理源码，并扩展了一些预设好的风格指南作为起点。同时启用了针对 React 应用程序的支持特性。