Automated Angular 2 Style Checking with Codelyzer

Automated Angular 2 Style Checking with Codelyzer

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

May 06, 2016
Tweet

Transcript

  1. Automated Angular 2 Style Checking with Codelyzer github.com/mgechev twitter.com/mgechev blog.mgechev.com

  2. None
  3. None
  4. None
  5. agenda

  6. story time

  7. None
  8. None
  9. None
  10. – angular.io “…a list of guidelines on building Angular applications…”

    Angular style guide
  11. – angular.io Angular style guide “…a list of guidelines on

    building Angular applications…”
  12. Using style guide in your project

  13. 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
  14. 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
  15. 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
  16. 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
  17. Code review process

  18. None
  19. manual boring error-prone

  20. introducing codelyzer

  21. codelyzer “codelyzer is a project which aims to enforce common

    style, verify quality of your program”
  22. None
  23. Why not instant feedback

  24. None
  25. Currently based on tslint

  26. Adoption

  27. None
  28. None
  29. and later…

  30. None
  31. Available in angular-cli

  32. ng2lint

  33. ng2lint

  34. github.com/mgechev/ codelyzer

  35. None
  36. Not only linting!

  37. Future plans • Advanced static code analysis • Analysis of

    templates • Auto-correct suggestions • Analysis of lazy-loading boundaries • More!
  38. Future plans • Advanced static code analysis • Analysis of

    templates • Auto-correct suggestions • Analysis of lazy-loading boundaries • More!
  39. Future plans • Advanced static code analysis • Analysis of

    templates • Auto-correct suggestions • Analysis of lazy-loading boundaries • More!
  40. Future plans • Advanced static code analysis • Analysis of

    templates • Auto-correct suggestions • Analysis of lazy-loading boundaries • More!
  41. Future plans • Advanced static code analysis • Analysis of

    templates • Auto-correct suggestions • Analysis of lazy-loading boundaries • More!
  42. Future plans • Advanced static code analysis • Analysis of

    templates • Auto-correct suggestions • Analysis of lazy-loading boundaries • More!
  43. bit.ly/codelyzer

  44. NGCON 25% off

  45. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com