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.
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react husky lint-staged prettier typescript
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
.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.
This is the
Here is the
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.
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… 😂