Vite × React × TypeScript Starter Template
- Minimal configure
- Build with Vite
- ESLint(Airbnb style guide)and Prettier Supported
- Run ESLint on every commit(CI)
![TypeScript](https://camo.githubusercontent.com/dd9548d958f60ba37fec0ef60be62a80c34f3a48701b7e1ea9bbaf06b7cb75e2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547970655363726970742d76342e362e342d626c7565)
![Yarn](https://camo.githubusercontent.com/d2869037f551e929117f8d041da602c8d5fb8cdf4510bb1b3733384d72655e51/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5961726e2d76312e32322e352d626c7565)
![React](https://camo.githubusercontent.com/5c55302157d66d9a8c2d215a3364a74e4262e1319c8c3bdbe385bdd7f4b60413/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163742d7631382e322e302d626c7565)
![Vite](https://camo.githubusercontent.com/3b47ff02c71ea37d175538ca2e3d1aa6bc1987e3b8b4ffa1a74e954bcf52983a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f566974652d76332e302e302d626c7565)
![Prettier](https://camo.githubusercontent.com/0af52e19b2ac5943c38315410694033986fa1cd911ea1c68b6b7b467e5eafe4e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f50726574746965722d76322e372e312d626c7565)
- Clone repository
$ git clone https://github.com/kitamuraDev/vite-react-ts-starter.git
- Move to repository
$ cd vite-react-ts-starter
- Rewrite git information
$ rm -rf .git
$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin https://github.com/user/repo.git
$ git push -u origin main
- Install dependencies
- Launch application
- Build application
- Preview build results
Basically, when you do yarn install
, yarn prepare
is also executed, but if it is not executed, please execute it explicitly.
If successful, the following settings will be written to .git/hooks/pre-commit
.
#!/bin/sh
npx lint-staged
- Don't forget to install the VScode extension
- The location of the configuration file is
Users> Username> Library> Application Support> Code> User> settings.json
{
"eslint.packageManager": "yarn",
"editor.formatOnSave": false, // To avoid conflict with Prettier
"editor.codeActionsOnSave": ["source.addMissingImports", "source.fixAll.eslint"]
}
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.formatOnSave": true
},
"[typescript]": {
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.formatOnSave": true
},
"[json]": {
"editor.formatOnSave": true
}
}
Twitter: @kitamuraDev
MIT