Skip to content

Latest commit

 

History

History
156 lines (107 loc) · 2.67 KB

README.md

File metadata and controls

156 lines (107 loc) · 2.67 KB

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

Node.js TypeScript

Package Manager

Yarn

Library

React

Build Tool

Vite

Linter / Formatter

ESLint Prettier

Project setup

  1. Clone repository
$ git clone https://github.com/kitamuraDev/vite-react-ts-starter.git
  1. Move to repository
$ cd vite-react-ts-starter
  1. 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
  1. Install dependencies
$ yarn

or

$ yarn install
  1. Launch application
$ yarn dev
  1. Build application
$ yarn build
  1. 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