Zenn
🚀

Vite + ES Lint + Prettier の Boilerplate 構築の作業録

2022/11/05に公開
React
ESLint
Prettier
Vite
tech

Overview

オハコンバンニチハ、kiiiyoです。

Webフロンエンド関連の技術調査をする際に、よくビルドツールのViteを利用することがあり自分用の雛形(Boilerplate)の構築フローを作業録として記事にしてしたためてみました。

環境情報

今回は以下の動作環境にて実行しました。

  • MacOS
    • Ventura
  • Node.js
    • 19.0.0
  • VS Code
    • 1.72.2

動作環境の構築

それでは動作環境を順を追って構築していこうと思います。まずは Node.jsの実行環境を構築したいと思います。自分は asdfというツールを使ってバージョン管理をしているので今回はこちらのツールを利用した記述とさせてください。

他のツールを利用されているのであればお好きなツールをご利用ください。

Node.jsの実行環境を構築

自分の環境ですと最新のNode.jsバージョンが19.0.0とあるのでそちらのバージョンを利用したいと思います。

asdf latest nodejs
19.0.0

以下のコマンドからNode.jsをインストールします。

asdf install nodejs latest
/../.asdf/plugins/nodejs/bin/../lib/utils.sh: line 71: printf: write error: Broken pipe
Trying to update node-build... ok
Downloading node-v19.0.0-darwin-arm64.tar.gz...

インストール完了後、利用できるリストに表示されるか確認をします。19.0.0と記載があるので利用できそうです。

asdf list nodejs    
 --definitions
  --version
  -h
  19.0.0

ローカルの作業環境化に利用バージョンを適用します。

asdf local nodejs 19.0.0
node -v
19.0.0

ここまで Node.jsを実行できる環境ができました。

Viteの実行環境を構築

Webアプリケーションのビルドうツールとして、Viteを利用した実行環境を構築します。今回は ReactとTypeScriptでコードを記載していければと思います。

npm create vite@latest
Need to install the following packages:
  create-vite@3.2.0
Ok to proceed? (y) y
✔ Project name: … app
✔ Select a framework: › React
✔ Select a variant: › TypeScript

インストールが完了後以下コマンドのアナウンスがあるので従いながら実行します。

cd app
npm install
npm run dev

VITE v3.2.2  ready in 281 ms

➜  Local:   http://127.0.0.1:5173/
➜  Network: use --host to expose

ブラウザから表示されたURLへアクセスすると以下の画面が表示されれば完了です。

ES Lintのインストール

ES Lintを利用できるようにセットアップしていきます。以下コマンドでインストールします。

npm install eslint --save-dev

続いて初期化設定をしていきます。

npm init @eslint/config

# ESLintの利用目的の設問
? How would you like to use ESLint? … 
❯ To check syntax and find problems

# どのような種類のモジュールを利用するかの設問
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)

# 利用するフレームワークの設問
Which framework does your project use? … 
❯ React

# TypeScriptを利用するかの設問
? Does your project use TypeScript? › Yes

# 利用するコードの実行環境の設問
? Where does your code run?
✔ Browser

# 設定ファイルのフォーマットの設問
? What format do you want your config file to be in? … 
❯ JavaScript

# 依存関係のパッケージをインストールするかの設問
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

? Would you like to install them now? › Yes

# 利用するパッケージマネージャーの設問
? Which package manager do you want to use? … 
❯ npm

初期化が正常に実行されると関連パッケージのインストールされ、設定ファイルの .eslintrc.cjsが出力されます。

ES Lintの設定ファイルを確認

.eslintrc.cjs
// app/.eslintrc.cjs

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

Prettierのインストール

コードフォーマットツールとしてPrettierをインストールします。

npm install prettier --save-dev

ES Lintを競合しない対応してくれる eslint-config-prettierもインストールしておきます。

npm install eslint-config-prettier --save-dev

Prettierの設定ファイルを作成

Prettierの設定ファイルを定義します。設定ファイルのファイル形式はお好みでいいのですが自分はjs系が好みなので .prettierrc.cjsにしました。

.prettierrc.cjs
module.exports = {
  tabWidth: 2,
  semi: false,
  singleQuote: true,
}

ES Lintの設定ファイルを更新

ES Lint側へ Prettier のプラグイン利用する記述を追加します。

.eslintrc.cjs
module.exports = {
    ...
    "plugins": [
        "react",
        "@typescript-eslint",
        "prettier" // 👈 追記します
    ],
    ...
}

VS Code環境の設定

自分はEditorを VS Codeを利用しているのでコード保存時にフォーマットをかける設定もしておこうと思います。

VS CodeでESLintを実行してくれるプラグインをインストールしておきます。

VS Codeの設定ファイルを定義

作業ディレクトリのルート階層に.vscode/settings.json設定ファイルを定義します。
ファイル保存時にフォーマットを実行してくれる設定がこちらになります。

//.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

動作確認

.eslintrc.cjsを開いて保存した結果が以下になります。タブサイズ更新されるなどフォーマットが変更されることが確認できました。

.eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {},
}

まとめ

Vite + ES Lint + Prettierが動作する雛形を構築してみました。
作業フローを記述したリポジトリは以下になります。ご参考までに🙏

どなたかのお役にたてば幸いです😁🙌

https://github.com/kiiiyo/vite-boilerplate

参考記事

今回この記事を執筆するにあたりこちらの記事を参考にさせていただきました。

Discussion