Linting Angular

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.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

October 13, 2016
Tweet

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

  12. None
  13. manual boring error-prone

  14. introducing codelyzer

  15. “Codelyzer contains set of rules that provide automatic alignment to

    the Angular Style Guide”
  16. None
  17. Why not instant feedback

  18. None
  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

  39. None
  40. None
  41. and later…

  42. None
  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