Add EsLint to existing Angular Project and Configure WebStorm

So as Angular CLI no longer generate new project with deprecated tslint, after we create new one we need to add linting manually.

For that we are going to use a library called angular-eslint, the process is as easy as just using

ng add @angular-eslint/schematics

After that we will have .eslint in the app root directory, so we will be able to enjoy keeping the quality of the code.

Add it to IDE

To enable ESLint on the IDE we should do some configurations on the IDE

WebStorm

Inside the IDE press ctrl + alt + s to open settings, head to Language & Frameworks > JavaScript > Code Quality Tools > ESLint

If it is disabled, you can enable it by setting it to Automatic or Manual ESLint configuration, which I prefer the manual config as we can use the field ESLint package to introduce .eslint to the IDE.

VSCODE

Extension
ESLint + VSCode

Hope you like it,
Thank you for reading