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.
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.
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.
🚀 Open your favorite terminal
npx create-next-app@latest --ts to create a TypeScript Next.js project.
npx create-next-app@latest --ts
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:
🚀 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"],
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
unused-imports to the plugins section of your
.eslintrc configuration file. You can omit the
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
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
🚀 Initialize Git in the project directory.
🚀 Install Husky and Lint Staged.
npx mrm@2 lint-staged
The code above command will install and configure Husky and Lint-staged. Add
husky in the
package.json file. It also creates a
🚀 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
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.
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: