PHONG PHAN

18/8/2024

Setup React Typescript with Vite & ESLint

Hello dear coder friends! 😎 Today, I’m taking you on a super fun journey to set up a clean and professional React project using Vite, TypeScript, Tailwind CSS, shadcn/ui and ESLint. This is the ultimate combo that many professional dev teams use. Not only is it powerful, but this setup also helps you write clean, beautiful code and avoid the headaches caused by random bugs. Let’s get started!

🚀 Set Up a Super Slick React Project with Vite, TypeScript, Tailwind CSS, ESLint, and shadcn/ui — Full, No Secrets!

Hey beloved coders! 😎 Today, I'm going to take you on a super fun journey to set up a perfectly structured React project, using Vite, TypeScript, Tailwind CSS, ESLint, and shadcn/ui for a stunning user interface. This is the "ultimate combo" that professional dev teams swear by. Clean, beautiful code, and no headaches from small errors. Let's dive right in!

🎯 Why Set Up Properly?

Vite: Lightning-fast builds, smooth hot reloads — basically, it's "way cooler" than Create React App.
TypeScript: Helps you code with confidence, no more guessing like in JavaScript.
Tailwind CSS: Create stunning UIs without writing long CSS.
ESLint + Prettier: Keeps your code squeaky clean — your teammates will be impressed!
Shadcn/UI: Beautiful, customizable components that integrate perfectly with Tailwind.

What are you waiting for? Let's code! 🚀

🛠️ Step 1: Create a Project with Vite

First, open your terminal and run this command to create a React project with TypeScript:

DummyComponent.jsx

npm create vite@latest my-cool-app -- --template react-ts
cd my-cool-app
npm install

Chú ý :

Sau khi chạy thì nó sẽ yêu cầu nhập tên dự án , Tiếp theo là chọn Framework
Chọn template, ở đây mình chọn TypeScript + SWC, SWC sẽ thay thế Babel cho việc biên dịch code Typescript/Javascript. SWC có tốc độ nhanh hơn 20 lần khi so với Babel

portfolio phong phan , React, Next.js, node js ( express , fastify ) , and Headless CMS

Vite creates a super lightweight project, starting up faster than Usain Bolt running 100m! 🏃‍♂️

🎨 Step 2: Install Tailwind CSS

Tailwind brings a fresh breeze to web development, though not everyone loves the way it codes. Personally, I’m hooked and can't stop using it!

With its inline coding style, not every developer is a fan, but since 2019, it has become extremely popular.

I personally love how you can just copy and use it without affecting other files. Tailwind CSS is the "secret weapon" for building beautiful UIs with minimal effort. It's 2025, and we don’t need to write pure CSS anymore — it’s exhausting 😁. Plus, Tailwind is already on version 4.x, so I’ll guide you on using the latest version! 😁

DummyComponent.jsx

npm install tailwindcss @tailwindcss/vite

Add the @tailwindcss/vite plugin to your Vite configuration.

DummyComponent.jsx

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Import Tailwind CSS

In the previous version, Tailwind 3.x, you had to create a tailwind.config.js file and add the @tailwind base, @tailwind components, and @tailwind utilities lines to your main CSS file. But now, everything is much more streamlined — you just need a single line @import "tailwindcss" in your main CSS file, and you're good to go. So convenient, right? 😎

DummyComponent.jsx

@import "tailwindcss";

In the CSS file, I have the basic configuration as follows. In this file, you can customize Tailwind’s default styles like colors, shadows, and more, or even define your own styles. I’ll write a separate post to cover this topic in detail.

DummyComponent.jsx

@import 'tailwindcss';

@theme {
  --color-1: #121063;
  --color-2: #3ab7bf;

  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  --breakpoint-2xl: 1200px;
  --breakpoint-3xl: 1500px;

  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}

In the App.tsx file, I add the following code:

DummyComponent.jsx

