N-LAB

Next.js 13にPrettierとESLintを導入する

目標

・Next.js: 13.5.1
・Prettier: 3.0.3
・ESLint: 8.49.0

目次

  1. Next.js 13プロジェクトの作成
  2. Prettierインストール
  3. ESLintインストール


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

1. 以下のコマンドを入力し、プロジェクトを新規作成します。

$ npx create-next-app@latest


2. 上記のコマンドを実行後に各ツールをインストールするかどうかを聞かれるので以下のように設定します。

√ What is your project named? ... nextjs-sample  ← 任意のプロジェクト名を入力
√ Would you like to use TypeScript? ... No / Yes  ← Yesを選択
√ Would you like to use ESLint? ... No / Yes  ← Yesを選択
√ Would you like to use Tailwind CSS? ... No / Yes  ← Noを選択
√ Would you like to use `src/` directory? ... No / Yes  ← Yesを選択
√ Would you like to use App Router? (recommended) ... No / Yes  ← Yesを選択
√ Would you like to customize the default import alias? ... No / Yes  ← Noを選択


3. 以下のコマンドを入力し、アプリを起動します。

$ npm run dev
> nextjs-sample@0.1.0 dev
> next dev
  ▲ Next.js 13.5.1
  - Local:        http://localhost:3000
 ✓ Ready in 3.1s


4. http://localhost:3000にアクセスするとトップ画面が表示されることを確認します。
nextjs top page

Prettierインストール

1. 以下のコマンドを入力し、Prettierをインストールします。

$ npm install --save-dev prettier eslint-config-prettier

※eslint-config-prettierを使用することでESLintとのルールの干渉を回避することができます。

2. プロジェクトのルートに「.prettierrc」ファイルを作成します。このファイルにはフォーマットの設定を記述します。指定できる設定の詳細はこちらをご参照ください。

{
  "trailingComma": "all",  ← 末尾にカンマをつける
  "tabWidth": 2,  ← スペースの単位
  "semi": false,  ← 末尾のセミコロンを使用しない
  "singleQuote": true,  ← シングルクォートを使用
  "jsxSingleQuote": true,  ← JSXでシングルクォートを使用
  "printWidth": 100  ← 折り返し
}

※上記の設定は一例です。

3. 任意のファイルやディレクトリをフォーマットから除外するには、プロジェクトのルートに「.prettierignore」ファイルを作成します。除外したいファイルやディレクトリを記述します。

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
**/*.html

※上記の設定は一例です。

4. 「.eslintrc.json」のextendsセクションに「prettier」を追加します。

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


5. 「package.json」のscriptsセクションに以下を追加します。

{
  "scripts": {
    "format": "prettier . --write",
    "format-file-patterns": "prettier \"./src/**/*.{js,jsx,ts,tsx,json,css}\" --write",
    "format-ignore-path": "prettier . --write --ignore-path {any file}"
  }
}

※上記の設定は一例です。prettierコマンドを使って、コマンドラインから様々な設定を追加したうえでPrettierを実行することができます。 詳細は以下を参照ください。
https://prettier.io/docs/en/cli

6. 以下のコマンドを実行することでフォーマットを実施することができます。

$ npm run format  ← フォーマットの実施
$ npm run format-file-patterns  ← ファイルの拡張子を指定したうえでフォーマットの実施
$ npm run format-ignore-path  ← 除外したいファイルやディレクトリ一覧を記述したファイル（.prettierignoreなど）を指定したうえでフォーマットの実施


ESLintインストール

// src/app/page.tsx
export const BadComponent = ({ user }) => {
  const foo = user();
  return <div></div>
};

$ npm run lint
> next lint
✔ No ESLint warnings or errors


1. 以下のコマンドを入力し、プラグインをインストールします。

$ npm install --save-dev  @typescript-eslint/parser @typescript-eslint/eslint-plugin


2. 「.eslintrc.json」を以下のように記述します。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "next/core-web-vitals",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions":  {
    "project": "./tsconfig.json"
  }
}


3. ESLintを実行し、エラーが表示されていることを確認します。

// src/app/page.tsx
export const BadComponent = ({ user }) => {
  const foo = user();
  return <div></div>
};

$ npm run lint
> next lint
src/app/page.tsx
Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
Error: 'foo' is assigned a value but never used.  @typescript-eslint/no-unused-vars
Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call

※Next.jsが提供する「next lint」は対象のディレクトリが制限されているため注意が必要です。詳細は以下を参照ください。
https://nextjs.org/docs/pages/api-reference/next-cli#lint

以上で全ての手順は完了になります