这里有一个简单的解决方案--只需将rules属性从.eslintrc.json移动到package.json的eslintConfig属性。1

• 不要保留 * .eslintrc.json。* 直接删除它！*2

package.json文件现在将如下所示。
package.json：

{
  "name": "parsing-error",
  "version": "0.1.0",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "no-unused-vars": [
        "warn",
        {
          "argsIgnorePattern": "^_",
          "varsIgnorePattern": "^_"
        }
      ]
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version"
    ]
  }
}

就是这样！3
检查是否成功：

npx eslint . --ext .js

期望看到：

没有错误。- * 耶！*
如果您的文本编辑器（在我的例子中是VS Code）仍然打开，请确保在您希望看到错误消失之前重新启动它！

参考

• A more cumbersome solution to the question asked
• Suggesting to have ESLint rules in package.json under eslintConfig
• 使用npm安装ESLint
• ESLint gets installed even though it isn't explicitly mentioned in package.json | Section 1

1我是从this post那里得到这个想法的。
2也不要运行npm init @eslint/config。如果你不删除.eslintrc.json，错误将持续存在！
3 A.如果您怀疑您可能有ESLint的 * 全局 * 安装，请首先运行：
npm uninstall eslint --global个
B.如果您已经运行了npm install（如问题第7行所示），那么您不需要运行npm install eslint --save-dev来安装ESLint。
原因是package.json中包含react-scripts意味着 *ESLint由npm install * 安装。
this answer的第1节告诉我们ESLint在react-scripts的依赖树中。

0.声明

这个答案有很多不好的建议和缺陷。我强烈建议在继续阅读之前先看一下this other answer。这个答案的一些问题包括：

• 它比另一个答案要长得多，也更麻烦。
• 此解决方案建议创建一个.eslintrc.json文件，这会使它不如另一个答案优雅和健壮。
• 这种解决方案不只是修复原始错误，而是导致 * 两个新错误 *，这两个新错误需要依次处理。
• 当我写这个答案的时候，我对所问问题的Create React App, which is one of the tags有些无知，比如说安装ESLint没有任何意义，因为ESLint is already automatically included in every Create React App project。

我曾想过把这个答案完全删除，但由于它得到了一个赞成票，而且删除它不符合我的利益，我决定暂时不删除它。
本 * 声明 * 部分是我真诚的尝试，不误导任何人。

1.先决条件

如果服务器正在运行，请按Ctrl+C将其关闭。
我强烈建议 * 卸载 * 任何 * 全局 * 安装的ESLint。
要查看安装了哪些全局软件包，请在命令行中运行：1

npm list --global --depth 0

如果ESLint是全局安装的，请通过运行以下命令将其卸载：

npm uninstall eslint --global

要将ESLint正确地安装到本地项目中，我建议执行以下两个步骤。
1.本地安装ESLint。
1.创建一个有效的.eslintrc.json文件。
事实证明，你还需要做第三步。
1.更新所有npm软件包至其最新版本。

2.本地安装ESLint

要在本地安装ESLint，请运行：2

npm install eslint --save-dev

这将添加

,
  "devDependencies": {
    "eslint": "^7.32.0"
  }

在package.json的末尾。

3.创建有效的.eslintrc.json文件

• 注意！* 在继续之前，请保存当前.eslintrc.json文件的副本，因为以下命令将破坏（重新创建）该文件。

要创建新的.eslintrc.json文件，请运行：

npm init @eslint/config

您将被问到几个问题，我通过按Enter键选择默认值来回答这些问题，* 除了 * 我选择的 * 格式 * 是JSON（而不是JavaScript）。

除了创建.eslintrc.json文件之外，这还会将devDependencies下的"eslint-plugin-react": "^7.29.2"属性添加到package.json文件中。3
命令npm init @eslint/config会破坏现有的.eslintrc.json文件，因此您必须手动添加回任何"rules"或其他想要保留的JSON设置。
在本例中，我添加回原始.eslintrc.json中的规则。
结果如下。
.eslintrc.json：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

现在，当我打开VS代码时，出现了两个警告，而不是一个错误，这正是我想要的结果。

• 太好了！* 但是等等--不幸的是，这是一个美中不足的地方。问题是，当我现在运行npm start在Web浏览器中打开项目并按下F12时，控制台中出现了两个错误。

错误消息包括：

• Uncaught ReferenceError: process is not defined，以及
• Line 0: Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context .

幸运的是，我已经贴出了这个问题的解决方案，即：
Update all npm packages to their latest versions。
下面的部分有点简洁，所以如果你想要更多的肉在骨头上，去访问that other answer。

4.将所有npm软件包更新至其最新版本

考虑更新所有npm软件包至其最新版本。
目的是降低发生版本冲突的风险。
在this answer中也提出了 * 更新所有软件包 * 的建议。

• A.全局安装npm-check-updates *

在命令行中，运行：

npm install --global npm-check-updates

• B.更新package.json以包含最新版本 *

以下命令会将最新的软件包版本号写入package.json：

npm-check-updates --upgrade

以下是Windows 10中的外观：

• C.安装最新版本 *

在命令行中，运行：

npm install

• D.检查浏览器和/或终端中的错误 *

在命令行中，运行：

npm start

浏览器和终端现在都显示 * 五个错误 。
"令人不安，是吗？"
当然！- * 但不要给予希望！ 只需关闭服务器（Ctrl+C），然后一遍又一遍地尝试。
昨天，当我收到这些错误时，我所需要做的就是再运行一次npm start *。
今天我又试着运行了4-5次npm start，但还是出现了错误。
所以我试了两次npm install && npm start，最后它运行没有错误。
不确定是怎么回事。也许要过一段时间才能起作用？
最后，浏览器中 * 没有错误 *。

终端显示 * 编译成功！*
x1c4d 1x指令集
耶！

5.结论

按照上面的步骤进行操作，帮助我纠正了问题标题中的错误：

• 解析错误：保留字'import'是保留字 *。

对于设置稍有不同的项目，5仅从上面的.eslintrc.json文件复制粘贴不太可能工作。
运行npm init @eslint/config并升级所有软件包更有可能成功。

参考

• A better, shorter, more elegant, and more robust answer to the question asked
• ESLint is already automatically included in every Create React App project
• Info on the [create-react-app] tag at Stack Overflow
• npm – get a list of globally installed packages
• 使用npm安装ESLint
• Start using @eslint/config in your project显示器
• 何时应使用@babel/eslint-parser？
• Update all npm packages to their latest versions
• Update all current packages to their latest versions
• npm-check-updates – documentation

1我使用的是Windows 10，但我希望这里提供的所有命令在Linux和macOS上都能正常工作。
2 A.完成此命令大约需要5-10分钟。

B.只要你的源代码 * 不是 * 经过Babel转换的，就没有理由安装@babel/eslint-parser。只要是普通的eslint就足够了。请参阅什么时候我应该使用@babel/eslint-parser？
如果您使用的是TypeScript，则需要@babel/eslint-parser。
要安装的命令为：
npm install eslint @babel/core @babel/eslint-parser --save-dev个
npm init @eslint/config配置命令的使用方式应与普通（* 非 *-@babel）ESLint相同。
3但是package.json中的"eslint-plugin-react"属性似乎没有太大的相关性。
4这两个警告仍然显示在文本编辑器中-就像它们应该显示的那样。
5例如，您可能使用Angular或Vue而不是React。