ViteでTypeScript×Reactの開発環境を構築してみた【後編】
はじめに
こんにちは、SHIFTのITソリューション部に所属しているHoribeです。
前編では、Viteを用いてTypeScript×Reactのプロジェクトを作成し、設定ファイルの中身を解説しました。今回はその続きとして、開発をサポートしてくれるESLintとPrettierの導入と設定を進めていこうと思います。
ESLint編
ESLintとは
ESLintとは、JavaScriptとTypeScriptで使用できるリンターのことです。コードを静的に解析して、構文エラーやバグが発生しやすい書き方を指摘してくれます。JavaScript/TypeScriptのリンターは複数ありますが、2023年現在ではESLintがデファクトスタンダードになっています。
参考: ESLint 公式サイト
ESLintの導入と設定
インストールは下記のコマンドです。
npm i -D eslintインストールすると、eslint --initコマンドで対話的にESLintの設定ファイルのひな形を作成することができます。今回は下記のように設定します。
$ npx eslint --init
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
▸ To check syntax, find problems, and enforce code style
? What type of modules does your project use? …
▸ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
? Which framework does your project use? …
▸ React
Vue.js
None of these
? Does your project use TypeScript? …
No
‣ Yes
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
Node
? How would you like to define a style for your project? …
▸ Use a popular style guide
Answer questions about your style
? Which style guide do you want to follow? …
▸ Standard: https://github.com/standard/eslint-config-standard-with-typescript
XO: https://github.com/xojs/eslint-config-xo-typescript
? What format do you want your config file to be in? …
JavaScript
YAML
▸ JSON
Checking peerDependencies of eslint-config-standard-with-typescript@latest
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.52.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0 eslint-plugin-promise@^6.0.0 typescript@*
? Would you like to install them now? …
No
‣ Yes
? Which package manager do you want to use? …
▸ npm
yarn
pnpm
Successfully created .eslintrc.json file in /.../vite-practice質問に回答し終えると、回答に沿った内容の.eslintrc.jsonが自動的に作成されました。中身はこのようになっています。
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended", "standard-with-typescript"],
"overrides": [],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react"],
"rules": {}
}.eslintrc.jsonで設定できるプロパティは以下があります。
env: 実行環境を指定する
extends: 既に定義されている設定を使用する
複数の設定間で共通のルール項目がある場合、後ろに記述したものでルールの値が上書きされる
overrides: 特定のファイルを指定してルールを適用する
parserOptions: パーサーの実行オプションを設定する
plugins: 有効化するプラグインを指定する
rules: 個々のルールなどの値を設定する
settings: 追加したプラグインに対する追加の設定を設定する
これだけでは不足しているので、設定を変更・追記していきます。まずは追加のプラグインをインストールします。
npm i -D eslint-plugin-react-hooks eslint-plugin-jsx-a11yeslint-plugin-react-hooks: React Hooks使用時のルールを追加するプラグイン
eslint-plugin-jsx-a11y: JSXにおいて、アクセシビリティを損ねないためのルールを追加するプラグイン
次に.eslintrc.jsonの設定を以下のように変更します。
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"standard-with-typescript",
+ "plugin:react-hooks/recommended",
+ "plugin:jsx-a11y/recommended",
+ "plugin:react/jsx-runtime"
],
"overrides": [],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
+ "@typescript-eslint",
+ "jsx-a11y",
"react",
+ "react-hooks"
],
"rules": {},
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ }
}追加で設定した中で、重要な部分を解説していきます。
jsx-a11yに対するplugin:jsx-a11y/recommendedのように、pluginsに設定するだけではルールは適用されないため、extendsに適用したいルールを追記する必要があります。eslint:recommendedはESLint自身が、plugin:@typescript-eslint/recommendedは@typescript-eslintプラグインが推奨しているルールをそれぞれ適用しています。plugin:react-hooks/recommended、plugin:jsx-a11y/recommended、plugin:react/jsx-runtimeの3つは、先ほど追加でインストールしたパッケージが推奨しているルールを適用しています。
また、settingsに追加した"react": {"version": "detect"}は、リントするReactのバージョンを自動的に判別してくれる設定になります。
基本的な設定はこれで完了です。上記では推奨されるルール群を適用していますが、チームのルールや個人の好みで個々のルールをカスタマイズすることもできます。その場合はルールごとにrulesに追記していきます。pluginsに追加したりextendsで適用したルール群のデフォルト値に関しては、それぞれの公式ドキュメントに記載されています。
VSCodeを使用している場合、拡張機能にESLintを入れておけばファイルを編集した際に自動でリントが走るようになります。
package.jsonのscriptsにもリントのコマンドを登録しておきます。
// 省略
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
+ "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'"
},
// 省略Prettier編
Prettierとは
Prettierとは、JavaScriptやTypeScript、HTML、CSSなどに対して使用できるコードフォーマッターになります。インデントや改行などの書き方について、設定した規則通りに自動整形してくれます。ESLintと同じく、Prettierもデファクトスタンダードになっています。
Prettierの導入と設定
インストールは下記のコマンドです。ESLintとPrettierで一部競合してしまうルールがあるため、それを解消するパッケージも追加します。
npm i -D prettier eslint-config-prettiereslint-config-prettier: ESLintとPrettierで競合してしまうルールを無効化する設定
eslint-config-prettierを使うため、先ほど編集した.eslintrc.jsonのextendsに追記します。"prettier"と追記することで、競合するルールを一括で無効化してくれます。この際、すべてのルールを上書きするため、必ず末尾に記述する必要があります。
// 省略
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"standard-with-typescript",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
"plugin:react/jsx-runtime",
+ "prettier"
],
// 省略ESLintにおける.eslintrc.jsonのように、Prettierにも設定ファイルが存在します。ルートに.prettierrc.jsonというファイルを作成します。このファイルに自分が適用したいルールを記述していきます。
デフォルトのルールについては、公式ドキュメントに記載されています。基本的にはデフォルトのルールを使いつつ、こちらもESLintと同じくチームの方針や個人の好みによってカスタマイズすることができます。
例えば、文字列を扱う際にダブルクォーテーションではなくシングルクォーテーションを使いたい場合、下記のように設定すると実現できます。
{
+ "singleQuote": true
}チームメンバーで設定を共有して開発することで、コーディングスタイルの違いに悩まされることがなくなります。また、Gitで管理する際に改行などの無駄な差分を無くすことができ、生産性も向上します。
VSCodeの拡張機能にPrettierを入れて、下記のようにsettings.jsonに"editor.defaultFormatter": "sbenp.prettier-vscode"と"editor.formatOnSave": trueを追記しておけば、ファイルを保存するだけでPrettierのフォーマットが走るようになります。
{
// 省略
+ "editor.defaultFormatter": "sbenp.prettier-vscode",
+ "editor.formatOnSave": true
}こちらもESLintと同様に、package.jsonのscriptsにフォーマットのコマンドを登録しておきます。
// 省略
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+ "format": "prettier --write src"
},
// 省略おわりに
今回はESLintとPrettierの導入と設定を説明しました。前編と後編を通して、Viteを使ってTypeScript×Reactの開発環境を構築する一連の流れを解説できたかと思います。
フロントエンドは技術の進歩や移り変わるスピードが速く、たった1年前の情報でも設定がうまくいかないことが多々あります。また、設定に際して参照が必要なドキュメントも多く、初めて開発環境を準備する際は大変なことが多いです。
この記事がフロントエンドの環境構築をする際の参考になれば幸いです。
執筆者プロフィール: Rintaro Horibe
ITソリューション部に所属。主に開発業務を担当している。
マイブームは音楽と散歩。
お問合せはお気軽に
SHIFTについて（コーポレートサイト）
SHIFTのサービスについて（サービスサイト）
SHIFTの導入事例
お役立ち資料はこちら
SHIFTの採用情報はこちら
PHOTO：UnsplashのRobert Udrea