Vite + TypeScript + ESLint + Tailwind + shadcn/ui + Zustand

A modern React app template with Vite, TypeScript, ESLint, Prettier, Tailwind CSS, Zustand, and optional shadcn/ui.
Inspired by this guide.

---

Step 1: Build React App

See React docs.

With TypeScript:

npm create vite@latest my-app -- --template react-ts

Without TypeScript:

npm create vite@latest my-app -- --template react

---

Step 2: ESLint

Note: Make sure ESLint does not do Prettier's work.
See ESLint docs.

npm init @eslint/config@latest

---

Step 3: Prettier (Optional if your editor already formats code)

See Prettier docs.

1. Install Prettier and ESLint plugins

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

• eslint-config-prettier disables ESLint rules that might conflict with Prettier.
• eslint-plugin-prettier runs Prettier as an ESLint rule.

2. Update ESLint config

Edit your eslint.config.js to include Prettier:

import js from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import pluginPrettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  js.configs.recommended,
  tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  { ignores: ['node_modules', 'dist', 'build', 'coverage'] },
  {
    ...pluginReact.configs.flat['jsx-runtime'],
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    settings: { react: { version: 'detect' } },
    languageOptions: { globals: { ...globals.browser } },
  },
  {
    plugins: { prettier: pluginPrettier },
    rules: { 'prettier/prettier': 'warn' },
  },
  prettierConfig,
]);

3. Add Prettier config

You already have a .prettierrc file. Example:

{
  "singleQuote": true,
  "trailingComma": "all"
}

4. Add .prettierignore

You already have a .prettierignore file. Make sure it lists files/folders you want Prettier to skip.

5. Add format script

Your package.json already has:

"format": "prettier --write ."

6. Usage

• Run npm run lint to check both ESLint and Prettier issues.
• Run npm run format to auto-format with Prettier.

---

Step 4: Tailwind CSS

npm install tailwindcss @tailwindcss/vite

See Tailwind + Vite docs for the rest of the setup.

---

Step 5: shadcn/ui (Optional)

See shadcn/ui Vite installation.

npx shadcn@latest init

---

React Testing Library vs Jest

• React Testing Library vs Jest
• React Testing Library Docs

Add React Testing Library and Jest

1. Install Testing Dependencies

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event jest ts-jest @types/jest

2. Configure Jest for TypeScript

Create a jest.config.ts file:

import type { Config } from 'jest';

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};

export default config;

3. Add Jest Setup File

Create a jest.setup.ts file:

import '@testing-library/jest-dom';

4. Add Test Script

In your package.json:

"scripts": {
  // ...existing scripts...
  "test": "jest"
}

5. Create a Test File for App

Create src/App.test.tsx:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders Counter heading', () => {
  render(<App />);
  expect(screen.getByText(/Counter/i)).toBeInTheDocument();
});

6. Run Your Tests

npm test

---