Codelyzer for static code analysis of Angular TypeScript projects

“Programs, like people, get old. We can’t prevent aging, but we can understand its causes, limit its effects and reverse some of the damage.” The same story is with Angular. Let’s understand together how the new Codelyzer works. Meet Codelyzer for static code analysis of Angular TypeScript projects.

Codelyzer is a set of tslint rules for static code analysis of Angular TypeScript projects. You can run the static code analyzer over web apps, NativeScript, Ionic. Angular CLI has support for codelyzer. In order to validate your code with CLI and the custom Angular specific rules use:

ng new codelyzer
ng lint

Remember that by default all components are aligned with the style guide so you won’t see any errors in the console.

To run TSLint with this setup you can use one of the following alternatives:

1. Install codelyzer globally npm install -g codelyzer
2. Run TSLint from a package.json script by adding a script like tslint . to your package.json
3. Then run npm run lint
4. Next, you can create a component file in the same directory with name component.ts
5. You can execute all the rules against your code with tslint

Codelyzer supports any template and style language by custom hooks. If you’re using Sass, for example, you can allow codelyzer to analyze your styles by creating a file .codelyzer.js in the root of your project.

Feel free to check how it works here.

Meet Angular vs React vs Vue battle with pros and cons for all of them. Self-education rules!