每次导入时出现更漂亮的语法错误

Question

我有一个带有 eslint 7 + prettier + webpack 的 react 应用程序（但我认为 webpack 不是问题）

我遇到了这种错误：

["ERROR" - 1:04:07 PM] Unexpected token (1:8)
> 1 | import { useState } from 'react';
    |        ^
  2 | 
  3 | import arrowIosDownwardFill from '@iconify-icons/eva/arrow-ios-downward-fill';
  4 | import arrowIosForwardFill from '@iconify-icons/eva/arrow-ios-forward-fill';
SyntaxError: Unexpected token (1:8)
> 1 | import React, { Suspense, Fragment, lazy, useEffect } from 'react';
|    
  4 | import arrowIosForwardFill from '@iconify-icons/eva/arrow-ios-forward-fill';

我对 eslint 插件或扩展有什么问题吗？

这是我的 .eslint.json 配置

{
  "parser": "babel-eslint",
  "plugins": ["react"],
  "env": {
    "browser": true,
    "es6": true,
    "jest/globals": true
  },
  "extends": ["plugin:react/recommended", "plugin:prettier/recommended", "airbnb", "airbnb/hooks"],
  "parserOptions": {
    "project": ["jsconfig.json"],
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "no-console": "off",
    "implicit-arrow-linebreak": "off",
    "no-danger-with-children": "off",
    "comma-dangle": "off",
    "no-plusplus": "off",
    "import/no-unresolved": "off",
    "react/jsx-filename-extension": "off",
    "react/no-array-index-key": "off",
    "react/prop-types": "off",
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",
    "react/require-default-props": "off",
    "react/forbid-prop-types": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "jsx-a11y/control-has-associated-label": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "max-len": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true
      }
    ],
    "jest/no-disabled-tests": "warn",
    "jest/no-focused-tests": "error",
    "jest/no-identical-title": "error",
    "jest/prefer-to-have-length": "warn",
    "jest/valid-expect": "error",
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal", ["parent", "sibling"]],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx"]
      }
    }
  }
}

还有 package.json

"eslint": "^7.22.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^8.1.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.4.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.3.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^3.10.1",
"eslint-webpack-plugin": "^2.5.2",

"eslintConfig": {
    "extends": "react-app"
  }

Answer 1

错误成立：.prettierc 解析器选项应该是 babel，我有流程。