function App() {
  return (
    <div className='flex items-center justify-center h-screen bg-gray-100 gap-2'>
      <div className='bg-1 w-[300px] h-[300px] '></div>
      <div className='bg-2 w-[300px] h-[300px] '></div>
      <div className='bg-red-100 w-[300px] h-[300px] '></div>
    </div>
  )
}

export default App

Once everything is set up, run npm run dev to see the result 👌 If it looks like this, you're all set with Tailwind! 😂

🧹 Step 3: Install ESLint + Prettier

No one wants their code to be as messy as their desk after a week of deadlines! 😅 ESLint and Prettier will help keep your code neat and clean:

DummyComponent.jsx

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

Open the eslint.config.js file. Add this value to the ignores array. The goal is to prevent ESLint from checking the vite.config.ts file.

DummyComponent.jsx

'vite.config.ts'

Import this at the beginning of the eslint.config.js file.

DummyComponent.jsx

import eslintPluginPrettier from 'eslint-plugin-prettier'

Add the following code to the rules object to include Prettier rules.

DummyComponent.jsx

'prettier/prettier': [
      'warn',
      {
        arrowParens: 'always',
        semi: false,
        trailingComma: 'none',
        tabWidth: 2,
        endOfLine: 'auto',
        useTabs: false,
        singleQuote: true,
        printWidth: 120,
        jsxSingleQuote: true
      }
    ]

Once you've completed the steps above, the full eslint.config.js code will look like this:

DummyComponent.jsx

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import eslintPluginPrettier from 'eslint-plugin-prettier'

export default tseslint.config(
  { ignores: ['dist'], prettier: eslintPluginPrettier },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'prettier/prettier': [
        'warn',
        {
          arrowParens: 'always',
          semi: false,
          trailingComma: 'none',
          tabWidth: 2,
          endOfLine: 'auto',
          useTabs: false,
          singleQuote: true,
          printWidth: 120,
          jsxSingleQuote: true
        }
      ]
    },
  },
)

🥸 Step 4 - Configure Prettier to Format Code

Create a .prettierrc file in the root directory with the following content:

DummyComponent.jsx

{
  "arrowParens": "always",
  "semi": false,
  "trailingComma": "none",
  "tabWidth": 2,
  "endOfLine": "auto",
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true
}

The purpose is to configure Prettier. You should install the Prettier - Code formatter extension for VS Code so it understands the settings. Next, create a .prettierignore file in the root directory. The purpose of this file is to tell Prettier to ignore unnecessary files.

DummyComponent.jsx

node_modules/
dist/

👌 Step 5 - Configure the Editor to Standardize Editor Settings

Create an .editorconfig file in the root directory. The purpose of this file is to standardize editor settings across the team, especially when there are multiple people working on the project.

To make VS Code recognize this file, you need to install the EditorConfig for VS Code extension.

DummyComponent.jsx

[*]
indent_size = 2
indent_style = space

💻 Step 6 - Configure Aliases for `tsconfig.json`

Adding aliases in the tsconfig.json file will help VS Code understand and automatically import the necessary files for us. Note that this will only help in the development environment and won't affect the build process.

Your tsconfig.json file will look something like this:

DummyComponent.jsx

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

The meaning of this is that we can import Login like this:
import Login from '~/pages/Login' instead of import Login from '../../pages/Login'.
It's much shorter and easier to read!

⌨️ Step 7 - Configure Aliases for Vite in `vite.config.ts`

Install the package @types/node to use Node.js in TypeScript files without errors.

DummyComponent.jsx

npm i @types/node -D

Configure Alias and Enable Source Map in vite.config.ts

DummyComponent.jsx

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  css: {
    devSourcemap: true
  },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src')
    }
  }
})

Open package.json and Add the Following Scripts for Convenience:

DummyComponent.jsx

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
    "preview": "vite preview"
  }
}

"Now you can run npm run lint to check for errors, or npm run format to automatically beautify your code! ✨

