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

Salonika

There are no decorators in ES6. – Maxon

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

Rolanda

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? – Salonika

@DeanGibson it's in conjuction. The README has setup instructions. Check out the eslintrc part ("parser": "babel-eslint",) – Rolanda

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." – Shaman

How can we fix this for @typescript-eslint/parser – Monetta

Answer 2

A quick answer:

Install a lib

npm i -D babel-eslint

Add to your .eslintrc

"parser": "babel-eslint"

Wonderment

Answer 3

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 .

Dissyllable

Answer 4

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

Add to your .eslintrc

parser: "@babel/eslint-parser"

Requiem

Answer 5

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.

Haug

Answer 6

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

    extends: ["google"],

Waddington