Skip to content

Latest commit

 

History

History
64 lines (47 loc) · 1.83 KB

README.md

File metadata and controls

64 lines (47 loc) · 1.83 KB

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: image from clipboard
  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.