How to configure ESLint, Prettier, Husky, Lint-staged into a React project with TypeScript and Tailwind CSS
Tags: javascript, webdev, react, tutorial
Published: 2022-04-28 12:52:24

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 <a href="https://github.com/ixartz/Next-js-Boilerplate" target="_blank" rel="noopener noreferrer">React Boilerplate</a> 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.

```shell
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

```shell
npm i eslint --save-dev
```

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

```shell
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:

```json
{
  "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.

```shell
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.

```shell
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:

```json
...
  "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.

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

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

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

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

```json
{
  "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.

```shell
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.

```shell
git init
```

🚀 Install Husky and Lint Staged.

```shell
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 <a href="https://github.com/okonet/lint-staged#configuration" target="_blank" rel="noopener noreferrer">all the different ways to configure lint-staged</a> 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 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>x</kbd>.

🚀 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](https://nextlessjs.com). 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

[![React SaaS Template Starter](https://creativedesignsguru.com/assets/images/themes/next-js-saas-starter-kit.jpg)](https://nextlessjs.com)