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.

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…