Parser cannot parse inside decoration syntax

[okunokentaro]

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

  1:9  warning  'NgModule' is defined but never used       no-unused-vars
  2:9  warning  'BrowserModule' is defined but never used  no-unused-vars
  3:9  warning  'AppComponent' is defined but never used   no-unused-vars

I'm using in [email protected] and [email protected]. typescript-eslint-parser cannot perse the decorators syntax and inside the @NgModule() argument object. It was displayed no-unused-vars in spite of actually it's using inside argument.

[nzakas]

It looks like it is being parsed fine, it's just triggering linting errors. This is expected right now because ESLint doesn't understand decorator semantics. I'll leave this open to track, but the fix wont be in the parser.

[okunokentaro]

I see, thank you. I expect in the future.

[mysticatea]

FYI: babel-eslint parser addresses this problem by monkey patchings to escope.

• https://github.com/babel/babel-eslint/blob/master/index.js#L232
• https://github.com/babel/babel-eslint/blob/master/index.js#L260

[nzakas]

Yeah, there's no way we are going to do that here. :)

[nzakas]

Actually, it looks like we aren't even attaching the decorators into the AST. @JamesHenry do you have time to look into that?

[JamesHenry]

I actually thought about this for a bit after Alex submitted his issue :) I could not find any reference to ESTree or Flow capturing decorators though. Shall I go for whatever the TypeScript vernacular is for now?

[JamesHenry]

I have opened up a new issue to track adding decorators to the final AST: #63

[JamesHenry]

@nzakas Just to confirm, even now that we have added the class decorators to the AST, the no-unused-var errors are still present.

I guess this will be solved in the plugin?

[nzakas]

Yes, that's behavior is expected because escope doesn't know how to handle decorators.

[JamesHenry]

Have you had any thoughts about how we might address that for this case? I am very happy to work on a fix for this, but so far it's not clear to me how/where this will be tackled.

[nzakas]

In the short-term, we can probably add a rule in eslint-plugin-typescript that manually marks the identifier as used. eslint-plugin-react had to do something similar for some JSX stuff: https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/jsx-uses-vars.js

[JamesHenry]

I am going to close this as it is neither a bug, nor a feature that relates to this project specifically.

To summarise:

TypeScript decorator syntax is fully supported by this parser, but there is not yet a way for the ESLint core rule no-unused-vars to know when they have actually been used.

This detection mechanism will be implemented in the complementary project eslint-plugin-typescript and you can track the progress here: bradzacher/eslint-plugin-typescript#2