ESLint：解析错误：此实验性语法需要启用以下解析器插件之一：'jsx，flow，typescript'（2:9）

Question

我正在尝试在WebStrom中使用ESLint，但它无法正常工作并显示错误信息：

``` ESLint: 解析错误：此实验性语法需要启用以下解析器插件之一：“jsx，flow，typescript”（2:9）。 ```

这是我的 `.eslintrc` 和 `package.json` 设置。我该如何修复这个错误？

package.json

{
  "name": "raonair-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "eslint-config-react-app": "^6.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install"
  },
  "parser": "babel-eslint",
  "eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "plugin:flowtype/recommended"
    ],
    "plugins": [
      "flowtype"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.15.0",
    "@babel/eslint-plugin": "^7.14.5",
    "@babel/plugin-syntax-jsx": "^7.14.5",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-flowtype": "^5.9.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^7.0.1",
    "prettier": "^2.3.2"
  }
}

.eslintrc

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "prettier"
  ],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEveryWhere": false,
    "ecmaFeatures": {
      "globalReturn": false,
      "jsx": true
    },
    "ecmaVersion": 2020,
    "babelOptions": {
      "configFile": "./babel.config.js"
    }
  },
  "plugins": [
    "jsx-a11y",
    "react-hooks",
    "@babel/",
    "flowtype",
    "import"
  ],
  "rules": {
    "import/no-anonymous-default-export": "off",
    "import/no-extraneous-dependencies": "off",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling"
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": false
        }
      }
    ],
    "import/prefer-default-export": "off",
    "indent": [
      "error",
      2,
      {
        "SwitchCase": 1
      }
    ],
    "jsx-a11y/anchor-is-valid": "off",
    "no-console": "error",
    "no-unused-vars": "error",
    "react/jsx-props-no-spreading": "off",
    "react/react-in-jsx-scope": "off"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    },
    "insert_final_newline": true
  }
}

- skull Kim

---

你没有提供除了 .eslintrc(.json) 和 package.json 之外的任何其他项目文件。 我无法重现错误信息 Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (2:9)，但是却得到了 Line 0: Parsing error: Cannot find module './babel.config.js'。 - Henke

Answer 1

1. 在开发依赖中安装 @babel/preset-react。

2. 在 .eslintrc 文件中添加以下内容：

    ...
    "parser": "@babel/eslint-parser",
    "parserOptions": {
       ...
       "babelOptions": {
          "presets": ["@babel/preset-react"]
       },
      }
    ...
   

来源：https://ffan0811.medium.com/error-debugging-this-experimental-syntax-requires-enabling-one-of-the-following-parser-plugin-s-22946599a0a4

- Enrique Briones Arcos

---

由于 .eslintrc(.json) 中已经有 "parser": "@babel/eslint-parser"，因此无需再添加。 - Henke

Answer 2

针对 Ceroy 的回答进行补充(来源):

1. 安装必要的依赖，使 babel 可以正确解析 jsx 语法

yarn add @babel/preset-react -D

或者

npm install --save-dev @babel/preset-react

2. 配置 Babel

在项目根目录中创建.babelrc文件：

{
    "presets": [
        "@babel/preset-react"
    ]
}

3. 在.eslintrc.json中指定解析器（这样你的控制台和VSCode将使用相同的解析器）-此处显示完整的eslintrc：

{
    "parser": "@babel/eslint-parser",
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "standard",
        "plugin:react/jsx-runtime",
        "plugin:testing-library/react",
        "plugin:jest/all"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {}
}

注意：.eslintrc.json也可以通过npm init @eslint/config创建，或者使用VSCode中的ESLint扩展程序创建。使用init命令将会给您更多选择（如TypeScript支持）。

4. 在控制台中尝试：npx eslint --fix . 5. 检查VSCode（使用ESLint扩展程序）。

奖励：

VSCode的ESLint插件设置（自动保存修复，Jest感知，babel解析器等 - 在全局VSCode settings.json文件中）。

    ...
    "eslint.alwaysShowStatus": true,
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "eslint.options": {
        "parser": "@babel/eslint-parser"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript"
    ]
    ...

完整的 package.json 文件：

{
  "name": "okta-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^12.1.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.15.7",
    "@babel/preset-react": "^7.14.5",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx": "^0.1.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-react": "^7.26.0"
  }
}

- Andrei

Answer 3

我遇到了这个错误。我的问题是 eslint-config-standard 的版本问题。

所以我的解决方案是将 eslint-config-standard 版本降级为 16.0.3，从而解决问题。

"eslint-config-standard": "^17.0.0" => "^16.0.3"

- hong developer

Answer 4

我遇到了同样的问题，但对我来说解决方法如下。我已经添加了错误的截图和解决步骤。

步骤1：如果你的package.json文件中还没有安装@babel/preset-react依赖项，请先安装它。

yarn add @babel/preset-react  

package.json文件供参考

{
  "name": "animationapp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/drawer": "^6.6.5",
    "@react-navigation/native": "^6.1.9",
    "@rnmapbox/maps": "^10.0.15",
    "expo": "~49.0.11",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-copilot": "^3.2.1",
    "react-native-gesture-handler": "^2.13.3",
    "react-native-reanimated": "3.5.2",
    "react-native-safe-area-context": "^4.7.3",
    "react-native-screens": "^3.26.0",
    "react-native-svg": "^13.14.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/eslint-parser": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^12.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.53.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.33.2",
    "jest": "^29.7.0",
    "react-test-renderer": "^18.2.0"
  },
  "private": true
}

第二步：添加一个名为.eslintrc.js的文件，其中包含以下选项，重要的是要在下面的jsx支持中添加以下内容。

parserOpts: {
        plugins: ["jsx"]
      }

将此内容添加到.eslintrc.js文件后，它的样子如下所示。

module.exports = {
  parser: "@babel/eslint-parser",
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      babelrc: false,
      configFile: false,
      // your babel options
      presets: ["@babel/preset-env"],
      parserOpts: {
        plugins: ["jsx"]
      }
    },
  },
};

第三步：添加`.eslintignore`文件以忽略需要进行代码检查的文件和文件夹，并且也要添加`.babelrc`文件。

`.babelrc`文件。

{
    "presets": [
        "@babel/preset-react"
    ]
}

.eslintignore 文件

build/*.js
config/*.js
coverage/*.js
coverage/*
jest/*.js
__tests__/*
__tests__/*.js

第四步：在添加上述设置之前和之后，我运行yarn lint时没有任何错误。

- Hrusikesh