Dean Gibson Dean Gibson - 16 days ago 10
Javascript Question

ESLint unexpected character '@' for JS decorators

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

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

Comments