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