【Next.js】ESLintとPrettierを導入して自動でコードを綺麗にする

前置き
今回作るやつの構成
実際に導入してみた
最後に
参考

前置き

「ファイル保存のたびに自動でコードを綺麗にすることで、開発効率の向上とバグの予防をしよう」という趣旨の記事です。

本記事ではNext.jsプロジェクトの構築からESLintとPrettierの導入、TypeScriptのパーサー等の設定までを行います。

今回作るやつの構成

おおむねはこんな感じの構成です

パッケージ名	バージョン	説明
react	18.2.0	みなさんご存知React
next	13.2.4	Reactベースのフレームワーク
eslint	8.36.0	JSやTSの構文チェックをしてくれるやつ
prettier	2.8.7	ソースコードを整形してくれるやつ
typescript	5.0.2	みなさんご存知TypeScript

細かいところまで気になる方に向けて、完成形のpackage.jsonも載せておきます。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'",
    "format:check": "eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'"
  },
  "dependencies": {
    "@types/node": "18.15.10",
    "@types/react": "18.0.29",
    "@types/react-dom": "18.0.11",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.0.2"
  },
  "devDependencies": {
    "@typescript-eslint/parser": "^5.56.0",
    "eslint-config-prettier": "^8.8.0",
    "prettier": "^2.8.7"
  }
}

実際に導入してみた

Next.jsのプロジェクト作成

create next appを用いて作成していきます。都度質問をされるので以下のように進めてください。

yarn create next-app

✔ What is your project named?
-> my-app     // プロジェクト名なので自由に決めて大丈夫です

✔ Would you like to use TypeScript with this project?
-> Yes

✔ Would you like to use ESLint with this project?
-> Yes

✔ Would you like to use `src/` directory with this project?
-> Yes

✔ Would you like to use experimental `app/` directory with this project?
-> No

✔ What import alias would you like configured?
-> @/*     // デフォルトのままエンター押して大丈夫です

各種必要なツールのインストール

パッケージ

yarn add -D eslint-config-prettier prettier @typescript-eslint/parser

vscodeの拡張機能

以下の画像のようにvscode内からprettierとeslintの拡張機能をインストールしてください。vscodeを使用していない人はスルーして大丈夫です。

各種設定ファイルの作成

.eslintrc.json

構文解析のルールを書くところ

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "project": "./tsconfig.json",
    "sourceType": "module"
  },
  "extends": ["next/core-web-vitals", "prettier"]
}

.eslintignore

eslintの構文解析の対象外にしたいファイルを記述するところ

build/
public/
**/node_modules/
**/*.min.js
*.config.js
.*lintrc.js

.prettierrc

フォーマットのルールを書くところ

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "auto"
}

.vscode/settings.json

vscodeの設定を記述するところ
ファイル保存時に自動でフォーマットしてくれるようになる

{
  "workbench.editor.enablePreview": false,
  "files.insertFinalNewline": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "diffEditor.maxComputationTime": 0,
  "settingsSync.ignoredExtensions": [],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
  "html.format.contentUnformatted": ""
}

package.json

フォーマッター等を走らせるスクリプトを追記する
コマンドラインからフォーマッターを走らせるときはyarn format
prettierとeslintのルールの競合を調べるときはyarn format:check

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    // 以下の3行追記
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'",
    "format:check": "eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'"
  },
  (略)
}

最後に

eslintもprettierも最低限のルールのみを記載したので、カスタマイズもしやすいかと思います。

開発効率爆上げしたい方はぜひお試しください。