Setting Up a Modern React Project with Vite, ESLint, and Prettier

Build fast, write clean code, and stay sane with a smooth frontend setup. Frontend tooling has evolved rapidly over the past few years. If you're starting a new React project today, you probably want:

• Fast startup and hot-reloading

• TypeScript support out of the box

• Linting to catch bugs early

• Prettier to keep your code style consistent

• Clean and maintainable architecture

Good news: You can achieve all that in minutes with Vite, React, TypeScript, ESLint, and Prettier.

In this post, I’ll guide you through setting up this stack from scratch — the right way.

🎯 Prerequisites

Make sure you have Node.js and pnpm installed.

npm install -g pnpm

⚡ Step 1: Create a New React + Vite + TypeScript Project

pnpm create vite@latest my-app

Choose:

• Framework: React
• Variant: TypeScript + SWC

Then move into the project folder:

cd my-app
pnpm install

✨ Step 2: Add ESLint and Prettier

Install ESLint + Prettier and their required plugins:

pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-prettier

🧠 Step 3: Configure ESLint

Create or update your .eslintrc.cjs file:

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

This setup enables React + TypeScript linting and ensures that Prettier and ESLint play nicely together.

📝 Step 4: Add Prettier Config

Create a .prettierrc file:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "all"
}

Create .prettierignore:

node_modules
dist
build

🛠 Step 5: Setup EditorConfig (Optional but Recommended)

Create a .editorconfig file to maintain consistent formatting across editors:

root = true
 
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

✨ Step 6: Add Path Alias Want to avoid long import paths like ../../../components/Button? Use aliases!

Update tsconfig.json:

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

Update vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Now you can import with @/components/Button.

🧪 Step 7: Add Lint and Format Scripts

Update your package.json:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint src --ext .ts,.tsx",
  "lint:fix": "eslint src --ext .ts,.tsx --fix",
  "format": "prettier --check .",
  "format:fix": "prettier --write ."
}

Now you can lint and format easily:

pnpm lint
pnpm format

🎉 Done! Let’s Recap

You've just set up a blazing fast React + Vite + TypeScript project with:

🧠 Type-safe coding (TypeScript)

🔍 Linting with ESLint

🎨 Auto formatting with Prettier

⚡️ Lightning-fast development with Vite

📁 Cleaner imports with aliasing

🪄 Bonus: Enable Auto Fix on Save (VS Code)

In .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

💬 Final Thoughts

With this setup, you're equipped with a modern frontend workflow that scales well, enforces code quality, and keeps your codebase clean.

If you found this helpful, feel free to share it or bookmark it for your next project. Happy coding! 🚀