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.

Transcript

1. Automated Angular 2 Style Checking with Codelyzer github.com/mgechev twitter.com/mgechev blog.mgechev.com
5. agenda
6. story time
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
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”
23. Why not instant feedback
25. Currently based on tslint
26. Adoption
29. and later…
31. Available in angular-cli
32. ng2lint
33. ng2lint
34. github.com/mgechev/ codelyzer
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