JS 装饰器的 ESLint 意外字符“@”答案

【问题标题】：ESLint unexpected character '@' for JS decoratorsJS 装饰器的 ESLint 意外字符“@”
【发布时间】：2026-01-24 14:55:01
【问题描述】：

我试图在我的 JS 项目中使用装饰器，但是 ESLint 抛出一个错误，指出 @ 符号是一个意外字符。

我的代码：

@observable items = [];

我的 .eslintrc：

{
    "parserOptions": {
            "ecmaVersion": 6,
            "ecmaFeatures": {
                "jsx": true
            },
            "sourceType": "module"
    },
    "env": {
            "browser": true,
            "node": true,
            "es6": false
    },
    "ecmaFeatures": {
            "modules": true
    },
    "rules": {
        "strict": [
            2,
            "global"
        ],
        "quotes": [
            2,
            "single"
        ],
        "indent": [
            2,
            4
        ],
        "eqeqeq": [
            2,
            "smart"
        ],
        "semi": [
            2,
            "always"
        ],
        "max-depth": [
            2,
            4
        ],
        "max-statements": [
            2,
            15
        ],
        "complexity": [
            2,
            5
        ]
    }
}

【问题讨论】：

ES6 中没有装饰器。

标签： javascript eslint ecmascript-next

【解决方案1】：

您可能想使用babel-eslint，它使用 Babel 来解析 ESLint 尚未实现的东西（通常是这样的实验性功能）。从他们的自述文件中：

目前，如果您使用类属性、装饰器、类型等内容，您将需要它。

它与您当前的 eslint 设置一起使用，您只需更新您的 .eslintrc 中的一些配置

【讨论】：

谢谢马特，我无法从那个链接中找出答案，但如果安装 babel-eslint 应该替换我当前的 'eslint' 或者我应该结合使用它吗？
@DeanGibson 它在结合。自述文件有设置说明。查看 eslintrc 部分 ("parser": "babel-eslint",)
babel-eslint 的 README.md 中的这句话可能比 eslint 问题更重要：“目前，如果您使用类属性、装饰器、类型等内容，您将需要它。”

【解决方案2】：

如果您使用可视代码，它并不总是有效。您需要在用户设置（或工作区设置）中添加以下参数： { ... "eslint.options": { "experimentalDecorators": true } ... }
不知何故，这个选项会赢得你放入 .eslintrc 的任何东西。

【讨论】：

【解决方案3】：

快速回答：

安装一个库

npm i -D babel-eslint

添加到您的 .eslintrc

"parser": "babel-eslint"

【讨论】：

【解决方案4】：

使用babel-parser 可能已经修复了'@'，但会导致许多其他警告和错误。我所做的是将使用装饰器的所有文件放入存储文件夹中，创建一个.eslintignore 文件并指向该目录。

【讨论】：

【解决方案5】：

如果您使用@babel/core，则需要安装@babel/eslint-parser。

添加到您的.eslintrc

parser: "@babel/eslint-parser"

【讨论】：

【解决方案6】：

要解决此问题，您需要选择 google 作为您的风格指南，如下所示：

    extends: ["google"],

【讨论】：