@Property decorators throw "Parsing error: Unexpected token"

[evanplaice]

I'm using Angular2+ES6 which requires both @Class and @Property decorators.

With the parser set to 'babel-eslint' the class decorators aren't throwing any style errors. Property decorators (ex @input, @Inject) are.

FYI. I'm using Traceur with annotations enabled, so this could just be a shortcoming of the Babel parser.

[bcomnes]

Can you please provide a code example thats causing the issue?

[bcomnes]

You mentioned angular 2, are you trying to run typescript through standard?

[evanplaice]

Of course, here you go.

I'm running Traceur (ie ES6 not Typescript) with the following config:

  traceurOptions: {
    "annotations": true,
    "types": true,
    "memberVariables": true
  },

Here's a sample:

@Component({
  selector: 'designs',
  providers: [ DesignService ],
  injectables: [ DesignService ]
})
@View({
  templateUrl: 'app/components/designs/designs.html',
  directives: [ DesignComponent ]
})
export class DesignsComponent {
  constructor (@Inject(DesignService) designService) {
    // console.log('designs');

    // fetch the design data
    this.designs = designService.getDesigns();
  }
}

In this case the @Inject is the cause of the error. @Component and @View don't throw errors.

[JeremyBYU]

Same issue using es6 Decorators with the atom standardjs library.

To be more specific I am using react-mixin package

Maybe this issue from eslint issues

[rstacruz]

Use babel-eslint to enable ES7 language constructs.

https://github.com/feross/standard#can-i-use-a-custom-js-parser-for-bleeding-edge-es6-or-es7-support

[evanplaice]

@rstacruz I already had babel-eslint enabled. This is a separate issue.

It looks like types and member variables may be a Typescript specific (read non-standard) thing. The same is probably true for react-mixins.

The ES7 spec includes property decorators, but in a different format.

[dhax]

I'm having the same problem right now using aurelia framework and after searching issues here and for babel-eslint I can't figure out where the actual problem lies in. Linting breaks with Parsing error: Unexpected token Illegal for the '@'

import {Router} from 'aurelia-router';

@inject(Router)
export class App {
  constructor(router) {
    this.router = router;
  }
}

I have babel-eslint set as standard parser in package.json. Do I need to add additional settings maybe?

[AndreiBelokopytov]

Same problem for me: "Parsing error: Unexpected character '@'". I am using React and React DnD with ES7 decorators style.

@DragSource(DnDTypes.CARD, cardSource, collectSource)
@DropTarget(DnDTypes.CARD, cardTarget, collectTarget)
export default class TaskItemDnD extends React.Component {
  componentDidMount () {
    // Use empty image as a drag preview so browsers don't draw it
    // and we can draw whatever we want on the custom drag layer instead.
    this.props.connectDragPreview(getEmptyImage(), {
      // IE fallback: specify that we'd rather screenshot the node
      // when it already knows it's being dragged so we can hide it with CSS.
      captureDraggingState: true
    })
  }
  render () {
    const {connectDragSource, connectDropTarget, isDragging, task} = this.props
    return connectDropTarget(
      connectDragSource(
        <div>
          <TaskItem task={task} />
        </div>
      )
    )
  }
}

[bcomnes]

@AndreiBelokopytov http://standardjs.com/index.html#can-i-use-a-custom-js-parser-for-bleeding-edge-es-next-support Might solve that for you.

[AndreiBelokopytov]

@bcomnes thanks, your solution works for me.

[schtauffen]

@bcomnes @AndreiBelokopytov that section seems to have been removed.
Do you recall the fix? I've tried just about everything

[schtauffen]

I was able to find it using the way back machine.

Can I use a custom JS parser for bleeding-edge ES next support?

Before you use a custom parser, consider whether the added complexity in your build process is worth it.

standard supports custom JS parsers. To use a custom parser, install it from npm (example: npm install >babel-eslint) and add this to your package.json:

{
"standard":{
"parser":"babel-eslint"
}
}
If you're using standard globally (you installed it with -g), then you also need to install babel-eslint >globally with npm install babel-eslint -g.

[Rachomir]

does anyone found a solution? I am also receiving

error 'somethingWithDecoratort' is defined but never used no-unused-vars