How to setup prettier, lint-staged and husky script

SamBuilds — Sun, 21 Aug 2022 23:17:02 +0000

In this tutorial, I will teach you how to manually set up prettier formatter for your project. Prettier is a linter.

So what is a linter?
A Linter, simply put, is an automated tool for checking of your code for style errors. This could go a long way in helping track logical errors in your program.

Prettier formatter, which is a linter, as we earlier stated, enforces a consistent format or style when writing code. Hence, being on a team of developers, code remains consistent, and much less conflicting.

To get started, first, we create our react project by opening our command terminal. If you are on windows, to open the command terminal, go to search bar and type "cmd". You should see the command prompt option. Open it. Now, let us set up a new react project:

npx create-react-app test-app

This will create react application for you. Once it is done, then you move into the newly created react app we named "test-app" by typing in the command line:

cd test-app

Open the current directory in your favorite code editor. For this tutorial, we shall be making use of Visual Studio Code Editor aka vs-code. Type in the command line:

code .

This command opens up current project directory in vs-code editor.

Write all your code in your react project. I have already pasted some for this tutorial for illustration purpose.

Next, we are going to manually set up prettier script for our project.

Open your command terminal in vs-code editor. Type in the following command:

touch .prettierrc.json .huskyrc.json .lintstagedrc.json

This creates all three file to be used in this project.

Add the following code to the respective files for configuration:

Inside .prettierrc.json file, add:

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "semi": true,
  "trailingComma": "all",
  "jsxSingleQuote": false,
  "singleQuote": false
}

NOTE: You can visit the documentation to choose your preferred configuration Prettier

Inside .huskyrc.json file, add:

{
  "hooks": {
    "pre-commit": "npx lint-staged"
  }
}

Inside .lintstagedrc.json file, add:

{
  "src/**/*.{json,css,scss,md}": ["prettier --write"],
  "src/**/*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"]
}

The folder structure should look something like this:

Install all dev-dependencies by typing in the command terminal:

npm install --save-dev prettier husky lint-staged

To run the scripts,

First, type in the command terminal:
git init

git add .

npx lint-staged
This expected output should look similar to this:

Congratulations! You have successfully setup prettier, husky and lint-staged. You can now commit your code and push to github.

If you liked my article, make sure to follow me for more contents on frontend web development. I will see you in my next article ❤️

DEV Community: SamBuilds

How to setup prettier, lint-staged and husky script