KIM

🚀 React + Vite Boilerplate Setup Guide

Includes: Vite + React + TypeScript + ESLint + Prettier + Vitest + Husky + Lint-Staged + Commitlint

Github: Clone the repository

1. Initialize React Project with Vite

bash
1npm create vite@latest

Then run:

bash
1cd vite-react
2npm install
3npm run dev

👉 Clean up: Remove unnecessary files like App.css, the logo SVG from assets, and the contents of index.css.

2. Configure ESLint

📘 ESLint Getting Started

Run the ESLint init command:

bash
1npm init @eslint/config@latest

Select the following options:

Accept all suggested dependencies and install with npm.

Add to eslint.config.js:

js
1{
2  files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
3  languageOptions: { globals: globals.browser },
4  settings: {
5    react: {
6      version: 'detect',
7    },
8  },
9}

3. Setup Prettier

📘 Prettier + ESLint Integration

Install:

bash
1npm install --save-dev eslint-plugin-prettier eslint-config-prettier
2npm install --save-dev --save-exact prettier

Create .prettierrc:

json
1{
2  "singleQuote": true,
3  "semi": false,
4  "tabWidth": 2,
5  "trailingComma": "es5",
6  "printWidth": 100
7}

Create .prettierignore:

text
1node_modules
2dist
3build
4*.min.js

Update eslint.config.js:

Make sure to add eslint-plugin-prettier/recommended as the last item in the config array:

js
1export default defineConfig([
2  {
3    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
4    plugins: { js },
5    extends: ["js/recommended"],
6  },
7  {
8    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
9    languageOptions: { globals: globals.browser },
10    settings: { react: { version: "detect" } },
11  },
12  tseslint.configs.recommended,
13  pluginReact.configs.flat.recommended,
14  eslintPluginPrettierRecommended, // Must be last
15]);

4. Useful Scripts in package.json

json
1"scripts": {
2  "dev": "vite",
3  "build": "tsc -b && vite build",
4  "preview": "vite preview",
5  "lint": "eslint .",
6  "lint:fix": "eslint . --fix",
7  "format": "prettier --write .",
8  "format:check": "prettier --check ."
9}

5. Husky, Lint-Staged, and Commitlint

Setup Husky

📘 Husky Docs

bash
1npm install --save-dev husky
2npx husky init

Install Lint-Staged

📘 Lint-Staged Docs

bash
1npm install --save-dev lint-staged

Add to package.json:

json
1"lint-staged": {
2  "**/*.{js,ts,jsx,tsx}": [
3    "eslint --fix",
4    "prettier --write"
5  ]
6}

Install Commitlint

📘 Commitlint Docs

bash
1npm install --save-dev @commitlint/config-conventional @commitlint/cli

Create commitlint.config.js:

js
1const Configuration = {
2  extends: ["@commitlint/config-conventional"],
3  helpUrl:
4    "https://github.com/conventional-changelog/commitlint/#what-is-commitlint",
5};
6

7export default Configuration;

Husky Hooks

.husky/commit-msg:

bash
1#!/usr/bin/env sh
2. "$(dirname "$0")/_/husky.sh"
3

4npx --no-install commitlint --edit "$1"

.husky/pre-commit:

bash
1#!/usr/bin/env sh
2. "$(dirname "$0")/_/husky.sh"
3

4echo "🔍 Running lint-staged..."
5npx lint-staged
6echo "✅ Pre-commit checks passed!"
7

8npm run test
9

10if [ $? -ne 0 ]; then
11  echo "❌ Tests failed! Commit aborted."
12  exit 1
13fi
14

15echo "✅ All checks passed. Proceeding to commit."

6. Configure Vitest

📘 Vitest Docs

bash
1npm install -D vitest @vitest/coverage-v8

Create vitest.config.ts:

tsx
1import { defineConfig } from "vitest/config";
2

3export default defineConfig({
4  test: {
5    coverage: {
6      include: ["src/**/*.{ts,tsx,js,jsx}"],
7      exclude: ["**/*.test.*", "**/__tests__/**"],
8      reporter: ["text", "html"],
9    },
10  },
11});

Update package.json:

json
1"scripts": {
2  "test": "vitest",
3  "coverage": "vitest run --coverage"
4}

Update ESLint config to ignore coverage/:

tsx
1export default defineConfig([
2  { ignores: ['coverage/**'] },
3  ...
4])

7. ESLint Tips

To disable a rule inline, use:

tsx
1// eslint-disable-next-line no-console
2console.log("Debug message");

Or globally in eslint.config.js:

js
1rules: {
2  'no-console': 0
3}

✅ You're All Set!

You now have a clean, modern, and fully configured React + TypeScript environment — ready for professional development. Just start coding 😎