VIVITABLOG

VIVITAで活躍するメンバーの情報発信サイト

【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 になって、extendsprettier/@typescript-eslintprettier/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 をチェックします。

f:id:vivita-kamakama:20210310155830p:plain

以上です。

あとがき

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

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

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

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

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

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

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

ごーしちご。

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