TL;DR
最近、Next.js/TypeScriptのプロジェクトに、どうやってESLintとPrettierを設定したっけ？となったので、自分なりのESLintとPrettier導入する方法とESLintのルール追加の方法をまとめました。
ESLint/Prettierとは
ESLint
JavaScript/TypeScriptのコードが、スタイルガイドラインなどに指定したルールに違反していないかをチェックしてくれる静的解析ツールです。もしルールに違反している場合は、指摘してくれたり修正してくれたりします。
Prettier
コードフォーマッターです。インデントや改行などの記述方法を自動で統一してくれるツールです。
導入手順
Next.jsのプロジェクト作成
Next.jsのプロジェクトを作成します。本記事ではTypeScirptを利用するため--typescriptフラグを付与しています。
yarn create my-app --typescript
上記コマンドを実行すると対話形式でプロジェクト名を設定できるので、任意の名前を設定してください
ESLintのインストール
ESLintの初期設定
my-appディレクトリに移動しESLintの初期設定を行います。
cd my-app
yarn run eslint --init
こちらのコマンドを実行すると、以下のように対話形式でESLintの設定を行うことができるので、ご自身の環境に合わせて設定をしてください。
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / 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? · No / Yes
✔ Which package manager do you want to use? · yarn
yarn lint
lintのエラーを確認するためにはyarn lintというコマンドを使います。
実際にyarn lintコマンドを実行すると以下のようなエラーが出ます
./pages/index.tsx
8:5 Error: 'React' must be in scope when using JSX react/react-in-jsx-scope
9:7 Error: 'React' must be in scope when using JSX react/react-in-jsx-scope
...
こちらは
import React from 'react';
というimport文を追加することで解消します。
エラーのでている./pages/_app.tsxと./pages/index.tsxに上記のimport文を追加しyarn lintを実行するとエラーが解消されていることがわかるかと思います。
.eslintrc.jsの設定
.eslintrc.jsで細かいルールの設定ができます。eslintrc.jsで設定できるルールはたくさんあるので詳しくはeslint公式サイトをご覧ください。
ここではいくつかピックアップしてルール設定を行いたいと思います。
semi
"semi"は末尾にセミコロンを書くか書かないかを一貫させるルールです。
.eslintrc.jsは以下のrulesに以下の設定を追加しましょう
"rules": {
+ "semi": "error",
}
この状態でyarn lintを実行するとセミコロンが必要な箇所にエラーが出ていることがわかるかと思います。
eqeqeq
"eqeqeq"は厳密等価演算子を書くか書かないかを一貫させるルールです。
等価演算子と厳密等価演算子の違いはこちらの記事をご覧ください。
「==」（等価演算子）と「===」（厳密等価演算子）の違いを解説してみた
.eslintrc.jsは以下のrulesに以下の設定を追加しましょう
"rules": {
+ "eqeqeq": "error",
}
Prettierの設定方法
Prettierをインストールします。
yarn add --save-dev prettier eslint-config-prettier
eslint-config-prettierは ESLintのコードフォーマットに関連するルールを無効化し、バグを検出するルールのみを有効にするプラグインです。
.eslintrc.jsにPrettierの項目を追加します
"extends": [
...,
+ "prettier",
],
vscodeの設定
vscodeの拡張機能でESLintとPrettier-Code formatterをインストールします。
vscodeのsettingsから以下2つの設定を行います。こちらを設定することでファイル保存時にコードが整形されるようになります。
・defaultFormatterをesbenp.prettier-vscodeに変更
・formatOnSaveをtrueに変更
まとめ
- Next.jsのプロジェクトにESLint, Prettierを設定する方法を解説しました。
- eslintrc.jsファイルにESLintのルール追加をする方法を解説しました。