kitamuradev / vite-react-ts-starter

This repository is a React x TypeScript starter template. Built by Vite. ESLint and Prettier are also supported.

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

vite-react-ts-starter's Issues

ディレクトリ構成を追加

@typescript-eslint/naming-convention を緩くする

現状、camelCaseしか認めていない設定になっているため、APIの型を定義するときにfoo_barのような形式を作る際に不都合が生じている。そのためにルールを緩くする。
他の人のselectorとformatを参考にして追加修正を加えること

- selector: # PascalCaseなので、interfaceなんかも入れるべきかな？
    - typeAlias
    - typeParameter # TやUのこと？（実際にいじって調べる）
  format:
    - PascalCase
- selector:
    - property # これは特段camelCaseだけとは限らないため、削除
    - method
  format:
    - camelCase

import のパス周りを改善

理想はsrcディレクトリをベースに絶対パスで指定したい

• フロントエンド開発で気を付けていること備忘録 - typescript

@typescript-eslint/explicit-function-return-typeをtrueにする

ESLint flat config に移行

Flat Config導入完了！　新しいESLintの設定フォーマットを使ってみた

※但し、VScodeのESLintプラグインが正式対応してからでいい

README, About を書く