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

Question

我试图在我的 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
        ]
    }
}

Answer 1

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

At the moment, you'll need it if you use stuff like class properties, decorators, types.

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

中的一些配置

Answer 2

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

Answer 3

快速回答：

安装一个库

npm i -D babel-eslint

添加到您的 .eslintrc

"parser": "babel-eslint"

Answer 4

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

Answer 5

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

添加到您的.eslintrc

parser: "@babel/eslint-parser"

Answer 6

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

    extends: ["google"],

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

ESLint unexpected character '@' for JS decorators

javascript

eslint

ecmascript-next