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
        ]
    }
}

There are no decorators in ES6. – a better oliver Nov 18 '16 at 13:36 — a better oliver, Nov 18 '16 at 13:36

Matt · Accepted Answer · 2016-11-18T13:38:19.863

14

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

edited Nov 18 '16 at 13:38

answered Nov 18 '16 at 13:24

Matt

43,482
6
101
102

Thanks Matt, I can't make out from that link though if installing babel-eslint should replace my current 'eslint' or do I use it in conjunction with? – Nov 18 '16 at 13:26
2

@DeanGibson it's in conjuction. The README has setup instructions. Check out the eslintrc part (`"parser": "babel-eslint",`) – Matt Nov 18 '16 at 13:28
2

This quote from babel-eslint's README.md would maybe be more to the point than the eslint issue : "At the moment, you'll need it if you use stuff like class properties, decorators, types." – Aaron Nov 18 '16 at 13:31
How can we fix this for @typescript-eslint/parser – dchhetri May 21 '23 at 06:17

score 11 · Answer 2 · answered Nov 25 '18 at 21:22

11

A quick answer:

Install a lib

npm i -D babel-eslint

Add to your .eslintrc

"parser": "babel-eslint"

answered Nov 25 '18 at 21:22

bora89

3,476
1
25
16

score 4 · Answer 3 · answered Jun 06 '18 at 19:47

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 .

score 1 · Answer 4 · edited Aug 12 '21 at 14:08

1

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

Add to your .eslintrc

parser: "@babel/eslint-parser"

edited Aug 12 '21 at 14:08

İsmail Y.

3,579
5
21
29

answered Aug 12 '21 at 02:40

knight Luo

19
1

score -1 · Answer 5 · answered Aug 06 '21 at 18:34

-1

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.

answered Aug 06 '21 at 18:34

1337

77
11

score -2 · Answer 6 · answered Nov 16 '21 at 15:50

-2

To fix this you need to choose google as your style guide as follow:

    extends: ["google"],

answered Nov 16 '21 at 15:50

Gnopor

587
9
16

ESLint unexpected character '@' for JS decorators

6 Answers6

Linked