ESLint unexpected '@' character for JS decorators

Question

I am trying to use decorators in my JS project, however ESLint throws an error stating that the @ character is an unexpected character.

My code is:

@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 might want to use babel-eslint , which Babel uses to analyze things that ESLint has not yet implemented (usually these are experimental functions), From README:

At the moment you will need it if you use things like class properties, decorators, types.

Used with your current eslint setup, you just need to update some configuration in .eslintrc