📖

Next.jsのインストールとESLint・Prettierのセットアップ

公開日
9か月前
2023-10-01
更新日
7か月前
2023-11-05
更新履歴
preview

この記事の概要

App Routerを使用するNext.jsのインストールとその後の開発環境構築の手順を記録した記事です。作成するアプリケーションに関わらず共通して必要となるような内容を中心に書かれています。

  • ESLintによるルールの設定
  • Prettierによるコードフォーマットのための設定

また、CSSフレームワークにTailwind CSSを使用した内容になっています。使用しない場合、適宜読み替えが必要になります。

以下の環境での作業を元に作成した記事です:

  • macOS 13.5.1
  • Node 18.18.0
  • pnpm 8.7.6
  • Next.js 13.4.19
  • Tailwind CSS 3.3.3

インストール

Terminal
pnpm create next-app

上記のコマンドでインストールします。オプションは下記のようになります。

  • srcディレクトリを作成するようにしています。階層が深くなるのが嫌な場合は作成しなくても良いです。
  • Import aliasを設定して import hoge from '@/hoge' のように独自のコンポーネントをインポートできるようにしています。
Terminal
Need to install the following packages:
create-next-app@13.4.19
Ok to proceed? (y)
 What is your project named? blog
 Would you like to use TypeScript? Yes
 Would you like to use ESLint? Yes
 Would you like to use Tailwind CSS? Yes
 Would you like to use `src/` directory? Yes
 Would you like to use App Router? (recommended) … Yes
 Would you like to customize the default import alias? Yes
 What import alias would you like configured? @/*
Creating a new Next.js app in /your/path/blog

コードフォーマットのための設定

pnpm format でプロジェクト内のTypescriptのファイルを自動でフォーマットできるようにするためにPrettierをインストールします。

Terminal
pnpm add -D -E prettier eslint-config-prettier prettier-plugin-tailwindcss

上記のコマンドでPrettiereslint-config-prettierをインストールします。

続けて、以下のように各種ファイルを修正・作成していきます。

package.jsonを修正

下記のように修正することで pnpm format と実行することで、ソースコードのフォーマットができるようになります。

package.json
"scripts": {
  "lint:fix": "next lint --fix",
  "prettier": "prettier --write --ignore-unknown .",
  "prettier:check": "prettier --check --ignore-unknown .",
  "format": "pnpm prettier && pnpm lint:fix"
}

.eslintrc.jsonを修正

eslint-config-prettierをESLintの設定に追加して有効にします。

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

.prettierrc.yamlを作成

Prettierの設定ファイルを作成します。

.prettierrc.yaml
trailingComma: 'es5'
tabWidth: 2
semi: false
singleQuote: true
jsxSingleQuote: false
arrowParens: 'always'
printWidth: 100
plugins: ['prettier-plugin-tailwindcss']

.prettierignoreを作成

Prettierの適用を除外するためのファイルを作成します。

.prettierignore
.vercel
.next
pnpm-lock.yaml

.vscode/settings.jsonの修正

VS Codeを使用している場合は設定ファイルに下記のように追記することで保存時に自動的にフォーマットしてくれるようになります。拡張機能のインストールが必要です(後述)。

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Typescriptのimportを綺麗にするための設定

Terminal
pnpm add -D -E eslint-plugin-import eslint-plugin-unused-imports

上記コマンドでESLintのプラグインをインストールします。eslint-plugin-importとeslint-plugin-unused-importsです。

次に、下記の設定を.eslintrc.jsonに追記することで、importを並び替えたり未使用のimportを削除するようになります。

また、no-restricted-importsimport xxx from '../../xxx' のような相対パスで親の階層からのimportを禁止するような設定も追加しています。

.eslintrc.json
{
  // ...
  "plugins": ["import", "unused-imports"],
  "rules": {
    "unused-imports/no-unused-imports": "error",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          ["parent", "sibling"],
          "object",
          "type",
          "index"
        ],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }
    ],
    "no-restricted-imports": ["error", { "patterns": ["../"] }]
  }
  // ...
}

ESLintのセミコロンに関する設定

Typescriptのコードでセミコロンを省略するための設定です。.eslintrc.jsonの rules に下記を追加します。

.eslintrc.json
"rules": {
  "semi": ["error", "never", { "beforeStatementContinuationChars": "never" }],
  "semi-spacing": ["error", { "after": true, "before": false }],
  "semi-style": ["error", "first"],
  "no-extra-semi": "error",
  "no-unexpected-multiline": "error",
  "no-unreachable": "error"
}

Tailwind CSSのためのESLintの設定

eslint-plugin-tailwindcssを使って以下のようなルールを追加します。

  • Tailwind CSSのクラス名を特定の順序に自動的に並べ替えます。
  • 存在しない、または間違ったTailwind CSSのクラス名を使用している場合、それを自動的に警告またはエラーとして検出します。
  • 重複している、または互いに打ち消し合うようなクラス名が使用されている場合、それを検出します。

eslint-plugin-tailwindcss をインストール

Terminal
pnpm add -D -E eslint-plugin-tailwindcss
.eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier", "plugin:tailwindcss/recommended"],
}

コマンドを実行後、.eslintrc.jsonextendsplugin:tailwindcss/recommended を追記します。

VS Codeの拡張をインストール

  • ESLint
    ESLintのエラーを表示できるようになります。
  • Prettier - Code formatter
    Prettierによるコードフォーマットができるようになります。
  • Tailwind CSS IntelliSense
    Tailwind CSSのクラス名の自動補完などができるようになります。

コマンドラインでインストールする場合は下記を実行してください。

Terminal
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss