Linting Angular

Following best practices is essential for the final success of any projects. Although Angular 2 is still in beta there are established practices and styles which help us create better software. Unfortunately, the process of enforcing them is manual and error-prone - through code reviews. In the talk I will demonstrate how to automatically encourage best practices and verify common style by using static code analysis with codelyzer.

Transcript

1. Linting Angular github.com/mgechev twitter.com/mgechev blog.mgechev.com
2. github.com/mgechev twitter.com/mgechev blog.mgechev.com About deprecated
3. agenda
4. – angular.io “…a list of guidelines on building Angular applications…” Angular Style Guide
5. – angular.io “…a list of guidelines on building Angular applications…” Angular Style Guide
6. Using Style Guide in your project
7. Enforcing common style • Fork the official style guide • Modify the styles according to your needs • Introduce the style guide to your team • Verify that each individual code change follows it
8. Enforcing common style • Fork the official style guide • Modify the styles according to your needs • Introduce the style guide to your team • Verify that each individual code change follows it
9. Enforcing common style • Fork the official style guide • Modify the styles according to your needs • Introduce the style guide to the rest of your team • Verify that each individual code change follows it
10. Enforcing common style • Fork the official style guide • Modify the styles according to your needs • Introduce the style guide to the rest of your team • Verify that each individual code change follows it
11. Code Review process
13. manual boring error-prone
14. introducing codelyzer
15. “Codelyzer contains set of rules that provide automatic alignment to the Angular Style Guide”
17. Why not instant feedback
19. Why it’s possible in Angular 2
20. Analyzable templates https://flic.kr/p/irHwLW
21. Angular 1 <user name="literal"> </user> <user name="expression"> </user>
22. <user name="hero.name + ' Avengers'"> </user> <user name="hero.name + ' Avengers'"> </user> Angular 1
23. <!-- name="hero.name + ' Avengers'" --> <user name="hero.name + ' Avengers'"> </user> <!-- name="Captain America Avengers" --> <user name="hero.name + ' Avengers'"> </user> Angular 1
24. <!-- name="Captain America Avengers" --> <user name="hero.name + ' Avengers'"> </user> <!-- name="hero.name + ' Avengers'" --> <user name="hero.name + ' Avengers'"> </user> Angular 1
25. <user name="literal"> </user> <user [name]="expression"> </user> Angular 2
26. <!-- name="hero.name + ' Avengers'" --> <user name="hero.name + ' Avengers'"> </user> <!-- name="Captain America Avengers" --> <user [name]="hero.name + ' Avengers'"> </user> Angular 2
27. How codelyzer Works
28. import { Component } from '@angular/core'; @Component({ selector: 'sd-home', template: `<h1>{{ 'Hello ' + name }} </h1>` }) class HomeComponent { name: string; } Typical Linter
29. import { Component } from '@angular/core'; @Component({ selector: 'sd-home', template: `<h1>{{ 'Hello ' + name }} </h1>` }) class HomeComponent { name: string; } Script class CustomHeading members decorators expression expression Component arguments properties property ObjectLiteral … name selector initializer custom- heading property name template initializer <h1>{{heading}} <h1> TypeScript AST
30. Angular has templates
31. import { Component } from '@angular/core'; @Component({ selector: 'sd-home', template: `<h1>{{ 'Hello ' + name }} </h1>` }) class HomeComponent { name: string; }
32. Script class CustomHeading members decorators … property name template initializer <h1>{{foo + bar}}<h1> … HtmlElementAst h1 HtmlTextAst {{“Hello” + name}} import { Component } from '@angular/core'; @Component({ selector: 'sd-home', template: `<h1>{{ 'Hello ' + name }} </h1>` }) class HomeComponent { name: string; } TypeScript + template ASTs
33. Angular’s templates have expressions
34. import { Component } from '@angular/core'; @Component({ selector: 'sd-home', template: `<h1>{{ 'Hello ' + name }} </h1>` }) class HomeComponent { name: string; }
35. Script class CustomHeading members decorators … property name template initializer <h1>{{foo + bar}}<h1> … HtmlElementAst h1 HtmlTextAst {{“Hello” + name}} import { Component } from '@angular/core'; @Component({ selector: 'sd-home', template: `<h1>{{ 'Hello ' + name }} </h1>` }) class HomeComponent { name: string; } + “Hello” name {{}} TypeScript + template + Angular expressions ASTs
36. codelyzer analyzes all produced ASTs based on their context
37. Based on tslint with extended parsing
38. Adoption
41. and later…
43. Available in angular-cli
44. ng2lint
45. ng2lint
46. github.com/mgechev/ codelyzer
47. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com