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

如何解决每次导入时出现更漂亮的语法错误

我有一个带有 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"
  }

解决方法

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