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

Posted 2023-02-22

【中文标题】JS 装饰器的 ESLint 意外字符“@”

【英文标题】：ESLint unexpected character '@' for JS decorators

【发布时间】：2017-04-02 08:53:27

【问题描述】：

我试图在我的 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 中没有装饰器。

【参考方案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"],