React TypeScript template with Vite

This is a React + TypeScript boilerplate built with Vite.

What's inside?

• ReactJS
• Vite
• TypeScript
• Jest
• Testing Library
• Cypress
• ESLint
• Prettier
• Polyfills

Getting started

1. Create the project.

   npx degit fabien-ml/react-ts-vite-template my-app

2. Access the project directory.

   cd my-app

3. Initialize a git repository.

   git init

4. Install dependencies.

   npm install

5. Start dev server with hot reload at http://localhost:3000.

   npm run dev

Recommended VS Code extensions

• ESLint
• Prettier

Other commands

Lint commands

npm run lint

Build commands

npm run build

Run the app in production mode at http://localhost:3000.

npm run serve

Test commands

• Run unit tests and watch

  npm run test:unit

• Run unit tests with coverage

  npm run test:unit:coverage

• Run e2e tests

  npm run test:e2e

License

This project is licensed under the MIT License.

协同

• Run commit commitizen、cz-customizable 提交 commit 更新检查信息

• Run log 生成版本日志，自动根据版本号更新

husky + lint-staged + commitizen 配置提交代码规范

详情参考

样式规范工具(styleline)

样式规则配置文件 styleline.config.js

vsCode 配置 styleline 插件（工具市场搜索【styleline】

vsCode 打开【首先项-设置】，搜索 styleline 配置，

• 检查 Stylelint.Enable 设置为 true
• Stylelint.Snippet、Stylelint.Validate 点击添加项 scss
• npm 安装开发依赖

npm i -D stylelint stylelint-config-prettier stylelint-config-standard stylelint-order stylelint-config-standard-scss

色彩设计

• 基础色彩系统，主色调、次色调、警告、提示
• 字体色彩，大标题、小标题
• 其他（阴影、边框、背景）

记录 library

cra-template-npm-library

icons 方案

https://react-icons.github.io/react-icons/