React + TypeScript + Vite + UnoCSS

This template provides a minimal setup to get React working based on Vitejs

The template includes:

• react@19
• typescript
• unocss
• vite@6
• prettier
• eslint@9

eslint features

1. eslint rules for react
2. eslint rules for typescript
3. eslint rules for prettier: provides standard code styles
4. eslint rules for import: sort import statements in order. The order is:
   1. side effect imports
   2. node.js builtins
   3. packages
   4. internal packages defined in tsconfig.app.json, e.g. @/components
   5. parent imports: import '../xx'
   6. other relative imports './xx'
5. eslint rules for react-hooks
6. eslint rules for react-refresh
7. eslint rules for unocss: sort the className in jsx

css features: uno supported with usefully plugin

1. @apply directive in css file
2. icon preset enabled: solar icons
3. prettier enabled
4. eslint enabled
   1. sort import statements
5. vscode plugins:
   1. unocss plugin conflicts with tailwindcss plugin. please disable tailwindcss plugin.

How to use

1. get the seed project

you can use degit or github template to get the seed project:

use degit to clone the template:

npm install -g degit

degit ludafa/react-project-scaffold your-project-name

use github template

1. open this template project on github
2. use this template:
3. git clone your new repo and ready to start!

2. replace the placeholder string

1. replace the project name in package.json / react-project.code-workspace
2. rename the workspace file name from react-project.code-workspace to your-project-name.code-workspace.