非TypeScript的React App项目Eslint加载解析器报错求助

我之前也碰到过一模一样的情况——明明是纯JS的React项目，却被ESLint的TypeScript相关配置坑了。问题根源在于eslint-config-react-app默认包含了针对TypeScript文件的规则和解析器配置，哪怕你的项目里根本没装TypeScript，ESLint还是会尝试加载这些依赖。

下面是两个亲测有效的解决方案，你可以选一个适合自己的：

方案1：安装必要的依赖（快速解决） #

虽然你不用TypeScript，但@typescript-eslint/parser本身依赖typescript包，所以只要把这两个包作为开发依赖安装，就能让ESLint正常运行：

npm install --save-dev typescript @typescript-eslint/parser

这个方法最简单，安装后不用改任何配置，npm run lint就能正常工作了，而且这些依赖不会影响你的JS代码开发。

方案2：修改ESLint配置，移除TypeScript相关规则（更彻底） #

如果你不想装任何TypeScript相关的包，可以直接修改你的.eslintrc文件，覆盖eslint-config-react-app里的TypeScript override配置：

{
  "extends": ["react-app"],
  "overrides": [
    // 只保留针对JS/JSX文件的规则，移除TS相关的override
    {
      "files": ["**/*.js", "**/*.jsx"],
      "rules": {
        // 这里可以添加你的自定义JS规则，如果需要的话
      }
    }
  ]
}

如果你的项目之前没有.eslintrc文件，直接在项目根目录创建一个就行。这样ESLint就只会处理JS/JSX文件，不会再尝试加载TypeScript的解析器了。

另外提醒一下：如果你是用create-react-app创建的项目，确保没有在package.json的eslintConfig字段里有冲突的配置，如果有的话，优先以.eslintrc的配置为准。

内容的提问来源于stack exchange，提问作者Tuz