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

A quick answer:

Install a lib

npm i -D babel-eslint

Add to your .eslintrc

"parser": "babel-eslint"

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 .