[Next.js]複数人で開発する際のPrettierの設定手順メモ

はじめに

複数人でNext.jsで開発を行う際に、
ESlintやPrettierの設定を共有する方法をメモしたものになります

ESLintの導入

• VSCodeの拡張機能から ES Lint をインストールする
  

srcディレクトリの作成

Next.js にデフォルトで搭載された ESLint では、
lintコマンドの対象ディレクトリが

• pages
• lib
• components
  の3つになる

上記の3つのディレクトリを src ディレクトリ配下(任意の名前)に移行し、
lintの対象先をsrcディレクトリに変更する

・・・
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --dir src"
  },
・・・

Prettierのセットアップ

• VSCodeの拡張機能からPrettierをインストールする
  
• プロジェクト直下に.prettierrc ファイルを作成し、ルールを記述

	{
		"printWidth": 100,
		"trailingComma": "es5",
		"tabWidth": 2,
		"semi": true,
		"singleQuote": true,
		"endOfLine": "lf"
	}

パッケージのインストール

下記2つのパッケージをインストールする

• prettier: コードの整形
• eslint-config-prettier: eslintとのバッティングを回避

npm install -D prettier eslint-config-prettier

ファイル保存時に整形するようにVSCodeの設定を変更

• .eslintrcに prettier を追加し、ESLint と Prettier のコード整形がバッティングしないようにする

{
  "extends": ["next/core-web-vitals", "prettier"]
}

• .vscode/settings.json を編集し、ファイル保存時に整形するように修正する

{
  // デフォルトのフォーマッタを prettier に設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時、prettier による自動フォーマット
  "editor.formatOnSave": true,
  // ファイル保存時、ESLint による自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

リポジトリに追加

リモートリポジトリに追加する
※github上でリポジトリを作成し、README.mdなどは作成していない前提

git add .
git commit -m "message"
git push origin main

動作確認

適当なディレクトリを作成し、リモートリポジトリをクローンする

git clone https://github.com/hogehoge/fugafuga.git

Next.jsが立ち上がるか確認

npm run dev

補足

下記のようなエラーが出力された場合

> next dev

sh: next: command not found

npm upgrade を試してみる

npm upgrade

※自分の場合は上記のコマンド実行後、npm run devできるようになりました

参考

• Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう
• 【VSCode】Prettierの使い方＆おすすめ設定を紹介
• Next.jsの開発サーバーが立ち上がらなかったとき