How to configure ESLint, Prettier, Husky, Lint-staged into a React project with TypeScript and Tailwind CSS

As a software developer, you have preferences and habits that you want to follow when writing your code. You want to be able to write code that is readable, maintainable, and scalable.

When you are working in a team with other developers, everybody has their own coding standards and they can be different. It makes the code difficult to read and maintain. How do you settle the differences? You will have to reach a compromise and pick a preferred style for that project.

Tools such as ESLint, Prettier, Husky, and Lint-staged can help enforce a coding and formatting style. It also spots errors rapidly in your JS application. These tools keep developers focused on solving problems rather than debating which formatting style is best. They also help you to write code unified code across all your projects.

ESLint is a code analysis tool, or linter, for identifying and reporting on patterns in JS. It's a pluggable and configurable tool that finds and fixes problems in your JavaScript or Node.js code.

Prettier is an opinionated code formatter that formats your code according to a set of rules. It ensures that your programs follow a consistent coding style.

Adding ESLint, Prettier, and Husky to your React project will avoid mistakes in your code by making sure that your code follows best practices. It also helps developers write a consistent code style.

For your information, I'm the author of a boilerplate with ESLint, Prettier, Husky, and Lint-staged already configured and ready to use. If you don't want to lose your time, you can check out my React Boilerplate on GitHub.

In this article, I will guide you through how to configure these tools stated above.

Empty Project Setup

You will need to create a TypeScript React project using create-next-app. Then, you also need to install and configure all the necessary NPM packages.

React & TypeScript Configuration

TypeScript is an open-source typed programming language developed by Microsoft. It builds on top of JavaScript with a strict syntax and type checking.

🚀 Open your favorite terminal

🚀 Run npx create-next-app@latest --ts to create a TypeScript Next.js project.

npx create-next-app@latest --ts

ESLint Configuration

ESLint is highly configurable and can be configured to enforce a specific coding style. You can set up ESLint rules one by one or you can use a preset.

In this tutorial, we will use the Airbnb style guide for TypeScript: eslint-config-airbnb-typescript.

🚀 Add ESLint to the project dependency list

npm i eslint --save-dev

🚀 Install Airbnb ESLint style guide dependencies and its peer dependencies.

npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

🚀 Create and configure the .eslintrc file by adding Airbnb and ESLint configuration. We also need to indicate to ESLint that we are using TypeScript. We'll also add next/core-web-vitals to use a stricter ESLint configuration for Next.js:

{
  "extends": ["next/core-web-vitals", "airbnb", "airbnb-typescript"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

🚀 Add Prettier, eslint-plugin-prettier, eslint-plugin-prettier to the project's dependency.

npm install  prettier eslint-plugin-prettier eslint-config-prettier --save-dev

These three packages load Prettier into ESLint. ESLint will automatically highlight formatting issues in your code based on Prettier rules.

🚀 Install the eslint-plugin-unused-imports plugin, it helps you to find unused imports.

npm install eslint-plugin-unused-imports --save-dev

🚀 Add unused-imports to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

...
  "plugins": ["unused-imports"]
...

🚀 Install eslint-plugin-tailwindcss to lint Tailwind CSS class. It contains rules enforcing best practices and consistency when working with Tailwind CSS.

npm i eslint-plugin-tailwindcss --save-dev

🚀 Add tailwindcss to the plugins section of your .eslintrc configuration file:

{
  "plugins": ["unused-imports", "tailwindcss"]
}

🚀 Then, you need to add all the recommended rules from the Tailwind CSS plugin:

{
  "extends": [..., "plugin:tailwindcss/recommended"]
}

🚀 Lint all the .js, .jsx, .ts, and .tsx files within the project folder. After running the command below, it'll display all the errors you need to address.

npx eslint . --ext .js,.jsx,.ts,.tsx

🚀 node_modules is ignored by ESLint in the default configuration. You can also add more files to ignore by creating a .eslintignore file.

Husky and Lint-staged Setup

Husky is a JavaScript package that allows you to run some code during different stages of the git workflow. On the other hand, Lint-staged is a JavaScript package that helps you to run linter on files that will be committed on Git.

🚀 Initialize Git in the project directory.

git init

🚀 Install Husky and Lint Staged.

npx mrm@2 lint-staged

The code above command will install and configure Husky and Lint-staged. Add lint-staged and husky in the package.json file. It also creates a .husky folder.

🚀 Optional: You can create a lint-staged.config.js file that holds all the Lint-staged configuration. Check out all the different ways to configure lint-staged if you don't want Lint-stage configuration in your package.json.

VSCode ESLint & Prettier Configuration

Visual Studio Code provides ESLint and Prettier extensions that you can install. These extensions give you access to all functionalities discussed in this tutorial.

To install these extensions:

🚀 Open your VS Code

🚀 Click on the Extensions icon on the sidebar or run the command Ctrl + Shift + x.

🚀 Search for "dbaeumer.vscode-eslint" to install ESLint and "esbenp.prettier-vscode" for Prettier.

🚀 Close and re-open VSCode to use the newly installed extensions.

Conclusion

Integrating ESLint, Prettier, Husky, and Lint-staged in a TypeScript React project reduce conflicts based on coding and formatting styles. It helps developers to focus on writing high-quality code.

If you are working on a project, it's highly recommended to have these tools set up first. You can avoid making mistakes in your code: it makes your code more readable with a consistent coding style.

If you're building your own SaaS application and want to have the same Developer experience, I've made a React SaaS Starter kit. It includes by default ESLint, Prettier, Husky, and Lint-staged already configured with TypeScript for you. So, you can start working on your SaaS project right away instead of losing your time with boring configurations.

In Nextless.js, you'll also find everything you need to build faster your SaaS:

• Email & Social auth
• Subscription payment
• Team support
• Landing page & Dashboard
• Form & Error management
• Deployed on AWS