Zenn
📖

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

2022/05/02に公開
Next.js
VS Code
ESLint
Prettier
tech

はじめに

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

ESLintの導入

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

srcディレクトリの作成

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

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

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

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

Prettierのセットアップ

  • VSCodeの拡張機能からPrettierをインストールする
  • プロジェクト直下に.prettierrc ファイルを作成し、ルールを記述
.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 のコード整形がバッティングしないようにする
.eslintrc
{
  "extends": ["next/core-web-vitals", "prettier"]
}
  • .vscode/settings.json を編集し、ファイル保存時に整形するように修正する
.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できるようになりました

参考

Discussion