时间戳

首页 > 解决方案 > ESLint：解析错误：此实验性语法需要启用以下解析器插件之一：'jsx, flow, typescript' (2:9)

eslint - ESLint：解析错误：此实验性语法需要启用以下解析器插件之一：'jsx, flow, typescript' (2:9)

问题描述

我正在尝试在 webstorm 中使用 eslint，但它不起作用并显示错误：ESLint: Parsing error: This Experimental syntax requires enable the following parser plugin(s): 'jsx, flow, typescript' (2: 9）。这是我的 .eslintrc 和 package.json 设置。我应该怎么做才能修复错误？包.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
  }
}

标签： eslinteslintrceslint-config-airbnbprettier-eslintbabel-eslint

解决方案

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

  2. 在 .eslintrc 文件中添加这个

    ...
 "解析器": "@babel/eslint-parser",
 “解析器选项”：{
    ...
    "babelOptions": {
       “预设”：[“@babel/preset-react”]
    },
   }
 ...

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

推荐阅读