🗂️ Step 5: Standard Project Folder Structure 2025

A professional project needs a clear folder structure. Below is the standard structure commonly used by dev teams. You can check it out here for the full details, as I’ve analyzed it thoroughly for you, check it out now.

Step 6: Create a Sample Component"

DummyComponent.jsx

import React from 'react'

const App: React.FC = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-200 to-purple-300 flex items-center justify-center p-4">
      <div className="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full text-center">
        <h1 className="text-4xl font-bold text-purple-600 mb-4">
          Yo! Chào mừng bạn! 🎉
        </h1>
        <p className="text-gray-700 mb-6">
          Đây là dự án React siêu xịn với Vite, TypeScript, Tailwind, ESLint và Shadcn/UI. 
          Sẵn sàng để bạn "quẩy" code chưa? 😎
        </p>
        <button className="bg-purple-500 text-white px-6 py-2 rounded-full hover:bg-purple-600 transition">
          Let's Code!
        </button>
      </div>
    </div>
  )
}

export default App

🚀Step 7: run project

DummyComponent.jsx

Run these commands to check:
# Format code
npm run format

# Check for link erorr
npm run lint

# Automatically fix lint errors
npm run lint:fix

# run dev server
npm run dev

Here’s the translation:

"Open http://localhost:5173, and you’ll see an awesome interface! 😍

🎉 Step 8: Additional Options - React Router & Shadcn/UI Want to create a multi-page app and add some cool UI components? Let’s integrate React Router and shadcn/ui!

8.1. Install React Router

Install React Router to manage pages:

DummyComponent.jsx

npm install react-router-dom

Update src/main.tsx :

DummyComponent.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

8.2. Install Shadcn/UI

What is Shadcn/UI that’s been so popular lately?

shadcn/ui is a modern UI component library for React, built with:

Tailwind CSS → for quick styling and easy customization.
Radix UI → for components with complex logic like Dialog, Dropdown, Tooltip, etc.
Framer Motion (optional) → for smooth animations.

Shadcn/UI is a beautiful component library, easy to customize, and integrates perfectly with Tailwind. Let’s install it:"

DummyComponent.jsx

npx shadcn@latest init

When running the command, you will be asked a few questions. Select the following options that best fit your project:

DummyComponent.jsx

Which color would you like to use as base color? › Neutral

Now you can start adding components to your project by:

DummyComponent.jsx

npx shadcn@latest add button

It looks like you've already provided the sentence in English. Let me know if you'd like any adjustments or further translation!

8.4. Update Routes and Use Shadcn/UI

Create the file src/routes/index.tsx to manage routes:

DummyComponent.jsx

import { Routes, Route } from 'react-router-dom'
import Home from '../pages/Home'
import About from '../pages/About'

const AppRoutes: React.FC = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  )
}

export default AppRoutes

Create the file src/pages/Home.tsx to test shadcn/ui:

DummyComponent.jsx

import React from 'react'
import { Button } from '../components/ui/button'

const Home: React.FC = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-200 to-purple-300 flex items-center justify-center p-4">
      <div className="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full text-center">
        <h1 className="text-4xl font-bold text-purple-600 mb-4">
          Trang Chủ Siêu Xịn! 🎉
        </h1>
        <p className="text-gray-700 mb-6">
          Dùng Shadcn/UI và React Router để tạo app đẹp lung linh!
        </p>
        <Button variant="default" className="bg-purple-500 hover:bg-purple-600">
          Nhấn Vô Nè!
        </Button>
      </div>
    </div>
  )
}

export default Home

Create file src/pages/About.tsx:

DummyComponent.jsx

import React from 'react'
import { Button } from '../components/ui/button'

