Explore ng2lint

[IgorMinar]

https://github.com/mgechev/ng2lint/tree/advanced

ng2lint looks interesting. we should take a look at how could we integrate it into the build chain so that developers get useful hints or build failures as they are developing their apps.

@mgechev have you thought about how ng2lint could fit into the cli?

[filipesilva]

We have a ng lint command, using tslint, but it is not part of the build chain. We can add the task onto build though, I dont foresee it being hard.

[mgechev]

We have integrated the master branch of ng2lint in angular2-seed. It contains extra tslint rules which make sure given source file follows the Community-Driven Angular 2 Style Guide.

The advanced branch is still in a prototype phase. On my roadmap for it is:

• Clean up/refactor the code, considering the blog post I wrote about static code analysis of Angular and TypeScript.
• Reuse the error reporting mechanism of tslint for the advanced branch of ng2lint, in order to provide out of the box support for text editors and IDEs.
• Integrate the advanced and the master branches together in order to allow both: check for correctness, check for following a common style.
• Integrate the advanced branch in angular2-seed in order to get feedback.
• Handle corner cases such as forwardRef, components with attached routing metadata etc.

The tasks are ordered in the sequence I'm planning to implement them. Let me know if you have any suggestions/recommendations. At this point stable are the extra tslint rules we have in the master branch.

I'd love to integrate the tool with the CLI at some point, let me know when it feels the right moment to you.

[jkuri]

@mgechev I can prepare you task for this which can then be integrated in the build process.

[mgechev]

@jkuri okay, sounds great!

[filipesilva]

@mgechev how does one use ng2lint? It is enough to just add the rules to tslint.json while having tslint and ng2lint as project dependencies?

[mgechev]

Yes, at this point you can use only the tslint rules defined in the package by including reference in tslint.json. They don't provide static analysis which ensures correctness of your Angular application in any sense but only provide hints if you're not following guidelines defined in the Angular 2 style guide.

I don't think ng2lint is ready for integration with the cli at this point. As I mentioned above, I want to make more progress on the static code analysis of templates before releasing the advanced branch than Igor is interested in.

[filipesilva]

Roger, let's wait then. On the CLI part we can definitely add it in as a part of the build process.

Maybe we can add in just tslint now and then upgrade it to also include ng2lint?

[mgechev]

Sounds like a good idea to me.

You can find the currently implemented rules here. In order to use them you only need tslint installed, but they check only for consistent style. My next goal is to provide some basic type checking of the templates' expressions.

[mgechev]

Recently I renamed the project to codelyzer. In the codelyzer branch of my fork, I added support for the Angular-specific tslint rules.

The tool is already integrated with angular2-seed and angular2-webpack-starter and has ~9k downloads for the last month. Let me know if you want me to open a PR with the changes.

PS: For the next a couple of weeks, we're planning to improve the rules with angular/angular#7492 and add template validation errors produced by compiling the components' templates offline but until then we're going to keep this version.

[filipesilva]

All for it! You can find the files generated by ng new here:

https://github.com/angular/angular-cli/tree/master/addon/ng2/blueprints/ng2/files

The whole linting logic is in a package.json script:

https://github.com/angular/angular-cli/blob/master/addon/ng2/blueprints/ng2/files/package.json#L9

I can also change these for you if you're having trouble testing it.

[mgechev]

Yes, I used them for the integration. Everything should work fine, I tested the linting in the generated by the test suit project at tmp and it worked as expected #352.

[mgechev]

#352 resolves this issue.

[filipesilva]

Closing as it is in.