Next.js13の開発環境構築手順 step02 eslintとprettierを設定する

はじめに

Next.js13の開発環境構築手順 step02 をやっていこうと思います。

Next.jsのベーシックな設定を確認する

Next.jsのベーシックなESLintの設定を確認するために、まずは以下のドキュメントを読みました。

Configuring: ESLint | Next.js

eslint-config-next の確認をする

yarn create next-app --typescript したときに生成された package.json の dependencies に初めから eslint-config-next があったので、どのようなpluginが既に含まれているか、 node_modules/eslint-config-next/index.js を確認しました。

.eslintrc.js に root: true を設定する

以下の通り .eslintrc.js を編集します。

module.exports = {
  extends: [
    'next/core-web-vitals',
  ],
  root: true,
};

以下のページを参考にしています。

https://eslint.org/docs/latest/use/configure/configuration-files#cascading-and-hierarchy

eslint:recommended の設定を追加する

ベースとして eslint:recommended の設定を適用します。

以下の通り .eslintrc.js を編集します。

module.exports = {
  extends: [
    'eslint:recommended',
    'next/core-web-vitals',
  ],
  root: true,
};

@typescript-eslint/eslint-plugin をインストールして設定する

TypeScriptで書いていくので @typescript-eslint の recommended な設定を適用します。

パッケージをインストールします。

yarn add --dev @typescript-eslint/eslint-plugin

以下の通り .eslintrc.js を編集します。

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'next/core-web-vitals',
  ],
  plugins: ['@typescript-eslint'],
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname,
  },
  root: true,
};

記述した内容について、基本的なことを一応補足しておきます。

pluginsに @typescript-eslint を追加することで、今インストールした @typescript-eslint/eslint-plugin に定義されたルールが使用可能になります。

ただ、これだけでは使用可能になるだけで、実際にルールを適用しているわけではないので、extends に plugin:@typescript-eslint/recommended と plugin:@typescript-eslint/recommended-requiring-type-checking を追記することで、ルールが適用されます。

どのルールを適用するか（extendsするか）については、以下のページを参考にして決めました。

上記した参考ドキュメント ( https://typescript-eslint.io/linting/configs/ ) に

We recommend most projects use recommended-requiring-type-checking (which requires typed linting).

ほとんどのプロジェクトでは、required-requiring-type-checking (型付きリンティングが必要) を使用することをお勧めします。

と書いてあったので plugin:@typescript-eslint/recommended-requiring-type-checking も設定しています。

また、( https://typescript-eslint.io/architecture/parser/#project )には

This option allows you to provide a path to your project's tsconfig.json. This setting is required if you want to use rules which require type information.

このオプションを使用すると、プロジェクトの tsconfig.json へのパスを指定できます。タイプ情報を必要とするルールを使用する場合は、この設定が必要です。

と記載されているため parserOptions の設定もしています。

prettier と eslint-config-prettier をインストールして設定する

インストール

以下のコマンドを実行しました。

yarn add --dev prettier eslint-config-prettier

.eslintrc.jsの設定をする

以下の通り .eslintrc.js を編集します。

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'next/core-web-vitals',
    'prettier',
  ],
  plugins: ['@typescript-eslint'],
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname,
  },
  root: true,
};

prettierは以下の公式ドキュメントに倣って extends の最後に記述しています。

https://github.com/prettier/eslint-config-prettier

.prettierrcを作成する

ファイルを作成します。

vim .prettierrc

以下の内容を記述します。

{
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

@types/prettier を追加する

typesyncを実行します。

yarn typesync

@types/prettier をインストールします。

yarn install

eslint-plugin-importを設定する

node_modules/eslint-config-next/index.js を先ほど確認したときに、 eslint-plugin-import が含まれていることは確認できているので、設定だけ追加していきます。

以下の通り extends と rules プロパティに追記します。

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'next/core-web-vitals',
    'prettier',
  ],
  plugins: ['@typescript-eslint'],
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname,
  },
  root: true,
  rules: {
    'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'sibling',
          'index',
          'object',
          'type',
        ],
        'newlines-between': 'always',
      },
    ],
  },
};

以下の公式ドキュメントを参照して設定しました。

plugin:import/recommended については、以下の記載がありました。

'recommended' is the combination of these two rule sets ( 'recommended' は次の 2 つのルールセットの組み合わせです。 ) - plugin:import/errors - plugin:import/warnings

import/order はimportの記述順に関するルールを設定できます。
このrulesについてはプロジェクトのディレクトリ構造が具体的に決まってきたらより詳細に設定するのも良いと思います。

package.json の scripts に lint:fix と format を定義する

package.json の scripts に以下の行を追記します。

    "lint:fix": "next lint --fix && yarn format",
    "format": "prettier --write './src/**/*.{ts,tsx}'"

eslint と prettier でコードを自動修正する

以下のコマンドを実行して、コードを自動修正します。

yarn lint:fix

VSCode の extentions をインストールする

VSCodeのextentionは似たようなのがあったりするので、私が使用しているものの identifier も書いておきます。

ESlint

identifier: dbaeumer.vscode-eslint
参考リンク: ESLint - Visual Studio Marketplace

Prettier

identifier: esbenp.prettier-vscode
参考リンク: Prettier - Code formatter - Visual Studio Marketplace

プロジェクトの VSCode の設定をする

.vscode ディレクトリを作成する

まずディレクトリを作成します。

mkdir .vscode

.vscode/extensions.json を作成する

ファイルを作成します。

vim .vscode/extensions.json

参考までに私は現在以下のような感じで設定しています。適宜必要なものを設定してください。

{
  "recommendations": [
    "dbaeumer.vscode-eslint", // eslint
    "emmanuelbeziat.vscode-great-icons", // iconを変更
    "esbenp.prettier-vscode", // prettier
  ]
}

.vscode/settings.json を作成する

ファイルを作成します。

vim .vscode/settings.json

参考までに私は現在以下のような感じで設定しています。適宜必要なものを設定してください。

{
  "editor.fontFamily": "Cica",
  "editor.fontSize": 18,
  "editor.insertSpaces": true, // Tabキーで半角スペースを入力
  "editor.matchBrackets": "always", // 対応する括弧の強調表示
  "editor.renderWhitespace": "all", // 空白文字を可視化 "all" | "boundary"
  "editor.tabSize": 2, // Tabキーで半角スペースn個分
  "editor.wordWrap": "on", // 1行に収まらない場合は改行して表示する
  "editor.formatOnSave": false, // ファイル保存時、prettier による自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "[graphql]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  }
}

今回はここまでにしておきます。

続きはこちら

Next.js13の開発環境構築手順 step03 css-in-jsとstylelintを設定する - Motomichi Works Blog