const About: React.FC = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-green-200 to-blue-300 flex items-center justify-center p-4">
      <div className="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full text-center">
        <h1 className="text-4xl font-bold text-green-600 mb-4">
          Giới Thiệu Nè! 😎
        </h1>
        <p className="text-gray-700 mb-6">
          Đây là trang giới thiệu, dùng Shadcn/UI để thêm component xịn!
        </p>
        <Button variant="outline">Khám Phá Thêm</Button>
      </div>
    </div>
  )
}

export default About

Update src/App.tsx to use routes:

DummyComponent.jsx

import React from 'react'
import AppRoutes from './routes'

const App: React.FC = () => {
  return (
    <div className="min-h-screen">
      <AppRoutes />
    </div>
  )
}

export default App

💡 Tips for a Happy Developer

Performance: Vite is as fast as a sports car, builds the project in just a few seconds.
Easy Debugging: TypeScript catches errors early, no more 'undefined is not a function'!
Teamwork: ESLint and Prettier keep the code consistent, making the whole team happy.
Cool UI: Shadcn/UI + Tailwind makes beautiful interfaces without the hassle.
Navigation: React Router ensures smooth multi-page apps.

🎈 Conclusion

You now have a super cool React project with Vite, TypeScript, Tailwind CSS, ESLint, React Router, and shadcn/ui! A clear folder structure, clean code, and a gorgeous UI, ready to tackle any real-world task. 😎

Run npm run dev, admire your app, and start coding!

Happy coding! 🚀

Maybe you like

What is Zustand? Why Its Combination with @tanstack/react-query is the Hottest State Management Trend for Projects Big and Small

Published at: 30/7/2025

What Are Access Tokens and Refresh Tokens? Why Do We Need Both Instead of Just One?

Published at: 31/7/2025

Why Shadcn/UI Has Taken Over as the Top UI Component Library

Published at: 28/7/2025

What is Prisma? Why It’s the Best, Most Powerful, and Easiest-to-Use ORM That Developers Can’t Afford to Miss

Published at: 29/7/2025

Understanding Rendering Mechanisms in Next.js 15 with the App Router

Published at: 27/4/2025

🚀 Level Up Your React Source Structure for Professional Work - Coding Is No Longer a Nightmare

Published at: 21/4/2025

Asynchronous Processing in JavaScript from A → Z

Published at: 27/4/2025

SITE MAP

Setup React Typescript with Vite & ESLint

🚀 Set Up a Super Slick React Project with Vite, TypeScript, Tailwind CSS, ESLint, and shadcn/ui — Full, No Secrets!

🎯 Why Set Up Properly?

🛠️ Step 1: Create a Project with Vite

🎨 Step 2: Install Tailwind CSS

🧹 Step 3: Install ESLint + Prettier

🥸 Step 4 - Configure Prettier to Format Code

👌 Step 5 - Configure the Editor to Standardize Editor Settings

💻 Step 6 - Configure Aliases for tsconfig.json

⌨️ Step 7 - Configure Aliases for Vite in vite.config.ts

🗂️ Step 5: Standard Project Folder Structure 2025

Step 6: Create a Sample Component"

🚀Step 7: run project

8.1. Install React Router

8.2. Install Shadcn/UI

8.4. Update Routes and Use Shadcn/UI

💡 Tips for a Happy Developer

🎈 Conclusion

What is Zustand? Why Its Combination with @tanstack/react-query is the Hottest State Management Trend for Projects Big and Small

What Are Access Tokens and Refresh Tokens? Why Do We Need Both Instead of Just One?

Why Shadcn/UI Has Taken Over as the Top UI Component Library

What is Prisma? Why It’s the Best, Most Powerful, and Easiest-to-Use ORM That Developers Can’t Afford to Miss

Understanding Rendering Mechanisms in Next.js 15 with the App Router

🚀 Level Up Your React Source Structure for Professional Work - Coding Is No Longer a Nightmare

Asynchronous Processing in JavaScript from A → Z

💻 Step 6 - Configure Aliases for `tsconfig.json`

⌨️ Step 7 - Configure Aliases for Vite in `vite.config.ts`