ESLint, TypeScript, & Prettier Setup

Looking for a great (remote only) React Dev? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

Often, the hardest part of using a package is configuring it and making sure it plays nice with all the other packages that work in the same domain.

Naturally, there’s significant overlap between ESLint, Prettier, and TypeScript, and if you haven’t set it up in the right way, you’ll soon be gazing in a bovine trance at the “Great Wall of Errors”.

In this article, we’ll go over installation and configuration, but we’re not going to do it step-by-step. I just find that way exhausting. You’re not looking for how to make sure each atomic piece works for a niche situation — you just want all of it to work together. So there’ll be a lot of copy/paste configuration files. It’s just easier.

You’ll notice that I’m also adding in husky and lint-staged. Husky makes sure that the ESLint checks all pass before it allows you to make a commit and Lint-Staged optimizes the ESLint checks so that only files that have changed are linted. Lint-Staged really shines in larger projects where there are tens or hundreds of thousands of lines of code — checking them all every single time you make a commit is wasteful and time-consuming.

Here’s a link to a super simple coding project where all of the packages are set up: https://github.com/bengrunfeld/ollie-form

ESLint Config

Here’s my .eslintrc.js file. The reason I chose to go with the .js file extension is because this way you can have comments in your file, which is really helpful. We can be expected to remember what most commands do in our primary programming languages, but committing to rote memory every config option and its alternatives is bat-shit crazy and insane. Comments in config files, please.

TypeScript Config

This is the tsconfig.json file.

Prettier Config

Here is the .prettierrc file.

Husky & Lint-Staged Config in Package.json

I’m keeping all the other project config in this package.json file example because it gets confusing if only half of it is there, and honestly I have nothing to hide.

The main point is: have a look at how ESLint is called in the scripts section, and also have a look at how Husky and Lint-Staged are configured.

Conclusion

And there you have it! Instead of having to sort through endless articles and posts about how to set all of these up to play nice together (which is what I had to do), instead you have it all in one convenient place.

FYI — copying & pasting config often leads to something being accidentally left out. If I missed anything, please let me know in the comments below and I’ll update the article.

Did you enjoy this article? If so, please hit the clap button so that prospective employers will think I’m actually smart… 😂

Happy coding!

I’m a Front End Engineer who loves React, NextJS, and GraphQL. Need a REMOTE React Developer? Contact me at: https://www.linkedin.com/in/bengrunfeld/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store