react项目如何添加eslint
安装 ESLint 依赖
在 React 项目中安装 ESLint 及其相关插件。推荐使用 eslint-config-react-app，这是 Create React App 的官方配置。运行以下命令：
npm install eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev如果项目使用 TypeScript，还需安装 TypeScript 相关插件：
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev初始化 ESLint 配置
在项目根目录运行以下命令生成 ESLint 配置文件：
npx eslint --init根据提示选择配置选项：
- 选择检查语法和问题
- 选择项目使用的模块类型（通常为 JavaScript modules）
- 选择框架（React）
- 是否使用 TypeScript（根据项目情况选择）
- 选择代码运行环境（Browser）
- 选择配置文件的格式（推荐
.eslintrc.js）
配置 .eslintrc.js
手动调整生成的 .eslintrc.js 文件以适配 React 项目。以下是一个常见配置示例：
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:jsx-a11y/recommended',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react', 'react-hooks', 'jsx-a11y'],
rules: {
'react/react-in-jsx-scope': 'off', // React 17+ 不需要显式导入 React
'react/prop-types': 'off', // TypeScript 项目中可关闭
},
};如果是 TypeScript 项目，需修改 parser 和 parserOptions：
parser: '@typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
},添加脚本命令
在 package.json 中添加 ESLint 检查命令：
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}运行 npm run lint 检查代码，npm run lint:fix 自动修复部分问题。
配置编辑器集成
在 VS Code 中安装 ESLint 扩展，并在设置中启用保存时自动修复：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}忽略文件配置
在项目根目录创建 .eslintignore 文件，添加需要忽略的文件或目录：
node_modules
build
dist
*.config.js集成 Prettier（可选）
如果需要与 Prettier 配合使用，安装相关插件：
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev在 .eslintrc.js 的 extends 和 plugins 中添加 Prettier：
extends: [
// ...其他配置
'plugin:prettier/recommended',
],
plugins: [
// ...其他插件
'prettier',
],
rules: {
'prettier/prettier': 'error',
},
