react-typescript-prettier-eslint-husky-lint-staged-setup.md

Configure prettier, eslint, husky (pre commit hook), lint-staged in react + typescript project

Steps to configure prettier, eslint, husky (pre commit hook), lint-staged in react + typescript project created using create-react-app. This is opinionated configuration with airbnb's style guide as the base style guide.

Step 1 :: Setup prettier

1.1) Install prettier as dev dependency.

npm install --save-dev --save-exact prettier

1.2) Create .prettierrc.json file in the root directory of your project and paste this rule for testing purpose.

{
   "singleQuote": true
}

1.3) Verify prettier setup by executing below command.

npx prettier --check .

If the result includes file path warnings and a message like this, "Code style issues found in the above file(s). Forgot to run Prettier?", it indicates that your code has some formatting issues. Set up eslint before you start resolving formatting errors.

Step 2 :: Setup eslint

2.1) Install eslint + configure it using eslint CLI.

npx eslint --init

You will be asked to respond to a few questions. Select answers as listed below.

• How would you like to use ESLint? - To check syntax, find problems, and enforce code style
• What type of modules does your project use? - JavaScript modules (import/export)
• Which framework does your project use? - React
• Does your project use TypeScript? - Yes
• Where does your code run? - Browser
• How would you like to define a style for your project? - Use a popular style guide
• Which style guide do you want to follow? - Airbnb: https://github.com/airbnb/javascript
• What format do you want your config file to be in? - JSON
• The config that you've selected requires the following dependencies - Yes

2.2) Verify eslint configuration by executing below command.

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

It should show messages similar like "XXXX problems (XXXX errors, XX warnings)"

2.3) Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier. So let's turn off eslint rules that conflicts with Prettier using pre made config called "eslint-config-prettier".

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

2.4) Then, add "prettier" to the "extends" array in your .eslintrc.json file. Make sure to put it last, so it gets the chance to override other configs.

{
    ....other-configs
    "extends": [
        ....other-configs
        "prettier"
    ],
    ....other-configs
}

2.5) Check if conflicting rules are switched off or not using the same command we used in step 2.2.

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

If your codebase is large, you may have observed that there were too many errors when you ran this command previously, but with the updated setup, there are fewer problems / warnings than in step 2.2.

2.6) Because our project uses typescript and the Airbnb eslint style guide does not include typescript support by default, we'll also need to install another plugin named "eslint-config-airbnb-typescript".

npm install --save-dev eslint-config-airbnb-typescript

2.7) Then, add "airbnb-typescript" to the "extends" array in your .eslintrc.json file. Make sure to put it before "prettier", so prettier gets the chance to override other configs.

{
    ....other-configs
    "extends": [
        ....other-configs,
        "airbnb-typescript"
        "prettier"
    ],
    ....other-configs
}

2.8) Also, in the same .eslintrc.json file, add a "project" option to the "parserOptions" object, as seen below.

{
    ....other-configs
    "parserOptions": {
        ....other-configs,
        "project": "./tsconfig.json"
    },
    ....other-configs
}

2.9) You must disable the default eslint rules specified by "create-react-app" if you created your project with "create-react-app." So, in your package.json file, look for the object "eslintConfig" and delete it.

It might look like this

{
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    }
}

Step 3 :: Configure pre-commit hook with husky & lint-staged

3.1) Set up a pre-commit hook using husky & lint-staged to make sure that every commit is formatted.

npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

3.2) Add following object inside your package.json file.

{
    "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
        "src/**/*.{js,jsx,ts,tsx,css,scss,md}": "prettier --write --ignore-unknown"
    }
}

Step 4 :: Test configuration

4.1) Open couple of .ts/.tsx files and add unnecessary indents as well as the "debugger" keyword at multiple places and save your files.

4.2) Stage all the modified files and try to commit your changes using following commands.

git add .
git commit -m "does it work?"

It should trigger pre-commit hook and show messages similar like below

[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Hiding unstaged changes to partially staged files...
[SUCCESS] Hiding unstaged changes to partially staged files...
[STARTED] Running tasks...
[STARTED] Running tasks for src/**/*.{js,jsx,ts,tsx}
[STARTED] Running tasks for src/**/*.{js,jsx,ts,tsx,css,scss,md}
[STARTED] eslint --cache --fix
[STARTED] prettier --write --ignore-unknown
[SUCCESS] prettier --write --ignore-unknown
[SUCCESS] Running tasks for src/**/*.{js,jsx,ts,tsx,css,scss,md}
...........
...........
...........
...........
...........
...........
✖ XXXX problems (XXXX errors, XXXX warnings)

husky - pre-commit hook exited with code 1 (error)

If you get similar messages, then your configuration is working properly. Kudos !!! Now go and fix all errors :))

That's all !