【Everyday Next.js】2. Linter / Formatter

nextjs

ESLint

nextjs.org

create-next-app をした時点で ESLint がすでにセッティングされている。

以下のコマンドで lint を走らせることができる。

npm run lint

色々カスタマイズ方法が公式ドキュメントに載っているが、ESLint にそこまで拘りはないので多くは弄らず。

一点だけ。後述する prettier と共存させるには、eslint-config-prettier を入れた方が良いみたいなのでそれだけ追加。

npm i -D eslint-config-prettier
//  .eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"]
}

あと、ESLint について気を付けなければいけない点が。

You can now run next lint every time you want to run ESLint to catch errors. Once ESLint has been set up, it will also automatically run during every build (next build). Errors will fail the build, while warnings will not.

build の度に自動で lint が走るとなっている。つまり、デプロイする際に lint error があるとビルドに失敗するということであり、事前に lint error が起きないかどうかのチェックが必要であるということである。

Prettier

formatter には、おなじみ prettier を使いたい。

先ほどの公式ドキュメントにも prettier の言及があり、eslint と競合しないための設定は前述の通りである。

VSCode で prettier を使いたい場合は、vscode の prettier 拡張機能を入れてあげれば OK。

github.com

.prettierrc に好みの設定を書くことでカスタマイズもできる。

私のお気に入りの設定は以下の通り。

// .prettierrc
{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "bracketSpacing": false
}

あとは、ファイル保存時に自動でフォーマットされるようにしてあげる。

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
}

おわりに

今日は、Next.js に Linter と Formatter を導入した。

次回は、lint-staged あたりを導入する予定。