🔰 Adding Eslint with Prettier and Husky to project

Intro

Setup Eslint, Prettier, Husky for real-time code formatting, quality checks post commits, boosting dev efficiency.

Overview of Eslint, Prettier, and Husky

If you want to know the all course concepts, technologies and understand what kind of Node and npm versions you need, check the initial lesson - Course overview.

If you already read this article - jump into Gatsby5 | Tailwind | TypeScript | Cypress | jest and RTL template and check commits to understand the progress.

In previous lesson - 🌟 Using Gatsby CLI to setup project, we created our basic project. Now, it's time to add Eslint, Prettier and Husky. But before, we need to understand what they are for.

Eslint

Static code analysis tool for JS ecosystem. It helps developers find and fix problems in their code by identifying patterns that do not match coding standards and best practices. In simple words - you have a configuration file, Eslint takes this config and checks your code for following defined standards.

In addition, you have an IDE extension that verifies these rules in real time and prompts you with warnings. Usually, it's used in real-time development and for checking during committing code or on pipelines.

I'm using following Eslint IDE extension.

Here is the link for Eslint documentation.

Prettier

Code formatting tool that helps developers maintain a consistent and aesthetically pleasing code style across their projects. While ESLint primarily focuses on code quality and coding standards, Prettier is specifically designed for code formatting.

So, in simple words - it will make every formatting command work in the same way based on shared config in the repository to avoid different formatting between developers.

With Prettier, there is a similar situation to Eslint, as a developer, you have an extension or you may run it via dedicated command.

Here is the Prettier extension to make it work in real time.

Check the Prettier documentation for more.

Husky

Sets up Git hooks. Git hooks are scripts that run at various points in the Git workflow, allowing you to automate tasks or enforce certain processes when you interact with a Git repository. Husky simplifies the setup and management of these hooks.

So, in simple words - it will execute any script that you want when you commit, push, or in any other phase you want which is connected with Git workflow.

Here is the Husky documentation to check.

Installing necessary dev dependencies

We'll start with installing the above-mentioned technologies. Open the project and type in your IDE terminal the following command: npm i --save-dev husky eslint prettier.

Now, let's install plugins that will define Eslint rules - I will use the rules that I'm using always in my projects. Type npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-standard eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-n eslint-plugin-promise eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks --save-dev .

@typescript-eslint/eslint-plugin - A package for TypeScript-specific ESLint rules.

@typescript-eslint/parser - A parser for ESLint that supports TypeScript syntax.

eslint-config-prettier - A configuration that disables ESLint rules that conflict with Prettier.

eslint-config-standard - A set of ESLint rules for maintaining consistent code style.

eslint-import-resolver-typescript - A resolver for ESLint that helps with TypeScript module resolution.

eslint-plugin-import - A plugin for ESLint that enforces rules related to import statements.

eslint-plugin-jsx-a11y - A plugin for ESLint that checks accessibility rules for JSX elements.

eslint-plugin-n - A plugin for ESLint that helps with naming conventions.

eslint-plugin-promise - A plugin for ESLint that enforces best practices for JavaScript Promises.

eslint-plugin-prettier - Integrates Prettier with ESLint to automatically format code.

eslint-plugin-react - A plugin for ESLint that provides rules for React.

eslint-plugin-react-hooks - A plugin for ESLint with rules specific to React Hooks.

Ok, so your package.json now should have following changes:

Adding configuration files

We need to add .eslintrc in the root directory with the following setup:

It's time for Prettier! In the root directory add the following .prettierrc file:

Make sure that you have installed the required IDE extensions for Eslint and Prettier extension.

Now, when we open our IDE with code we'll be able to verify and format our code in real-time. See how it works:

I pressed Ctrl + P to open Visual Studio input and then I picked commands to apply. As you saw, we automatically formatted the code and applied the Eslint rules - we've replaced '' with ``.

Adding scripts to format all files in one go

Doing formatting manually is a pain in the ass... So, we can add script aliases to package.json and then we'll be able to format/fix all files with one command.

The lint alias will just prepare a check with Eslint and Prettier rules for the whole project.

The format alias will trigger only Prettier formatting for project code.

The lint:fix will run all formatting and rules checks, and if the tool is able to fix them, it will apply fixes, if not - there error will be displayed and you need to improve it manually.

Check how it fixes all problems:

Let's add Husky!

We've already installed Husky library in the previous steps. We just need a config. This config may be automatically generated - the lib provides a command for that. Type npx husky-init. It will do the following changes in your code automatically:

Add postinstall alias to package.json - it will run Husky preparation when someone finishes npm i process. Remember, that files under .husky/_ directory will be not included in commits due to .gitignore file which is there.

In addition, I renamed prepare to prepare:husky - for me prepare it's too generic name...

Add the following changes to pre-commit.sh file and we have everything 👌!

The first line is known as a shebang, and it specifies the interpreter to be used for this script.

The third executes the husky.sh script located in the _/ directory relative to the directory where this script is located. The $(dirname -- "$0") part calculates the directory of the current script, and then _/husky.sh is appended to that directory to form the full path to the husky.sh script.

Next, we have simple log statement via echo command.

Last but not least is our command from package.json alias to execute - runs format and linter fix.

At the end, we are automatically adding all auto-fixed files to our commit with git add .

Let's test it. Just try to add some commit and make sure that we have broken Eslint or Prettier rules - watch the GIF:

Small tip: these checks may be frustrating to work with if you want to check something - you're doing POC for example, to skip them you can just add --no-verify at the end of commit command - git commit -m "My commit without checks" --no-verify.

The result

To get current result jump into Gatsby5 | Tailwind | TypeScript | Cypress | jest and RTL template and check commits to understand the progress.

Conclusions and next steps

We've really nice template to start our next projects. However, there is still a lot of stuff to improve. We've just configured Eslint, Prettier, and Husky, but we need more improvements to make this template bulletproof.

In the next article, we'll set up a Tailwind. Go to 🌟 Adding Tailwind to Gatsby project lesson to check.