Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Minko Gechev

October 13, 2016
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. <!-- name="hero.name + ' Avengers'" --> <user name="hero.name + '

    Avengers'"> </user> <!-- name="Captain America Avengers" --> <user name="hero.name + ' Avengers'"> </user> Angular 1
  6. <!-- name="Captain America Avengers" --> <user name="hero.name + ' Avengers'">

    </user> <!-- name="hero.name + ' Avengers'" --> <user name="hero.name + ' Avengers'"> </user> Angular 1
  7. <!-- name="hero.name + ' Avengers'" --> <user name="hero.name + '

    Avengers'"> </user> <!-- name="Captain America Avengers" --> <user [name]="hero.name + ' Avengers'"> </user> Angular 2
  8. import { Component } from '@angular/core'; @Component({ selector: 'sd-home', template:

    `<h1>{{ 'Hello ' + name }} </h1>` }) class HomeComponent { name: string; } Typical Linter
  9. 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
  10. import { Component } from '@angular/core'; @Component({ selector: 'sd-home', template:

    `<h1>{{ 'Hello ' + name }} </h1>` }) class HomeComponent { name: string; }
  11. 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
  12. import { Component } from '@angular/core'; @Component({ selector: 'sd-home', template:

    `<h1>{{ 'Hello ' + name }} </h1>` }) class HomeComponent { name: string; }
  13. 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