
Here's how to setup React + Vite + TypeScript and deploy on Vercel.  
And also adding ESLint, Prettier, Husky to the project.

[Demo](https://react-vite-boilerplate-eight.vercel.app/)  
[GitHub repository](https://github.com/chocolat5/react-vite-boilerplate)

## Technologies/Features

- [Vite](https://vitejs.dev/): ^5.0.8
- [TypeScript](https://www.typescriptlang.org/): ^5.2.2
- [React](https://react.dev/): ^18.2.0
- [ESLint](https://eslint.org/): ^8.55.0
- [Prettier](https://prettier.io/): ^3.1.1
- [Husky](https://typicode.github.io/husky/): ^8.0.0

## Prerequisites

- Git
- Node.js (Vite requires Node.js version 18+. 20+)

## 導入手順・環境設定

### 1. Create Vite Project

```bash
npm create vite@latest my-react-app --template react-ts
```

Check if it works.

```bash
cd my-react-app
npm install
npm run dev
```

Access the URL, and you can see this.
![](./react-vite-boilerplate-1.png)

### 2. Install Prettier

```bash
npm i -D prettier
```

Create `.prettierrc` . Here is an example of it (basic + additional).

```json
{
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "useTabs": true,
  "printWidth": 80
}
```

Create `.prettierignore` . Here is an example of it (default + additional).

```json
**/.git
**/.svn
**/.hg
**/node_modules
build
dist
public
```

### 3. ESLint Setting

Init ESLint and `.eslintrc.json` file will be created in your project.

```bash
npm init @eslint/config
```

Install another packages.

```json
npm i -D eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
```

Here is an example of config file (default + additional).

```json
{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "airbnb",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb-typescript",
    "plugin:import/typescript",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json",
    "extraFileExtensions": [".md", ".json"]
  },
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "prettier",
    "import"
  ],
  "rules": {
    "semi": [2, "always"],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/triple-slash-reference": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "ignorePatterns": ["vite.config.ts"],
  "root": true
}
```

Create `.eslintignore` file.

```json
node_modules
dist
.github
```

If it’s working, you will see some errors.
![](./react-vite-boilerplate-2.png)

### 4. Init and Install Husky

```bash
npx husky-init && npm install
```

Install lint-staged.

```bash
npm i -D lint-staged
```

Create `.huskyrc` file.

```json
{
  "hooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}
```

Edit `pre-commit` file inside `.husky` folder.

```bash
npm test
↓
npm run lint-staged
```

You will not be able to commit when you have a lint error.

## Deploy on Vercel

1. Push the previous work to the repository.

```bash
git push origin <branch-name>
```

2. Log-in to the [Vercelhttps://vercel.com/](https://vercel.com/).
3. Click "Add New Project" button and choose the repository, and then press the "import" button.
4. Deploy without changing any settings.
5. After completing the deploy, check the URL.

[Demo](https://react-vite-boilerplate-eight.vercel.app/)  
[GitHub repository](https://github.com/chocolat5/react-vite-boilerplate)

## 参照

- Getting Started | Vite [https://vitejs.dev/guide/](https://vitejs.dev/guide/) （2023-12-13）
- Configuration File · Prettier [https://prettier.io/docs/en/configuration](https://prettier.io/docs/en/configuration) （2023-12-13）
- huskyを利用してgit hooksを作る [https://zenn.dev/ianchen0419/articles/a70d181de74df0](https://zenn.dev/ianchen0419/articles/a70d181de74df0) （2023-12-13）


Setup Vite + React + TypeScript (ESLint + Prettier + Husky) Project and Deploy on Vercel

Tags