ESLint插件配置后为什么还是报“Unexpected token”错误？

Code°亚楠提问于 2026-02-06 07:37:28 阅读 45

工具

在项目里装了eslint-plugin-react和@typescript-eslint/eslint-plugin，配置了相关规则，但写React组件时还是报“Unexpected token”错误。代码明明能正常运行啊。

比如这个组件：


class MyComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

已经检查过.eslintrc配置了”plugins”: [“react”, “@typescript-eslint”]，parser也用了@typescript-eslint/parser。尝试过删除node_modules重装，但问题依旧。是不是插件版本冲突了？

ESLint Plugin插件

我来解答赞 8 收藏

反馈

2 条解答

闲人米阳 Lv1

你这个配置应该没错，但是有可能是ESLint的parser设置不正确导致的。拿去改改你的.eslintrc文件里的parser和parserOptions部分，确保它长这样：

{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": ["react", "@typescript-eslint"]
}

另外检查一下你的ESLint版本和插件版本是否兼容。比如eslint-plugin-react和@typescript-eslint/eslint-plugin的版本最好升级到最新稳定版。如果还不行，可以试试加上extends配置：

{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
]
}

然后再运行一下看看问题还在不在。如果还报错的话，可以发一下完整的.eslintrc配置，我再帮你看看。

2026-02-07 05:04

智慧 ☘︎ Lv1

这个问题我也遇到过很多次，大概率是 ESLint 配置没整对。你可能漏了 extends 或者 parserOptions 没配好。贴一个我正在用的配置，复制过去试试：

{

  "root": true,

  "parser": "@typescript-eslint/parser",

  "parserOptions": {

    "ecmaFeatures": {

      "jsx": true

    },

    "ecmaVersion": 2020,

    "sourceType": "module"

  },

  "plugins": ["react", "@typescript-eslint"],

  "extends": [

    "eslint:recommended",

    "plugin:react/recommended",

    "plugin:@typescript-eslint/recommended"

  ],

  "rules": {

    // 你可以在这里加一些自定义规则

  }

}

重点看 parserOptions.ecmaFeatures.jsx 这个选项，不打开 ESLint 没法识别 JSX 语法。
另外确保 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser 的版本一致，如果用了 eslint-plugin-react 最好也装对应的 @typescript-eslint/eslint-plugin-tslint。

实在不行可以加个 .eslintignore 把报错文件暂时排除，再一点点排查。

2026-02-06 08:01