DEV Community

Cover image for ⚙️ Migrate Angular app to ESLint with Prettier, AirBnB Styleguide, Husky and lint-staged

⚙️ Migrate Angular app to ESLint with Prettier, AirBnB Styleguide, Husky and lint-staged

Bogdan Zvyagintsev on May 12, 2020

As you know, Palantir decided to deprecate TSLint and focus on the improvement of TypeScript support in ESLint in order to avoid the developing of ...
Collapse
 
makcim392 profile image
Makcim

Thank you for your guide, I've followed several guides but none seemed to help me. You've been very helpful

Collapse
 
bzvyagintsev profile image
Bogdan Zvyagintsev

I'm happy that my article is still helpful, I need to update it :)

Collapse
 
tmmschmit profile image
tmmschmit

Hi, I followed your tutorial with Angular 10, and I got an error on the first line of each files :

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src/index.html.
The extension for the file (.html) is non-standard. You should add "parserOptions.extraFileExtensions" to your config.eslint
Enter fullscreen mode Exit fullscreen mode

or

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src/app/app.component.ts.
The file must be included in at least one of the projects provided.eslint
Enter fullscreen mode Exit fullscreen mode

Any idea? Thanks!

Collapse
 
tmmschmit profile image
tmmschmit

Ok, we just have to wait :-)

github.com/angular-eslint/angular-...

Collapse
 
bzvyagintsev profile image
Bogdan Zvyagintsev

👍

Collapse
 
yohandah profile image
Yohan Dahmani

Amazing tutorial thanks Bogdan !!!! Helped me a lot trough my process.

You mention that ESLint will be out-of-the-box in future versions of Angular and sadly this is not the case !

"That being said, it’s most likely that in future the CLI will not providing a linting solution out of the box, and it will be up to the users to choose a builder similar to how it's currently done for ng deploy."
github.com/angular/angular-cli/iss...

Collapse
 
bzvyagintsev profile image
Bogdan Zvyagintsev

Thanks for your comment and link to the discussion! I think @angular-eslint will be a common choice in the future.

Collapse
 
calleufuzi profile image
Calleu Fuzi

Nice! Ty for that Tutotial. Help me a lot.

Collapse
 
bzvyagintsev profile image
Bogdan Zvyagintsev

I'm glad it helped!

Collapse
 
baluditor profile image
Baluditor

Finally a complete step by step easy to follow guide on how to achieve this. Thanks, Bogdan.

Collapse
 
bzvyagintsev profile image
Bogdan Zvyagintsev

I'm glad it helped!

Collapse
 
yaircohendev profile image
Yair Cohen

Great tutorial, definitely helped me. Thank you.

Collapse
 
bzvyagintsev profile image
Bogdan Zvyagintsev

Thanks for your comment :)

Collapse
 
omgitsshark profile image
omgitsshark

Nice! Great work!

Collapse
 
bzvyagintsev profile image
Bogdan Zvyagintsev

Thanks! 💪

Collapse
 
mayankkalbhor profile image
Mayank K

Seems lot of work and libraries we need to install to achieve this. That gives me a thought is it worth it

Collapse
 
bzvyagintsev profile image

For basic ESLint setup you can run schematics, change builder and copy ESLint config from official Angular ESLint repo.