ESLint unexpected character '@' for JS decorators

Question

I'm trying to use decorators in my JS project, however ESLint is throwing an error stating that the @ symbol is a unexpected character.

My code:

@observable items = [];

My .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

You probably want to use babel-eslint which uses Babel to parse things that ESLint hasn't implemented yet (usually experimental features like this). From their README:

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

It is used with your current eslint setup, you just have to update some configuration in your .eslintrc

Answer 2

If you using Visual Code it will not always work. You need to add into User Settings (or Workspace Settings) following parameter: { ... "eslint.options": { "experimentalDecorators": true } ... }
Somehow this option wins anything you put into .eslintrc .

Answer 3

A quick answer:

Install a lib

npm i -D babel-eslint

Add to your .eslintrc

"parser": "babel-eslint"

Answer 4

Using babel-parser might have fixed the '@'s but caused a bunch of other warnings and errors. What I did was put all the files that used the decorator into a store folder, create an .eslintignore file and pointed to that directory.

Answer 5

If you using @babel/core , you need to install @babel/eslint-parser .

Add to your .eslintrc

parser: "@babel/eslint-parser"

Answer 6

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

    extends: ["google"],