如何在Vite + React项目中集成配置ESLint代码检查工具？

1. 安装基础依赖 #

首先在项目根目录执行命令安装ESLint及相关基础依赖，根据你使用的包管理器选对应命令：

• npm 安装：

npm install eslint eslint-plugin-react --save-dev

• yarn 安装：

yarn add eslint eslint-plugin-react --dev

• pnpm 安装：

pnpm add eslint eslint-plugin-react -D

如果你的项目使用TypeScript，额外安装TS相关的ESLint依赖：

# 以pnpm为例，其他包管理器替换开头的pnpm add即可
pnpm add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

2. 初始化ESLint配置 #

执行初始化命令生成配置文件：

npx eslint --init

执行后会出现交互式选项，按你的项目情况选择即可，通用参考选项如下：

• 你想让ESLint做什么？选择 To check syntax, find problems, and enforce code style
• 项目用的模块类型？选择 ES modules (import/export)
• 项目使用的框架？选择 React
• 是否使用TypeScript？按实际情况选是/否
• 代码运行在什么环境？勾选 Browser
• 配置文件用什么格式？推荐选择 JavaScript
• 是否自动安装缺失的依赖？选择 Yes

3. 适配Vite环境调整配置 #

打开生成的 .eslintrc.cjs（或你选择的其他格式配置文件），调整适配Vite + React的规则：

注意React 17+版本支持JSX不用手动导入React，需要关闭对应校验规则避免报错
示例配置参考：

module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime', // 加这行关闭React必须导入的校验
    // TS项目额外加下面两行
    // 'plugin:@typescript-eslint/recommended',
    // 'plugin:@typescript-eslint/recommended-requiring-type-checking'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    // TS项目加下面两行，路径对应你项目的tsconfig.json位置
    // parser: '@typescript-eslint/parser',
    // project: ['./tsconfig.json', './tsconfig.node.json'],
  },
  plugins: ['react'],
  rules: {
    // 这里可以自定义规则，比如关闭某条校验、调整报错等级
    // 示例：将未使用变量的报错改为警告
    // 'no-unused-vars': 'warn'
  }
}

4. 添加执行脚本 #

打开项目根目录的 package.json，在 scripts 字段中添加ESLint校验命令：

{
  "scripts": {
    // 原有其他脚本，比如dev、build等保留
    "lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint . --ext js,jsx,ts,tsx --fix"
  }
}

• 执行 npm run lint（或对应包管理器的run命令）即可全局检查项目代码规范
• 执行 npm run lint:fix 可以自动修复大部分可自动修复的规范问题

5. 可选：配置忽略文件 #

在项目根目录新建 .eslintignore 文件，填写不需要ESLint校验的文件/目录，参考内容：

node_modules
dist
dist-ssr
*.local
*.config.js
*.config.ts

可选：编辑器集成 #

如果使用VS Code，安装ESLint插件后，可以在编辑器的 settings.json 中配置保存自动修复代码规范问题，提升开发效率：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

内容的提问来源于stack exchange，提问作者H Nazmul Hassan