Quick Start with Angular and ESLint

In order to create a brand new Angular CLI workspace which uses ESLint instead of TSLint and Codelyzer, simply run the following commands:

# Install the Angular CLI and @angular-eslint/schematics globally however you want (e.g. npm, yarn, volta etc)

npm i -g @angular/cli @angular-devkit/{core,schematics} @angular-eslint/schematics

# Create a new Angular CLI workspace using the @angular-eslint/schematics collection (instead of the default)

ng new --collection=@angular-eslint/schematics

After you follow the interactive prompts the Angular CLI gives you, you have now created a TSLint and Codelyzer free workspace with ng lint all set up and ready to lint your source code and HTML templates using ESLint! 🚀

Read on to find out more about how and why they work.

My journey creating typescript-eslint and angular-eslint

Not many people know that when I originally created typescript-eslint, the tooling which replaced TSLint as the de-facto linting solution for TypeScript code, I actually did so from the point of view of wanting to lint my Angular (“Angular 2” as it was known at the time) code using the same rules, plugins and config I had used for my AngularJS code back in the day.

I am very proud to announce that my complementary project angular-eslint, which sits on top of typescript-eslint and adds some Angular specific capabilities such as HTML template linting, is now ready for everyone to use.

Starting an Angular project from scratch without TSLint

In Angular v11, the current major version at the time of writing, the Angular CLI still ships with default generators (a.k.a “schematics”) for TSLint and Codelyzer for linting your TypeScript source code using ng lint.

This means that if we just run the ng new command with no arguments to create a new Angular CLI workspace, it will create TSLint configuration, install TSLint and Codelyzer etc, and we would then have to remove all of that after the fact.

Fortunately, there is an extensibility mechanism available to us as part of that ng new command, namely the --collection option. This allows us to point the Angular CLI at a different so called “collection” of schematics for it to use instead of its own default ones.

In angular-eslint we make just such a collection of schematics available and they handle not only running the default Angular CLI schematics behind the scenes, but also performing some adjustments and clean up in order to start you off with just ESLint,typescript-eslint and angular-eslint, removing TSLint and Codelyzer completely.

Here is a complete example (you could change the installation step to your preferred setup) set of commands needed to take advantage of the automated tooling (as you may have already seen in the Quick Start section above):

# Install the Angular CLI and @angular-eslint/schematics globally however you want (e.g. npm, yarn, volta etc)

npm i -g @angular/cli @angular-devkit/{core,schematics} @angular-eslint/schematics

# Create a new Angular CLI workspace using the @angular-eslint/schematics collection (instead of the default)

ng new --collection=@angular-eslint/schematics

When you utilise the @angular-eslint/schematics during workspace creation we do a number of things, such as update your angular.json to configure ng lint to use our ESLint builder instead of TSLint, update your package.json to add all the relevant ESLint dependencies and remove the TSLint ones, and add a recommended starting ESLint configuration for you.

To learn more and keep up to date with developments, or provide any feedback, please head over to the repo: https://github.com/angular-eslint/angular-eslint

If you interested in learning how you can convert your existing projects from TSLint + Codelyzer to angular-eslint, you can register your email on the left to be notified when the follow up blog post is ready.

Special Thanks

In this post I also wanted to give a special shout out to Brad Zacher who has been heroically maintaining typescript-eslint without any significant support from me during this period whilst I have been building up angular-eslint. Thank you, Brad. I am excited to kick on in 2021 and balance my time across all these cool projects to empower my fellow developers.

Onwards!