Every now and then, I start a new React project using my favorite setup:

Development: Vite + TypeScript
Linting & Formatting: ESLint + prettier
Pre-commit checks: husky + lint-staged

So, I decided to write this up-to-date step-by-step guide to setting it all up.

Step 1. React + TS + Vite + ESLint.

Vite provides the ability to start a new project from a template (React, TypeScript and ESLint with minimal rules). This template includes creating folders and files like src, .gitignore and other useful stuff.

To create a new project folder run:

npm create vite@latest your_project_name -- --template react-ts

Or, in case you have already created a project, simply replace the name with a dot and run this command inside your existing project root folder:

npm create vite@latest . -- --template react-ts

Finally, run

npm install

to install the packages.

Step 2. Updating ESLint config.

ESLint helps catch potential bugs and code issues and highlights problems in your code.

Formerly, configuration was done via .eslintrc.js or .eslintrc.json files. Right now these are considered deprecated: ESLint encourages using "flat config file".

So, the previous Vite command generated folders and files, including eslint.config.js:

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [
      js.configs.recommended,
      ...tseslint.configs.recommended
    ],
    files: ['**/*.{ts,tsx}'],
    // other settings
  }
);

If you prefer minimal rules for the project you may proceed to the next step.

However, I prefer more thorough rules like checking unused type imports or type narrowing problems. In order to enable these checks, we need to tweak eslint.config.js. I prefer simply adding recommendedTypeChecked config to the project. Don't forget that you also need to adapt parserOptions to this change.

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [
      js.configs.recommended,
      // Replace ...tseslint.configs.recommended with ...tseslint.configs.recommendedTypeChecked
      ...tseslint.configs.recommendedTypeChecked
    ],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      // Add new parserOptions
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
    },
    // other settings
  }
);

Step 3. Integrating prettier in ESLint.

ESLint is for catching bugs. And prettier focuses purely on formatting the code.

In order to combine these two superpowers, you may add prettier as an ESLint plugin.

Run:

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

Then at the root of your project folder create .prettierrc config file and add preferred rules to it:

// Customize these rules as needed
{
  "arrowParens": "always",
  "printWidth": 120,
  "endOfLine": "auto",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

And also .prettierignore file in order to prevent prettier from checking unnecessary files:

node_modules
.next
.vercel
public
dist

# Ignore dependency locks
package-lock.json

Now in eslint.config.js we may add the plugin. Be careful, the plugin needs to be added as the last element in the extends array!

import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [
      js.configs.recommended, 
      ...tseslint.configs.recommendedTypeChecked, 
      eslintPluginPrettierRecommended
    ],
    // other settings
  }
);

Now you may reload your IDE and run

npm run lint

to make sure that ESLint successfully detects problems in the project.

Step 4. Adding pre-commit checks.

husky pre-commit hooks and lint-staged provide us with the ability to run checks automatically each time we add a commit.

Run:

npm install --save-dev husky lint-staged

Then run:

npx husky init

This command creates a .husky folder with pre-commit file. In this file you can add commands to run each time we add a commit. By default the file contains only npm test command. Replace it with:

npx lint-staged

Now we need to update package.json in order to run lint-staged with husky:

{
  "name": "YOUR_PROJECT_NAME",
  "version": "0.0.0",
  // other settings

  // Add this lint-staged settings in order to 
  // automatically fix eslint and prettier issues
  "lint-staged": { 
    "src/**/*.(ts|tsx|js|jsx)": [
      "eslint --fix",
      "prettier --write"
    ],
    "src/**/*.(json|css|scss|md)": [
      "prettier --write"
    ]
  },
  // other settings
}

Finally, run

npm run prepare

in order to set up husky hooks.

Step 5. Verifying the setup.

Now, let's verify that our setup works fine.

Run:

git add .
git commit -m "checking the setup"

You should see eslint --fix and prettier --write run on the files, relevant for the lint-staged configuration.

Bonus: repository with the setup.

I made all these steps myself in a standalone github repository. You may look up into it to check your steps or simply use it as a boilerplate.

If this guide helped you, consider leaving a reaction!
Thanks for reading!