【2021年】Next.js に linter を設定する

Next.js に linter を設定する

VIVITA エンジニアの、かまかまです。
Next.js で linter を設定した時の手順を紹介します。

以前、ESLint と Prettier の共存設定とその根拠についてを参考に、linter の設定をしていました。(とても勉強になりました！)

その後、Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になったとのことで、linter の設定を見直すことにしました。

前提

create-next-app でまっさらなプロジェクトを作成し、Next.js 公式の方法で TypeScript の設定をしたところからです。

必要なものをインストール

$ npm i -D eslint @typescript-eslint/eslint-plugin eslint-plugin-react @typescript-eslint/parser eslint-config-prettier prettier

.eslintrc.js を作成

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  plugins: ['react', '@typescript-eslint'],
  rules: {},
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
}

env のところの設定がないと、.eslintrc.js 自身がリンターで叱られてしまいます。

settings.react のところの設定がないと、以下の Warning が出ちゃいます。

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .

eslint-config-prettier が Version 8.0.0 になって、extends に prettier/@typescript-eslint や prettier/react の設定は不要になりました。(設定するとエラーになります。)

https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

.prettierrc.json を作成

Next.js 自身の設定を参考に、.prettierrc.json を作成します。

{
  "singleQuote": true,
  "semi": false
}

.prettierignore を作成

Next.js 関連のファイルで Prettier のエラーになるところがあるので、Next.js 自身の設定を参考に、.prettierignore を作成します。

node_modules
**/.next/**
**/_next/**
**/dist/**
packages/next/bundles/webpack/packages/*.runtime.js
packages/next/compiled/**
packages/react-refresh-utils/**/*.js
packages/react-refresh-utils/**/*.d.ts
packages/react-dev-overlay/lib/**
**/__tmp__/**
lerna.json
.github/actions/next-stats-action/.work
packages/next-codemod/transforms/__testfixtures__/**/*
packages/next-codemod/transforms/__tests__/**/*
packages/next-codemod/**/*.js
packages/next-codemod/**/*.d.ts
packages/next-env/**/*.d.ts
test-timings.json

package.json の編集

手動で ESLint と Prettier のチェックを確認するときのために、package.json に以下の行を追加します。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint:eslint": "eslint . --ext js,jsx,ts,tsx --max-warnings=0", <- これと
  "lint:prettier": "prettier --check ." <- これを追加します
},

VSCode の設定

VSCode を使用する場合、以前の推奨設定では ESLint の中から Prettier を起動する形だったので、VSCode には ESLint プラグインだけあれば大丈夫でした。 新しい推奨設定では Prettier を直接起動しなければならないので、ESLint プラグインと Prettier プラグインの両方が必要です。

このとき、VSCode の設定で Default Formatter の設定を次のようにし、Format On Save をチェックします。

以上です。

あとがき

以前の記事で、GitHub のブランチ削除のときに、すごく感銘を受けたことを書きました。

それは VIVITA に入るずーっと前、とある外部の会社さんで、開発フローのレクチャーを受けていたときでした。

GitHub のマージ手順の説明のとき、そのリーダーさんは言いました。

「ブランチをマージしたら、削除ボタンでブランチを削除してください。」

当時は GitHub での開発フローの経験が乏しく、マージしたブランチをみんなどのタイミングで削除しているのか、誰からも聞いたことがありませんでした。

なのでその説明を受けたとき、その会社さんの細部の手順を明確にし公開してくれるそのリーダーさんに、とても感謝したのです。

ブランチは、マージをしたら、削除する。

ごーしちご。

ありがとうございました。