Kickstart Your React Project with Vite, ESLint, and Prettier

May 11, 2025

English

Banner

This guide is to show you how to create a new React app with Vite and configure it with ESLint, Prettier, lint-staged, commitlint and husky to maintain code consistency.

REQUIREMENTS

Node v22
pnpm
ESLint and Prettier installed in Visual Code Studio

Manual installation - STEP-BY-STEP GUIDE

Clone an empty repository to your local machine and open your terminal or command prompt.
Run the following command to create a new React app using Vite template with TypeScript:

pnpm create vite --template react-ts

Install vite-tsconfig-paths package to enable path aliases:

pnpm add -D vite-tsconfig-paths

Open the tsconfig.json file and replace it with the following configurations:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Open vite.config.ts file in the project root directory and update it with the following configurations:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

Install ESLint and Prettier related packages:

pnpm add -D @eslint/js@9.32.0 eslint@9.32.0 eslint-config-prettier@10.1.8 eslint-import-resolver-typescript@4.4.4 eslint-plugin-import@2.32.0 eslint-plugin-prettier@5.5.3 eslint-plugin-react-hooks@5.2.0 eslint-plugin-simple-import-sort@12.1.1 prettier@3.6.2

Open the package.json file and add the following scripts:

"scripts": {
  ...
  "lint": "eslint . --fix --max-warnings=0"
}

Open the eslint.config.js file in the project root directory and update it with the following configurations:

import importPlugin from 'eslint-plugin-import';
import prettierRecommended from 'eslint-plugin-prettier/recommended';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import simpleImportSort from 'eslint-plugin-simple-import-sort';
import globals from 'globals';
import tseslint from 'typescript-eslint';

import js from '@eslint/js';

export default tseslint.config(
  { ignores: ['dist', '.husky'] },
  {
    extends: [
      js.configs.recommended,
      ...tseslint.configs.recommended,
      prettierRecommended,
    ],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      'simple-import-sort': simpleImportSort,
      import: importPlugin,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': 'off',
      'prettier/prettier': [
        'error',
        {
          endOfLine: 'auto',
          trailingComma: 'es5',
        },
      ],
      semi: ['error', 'always'],
      quotes: ['error', 'double'],
      'no-console': 'error',
      'require-await': 'error',
      '@typescript-eslint/consistent-type-imports': 'error',
      '@typescript-eslint/no-unused-vars': [
        'error',
        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
      ],
      'simple-import-sort/exports': 'error',
      'simple-import-sort/imports': [
        'error',
        {
          groups: [
            ['^react$', '^next', '^[a-z]'],
            ['^@'],
            ['^~'],
            ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
            ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
            ['^.+\\.s?css$'],
            ['^\\u0000'],
          ],
        },
      ],
      'import/first': 'error',
      'import/newline-after-import': 'error',
      'import/no-duplicates': 'error',
    },
  }
);

Open the tsconfig.app.json file in the project root directory and update it with the following configurations:

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Install husky, commitlint and lint-staged packages:

pnpm add -D husky @commitlint/{cli,config-conventional} lint-staged

Initialize husky:

pnpm exec husky init && pnpm i

Set up the pre-commit hook:

echo "npx lint-staged" > .husky/pre-commit
echo "npx --no -- commitlint --edit ${1}" > .husky/commit-msg

Create a .lintstagedrc.json file in the project root directory and add the following configurations:

{
  "*.{ts,tsx,js}": ["pnpm lint"]
}

Create a .commitlintrc.json file in the project root directory and add the following configurations:

{ "extends": ["@commitlint/config-conventional"] }

Create the necessary folders for your coding template:

cd src && mkdir components constants hooks interfaces layouts pages services stores utils

⚠️ Warning

You MIGHT need to RESTART your IDE to have these above configurations applied.

Once you have followed these steps, you will have a React app set up with Vite and additional configurations for ESLint, Prettier, Husky, commitlint and lint-staged. You can now start developing your application by adding code to the respective folders.

Posted onreactwith tags:

#react #vite #eslint #prettier #javascript