Vite × React × TypeScript Starter Template

Features

• Minimal configure
• Build with Vite
• ESLint（Airbnb style guide）and Prettier Supported
• Run ESLint on every commit（CI）

Tech Stack

Language

Package Manager

Library

Build Tool

Linter / Formatter

Project setup

1. Clone repository

$ git clone https://github.com/kitamuraDev/vite-react-ts-starter.git

2. Move to repository

$ cd vite-react-ts-starter

3. 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

4. Install dependencies

$ yarn

or

$ yarn install

5. Launch application

$ yarn dev

6. Build application

$ yarn build

7. Preview build results

$ yarn preview

About Git-Hooks

Basically, when you do yarn install, yarn prepare is also executed, but if it is not executed, please execute it explicitly.

$ yarn prepare

If successful, the following settings will be written to .git/hooks/pre-commit.

#!/bin/sh
npx lint-staged

Editor Config

• Don't forget to install the VScode extension
• The location of the configuration file is Users> Username> Library> Application Support> Code> User> settings.json

Run ESLint on save

{
  "eslint.packageManager": "yarn",
  "editor.formatOnSave": false, // To avoid conflict with Prettier
  "editor.codeActionsOnSave": ["source.addMissingImports", "source.fixAll.eslint"]
}

Run Prettier on save

{
  "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
  }
}

Future plans

• add Directory structure
• add Testing Framework（Jest, React-Testing-Library）
• add Global Store（Recoil, Jotai etc...）

Contact

Twitter: @kitamuraDev

License

MIT