|
1 | | -# React + TypeScript + Vite |
| 1 | + |
2 | 2 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +# React Tailwindcss Boilerplate build with Vite |
4 | 4 |
|
5 | | -Currently, two official plugins are available: |
| 5 | +This is a boilerplate build with Vite, React 18, TypeScript, Vitest, Testing Library, Commitlint, TailwindCSS 3, Eslint and Prettier. |
6 | 6 |
|
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 7 | +## What is inside? |
9 | 8 |
|
10 | | -## Expanding the ESLint configuration |
| 9 | +This project uses many tools like: |
11 | 10 |
|
12 | | -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: |
| 11 | +- [Vite](https://vitejs.dev) |
| 12 | +- [ReactJS](https://reactjs.org) |
| 13 | +- [TypeScript](https://www.typescriptlang.org) |
| 14 | +- [Vitest](https://vitest.dev) |
| 15 | +- [Testing Library](https://testing-library.com) |
| 16 | +- [Commitlint gitmoji](https://www.npmjs.com/package/commitlint-config-gitmoji) |
| 17 | +- [Tailwindcss](https://tailwindcss.com) |
| 18 | +- [Eslint](https://eslint.org) |
| 19 | +- [Prettier](https://prettier.io) |
13 | 20 |
|
14 | | -- Configure the top-level `parserOptions` property like this: |
| 21 | +## Getting Started |
15 | 22 |
|
16 | | -```js |
17 | | -export default { |
18 | | - // other rules... |
19 | | - parserOptions: { |
20 | | - ecmaVersion: 'latest', |
21 | | - sourceType: 'module', |
22 | | - project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'], |
23 | | - tsconfigRootDir: __dirname, |
24 | | - }, |
25 | | -} |
| 23 | +### Install |
| 24 | + |
| 25 | +Use this template or clone this repository. |
| 26 | + |
| 27 | +Install dependencies. |
| 28 | + |
| 29 | +```bash |
| 30 | +yarn install |
| 31 | +``` |
| 32 | + |
| 33 | +Serve with hot reload at <http://localhost:5173>. |
| 34 | + |
| 35 | +```bash |
| 36 | +yarn run dev |
| 37 | +``` |
| 38 | + |
| 39 | +### Lint |
| 40 | + |
| 41 | +```bash |
| 42 | +# check lint |
| 43 | +yarn run lint |
| 44 | + |
| 45 | +# fix lint |
| 46 | +yarn run lint:fix |
26 | 47 | ``` |
27 | 48 |
|
28 | | -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` |
29 | | -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` |
30 | | -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list |
| 49 | +### Typecheck |
| 50 | + |
| 51 | +```bash |
| 52 | +yarn run typecheck |
| 53 | +``` |
| 54 | + |
| 55 | +### Build |
| 56 | + |
| 57 | +```bash |
| 58 | +yarn run build |
| 59 | +``` |
| 60 | + |
| 61 | +### Test |
| 62 | + |
| 63 | +### Commitlint |
| 64 | +#### Structure |
| 65 | +The Gitmoji Structure of commit styles is below |
| 66 | + |
| 67 | +```bash |
| 68 | +:gitmoji: type(scope?): subject |
| 69 | +body? |
| 70 | +footer? |
| 71 | +``` |
| 72 | + |
| 73 | +Example |
| 74 | + |
| 75 | +```bash |
| 76 | +:sparkles: feat(changelog): support chinese title |
| 77 | + |
| 78 | +:bug: fix(config): fix a subject bug |
| 79 | + |
| 80 | +:memo: docs: update README.md |
| 81 | + |
| 82 | +:bulb: docs(plugin): update comments |
| 83 | +``` |
| 84 | + |
| 85 | +## License |
| 86 | + |
| 87 | +This project is licensed under the MIT License. |
0 commit comments