Starting a React Project with Vite

# Quick install

I have prepared the setup below as a React (Compiler) + TS template.
Start your project more easily!

1
2
3
4
5
6
7
8
# Copy the template into the current project (folder)
npx degit ParkYoungWoong/vite-template--react-ts .

# Install packages
npm i

# Run the development server
npm run dev

# Using a skill

If you use the Skills feature in AI coding tools such as Claude Code and Cursor, you can install and set up the project automatically through a conversation.
Install the skill with the following command.

1
npx skills add ParkYoungWoong/skills --skill react-vite-scaffold

After installation, when you start a React project in your AI coding tool, the skill activates automatically and creates a project that includes the setup above (ESLint, Prettier, path aliases, and more).
You can also invoke the skill manually in each tool, as in the following Claude Code example.

1
❯ /react-vite-scaffold

# Creating a Vite project

Open the project folder in VS Code and run the following commands in the terminal, in order.

1
2
3
4
5
6
7
# Set up the project in the current path
npm create vite@latest .

  Select a framework: React
  Select a variant: TypeScript + React Compiler
  Which linter to use?: ESLint
  Install with npm and start now? Yes

Or, in the terminal, move to the path where you want to create the project and run the following commands in order.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Create and set up a project folder in the current path
npm create vite@latest <project-folder-name>

  Select a framework: React
  Select a variant: TypeScript + React Compiler
  Which linter to use?: ESLint
  Install with npm and start now? No

# Move to the project path
cd <project-folder-name>

# Install dependency packages
npm i

# Open the current path in a new VS Code window
code .
# Or open it in the current VS Code window
code . -r
# Or open the project manually

# Run the development server
npm run dev

A project created with the TypeScript + React Compiler variant sets up React Compiler with the @rolldown/plugin-babel plugin and the reactCompilerPreset preset, like this.
For more on React Compiler, see the React Compiler Essentials post.

1
2
3
4
5
6
7
8
9
10
11
import { defineConfig } from 'vite'
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    babel({ presets: [reactCompilerPreset()] })
  ]
})

# Setting up ESLint + Prettier

• ESLint: checks code quality and detects bugs and anti-patterns
• Prettier - Code formatter: manages code style and formatting, so you can apply a consistent code style

# Installing VS Code extensions

To use ESLint and Prettier, install each extension in VS Code.
It is a good idea to restart VS Code after installing them.

ESLint

Prettier - Code formatter

# Installing and configuring packages

If you selected ESLint for Which linter to use? when creating the project, the ESLint packages are already installed.
So you only need to install the Prettier packages.
All of these packages are for development only and are not needed at runtime, so install them as 'dev dependencies' with the -D flag.

1
npm i -D prettier eslint-config-prettier eslint-plugin-prettier

Add the plugin to the extends option in the configuration file, like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import js from '@eslint/js'
import prettierRecommended from 'eslint-plugin-prettier/recommended'
// ...

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      // ...
      prettierRecommended
    ],
    // ...
  }
])

Also, create a .prettierrc file in the project root and add the following content.
You can find the detailed rules in Prettier / Options.

1
2
3
4
5
6
7
8
9
{
  "semi": false,
  "singleQuote": true,
  "singleAttributePerLine": true,
  "bracketSameLine": true,
  "endOfLine": "auto",
  "trailingComma": "none",
  "arrowParens": "avoid"
}

# Setting up auto-formatting

To use auto-formatting in VS Code, add the following option to your user settings (settings.json).
Check carefully whether it is already set, so you do not add the same option twice.

1
2
3
4
5
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

You can find the user settings (global) by searching for settings.json in the Command Palette.

Open User Settings (JSON)

You can also turn on auto-formatting for *.jsx and *.tsx files through user settings (local) that apply only to the current project.
Create a .vscode/settings.json folder and file in the project root and add the following content.

1
2
3
4
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

# Setting up path aliases

Path aliases are convenient because they let you reference files in your project easily.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { defineConfig } from 'vite'
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    babel({ presets: [reactCompilerPreset()] })
  ],
  resolve: {
    alias: [
      { find: '@', replacement: '/src' }
    ]
  }
})

With this, you can reference a specific path directly instead of using relative paths that can get complicated.

1
2
// import type { Routes } from '../../../../routes'
import type { Routes } from '@/routes'

So that TypeScript can also recognize the paths, add the following configuration option.
If the tsconfig.json file in your project references the tsconfig.app.json file, add the option to tsconfig.app.json.

1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    // ...
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Starting with TypeScript 6, the baseUrl option is deprecated and using it causes an error, so use only the paths option.
If you use TypeScript 5 or earlier, you may need the baseUrl option.

1
2
3
4
5
6
7
8
9
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}