create-react-app react18.3版本 项目中创建eslint文件

在React 18.3版本的create-react-app项目中添加ESLint（JavaScript代码风格检查工具）是为了保持代码质量的一致性和最佳实践。以下是创建和配置ESLint的步骤：

1. 安装ESLint和相关插件：
打开终端（命令行），首先确保已经在项目目录中，然后运行以下命令安装ESLint和react-app-rewired，它将帮助我们对create-react-app做一些修改：

   npm install eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-import --save-dev react-app-rewired

2. 配置ESLint：
创建一个新的`config-overrides.js`文件到项目的根目录，内容如下：

   const { override, fix } = require('react-app-rewired');

   module.exports = function (app) {
     return override(
       // 使用Airbnb的配置，并启用ES6+语法
       fix({
         rules: {
           'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
         },
       }),
       // 允许在jsx文件中使用import语句
       app.config.set('module.rules', [
         ...app.get('module.rules'),
         {
           test: /\.jsx?$/,
           include: /node_modules/,
           enforce: 'pre',
           use: [
             {
               loader: 'eslint-loader',
               options: {
                 configFile: './eslintrc.js', // 自己的.eslintrc.js配置文件路径
               },
             },
           ],
         },
       ]),
     );
   };

这里假设你已经有了一个名为`.eslintrc.js`的文件，如果没有，可以创建一个并配置基本的Airbnb规则。

3. 配置文件 `.eslintrc.js`（若不存在）：
使用Airbnb的配置模板，例如：

   module.exports = {
     extends: [
       'airbnb', // 或者 'airbnb-base' 如果不需要某些额外的规则
       '@typescript-eslint/recommended', // 如果项目使用TypeScript
     ],
     parser: '@typescript-eslint/parser', // 如果项目使用TypeScript
     parserOptions: {
       ecmaVersion: 2022,
       sourceType: 'module',
     },
     rules: {
       // 更具体的规则设置
       'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 控制台日志
       // 添加其他需要的规则
     },
   };

4. 初始化ESLint：
在终端运行：

   npx eslint --init

按照提示选择合适的配置选项，通常推荐选择"Use a popular style guide"并选择Airbnb。

完成以上步骤后，项目会在开发阶段自动进行ESLint校验。你可以通过运行`npm run lint`或`yarn lint`来手动触发检查。