EslintとPrettierの導入 Next.js

Next.jsのプロジェクトにフォーマッターを導入したい

Next.jsで作成したプロジェクトにEslintとPrettierを導入する手順について説明します。インストールするものは以下の5つです。

• npmでインストールするもの
  • eslint
  • prettier
  • eslint-config-prettier
• VSCodeでインストールするもの
  • vscode-eslint
  • prettier-vscode

導入手順

1. npmでprettierをインストールする

   Copied!!
   $ npm install prettier --save-dev
   

2. npmでeslintをインストールする

   Copied!!
   $ npm install eslint --save-dev
   

3. npmでeslint-config-prettierをインストールする

   Copied!!
   $ npm install eslint-config-prettier --save-dev
   

4. vscodeの拡張機能からvscode-eslintをインストールする

5. vscodeの拡張機能からprettier-vscodeをインストールする

6. .eslintrc.jsonをプロジェクトルートディレクトリ下に作成する

   Copied!!
   $ vim .eslintrc.json
   

   .eslintrc.json
   Copied!!
   {
     "extends": ["next", "next/core-web-vitals", "prettier"],
     "plugins": [],
     "rules": {
       "indent": ["error", 2],
       "max-len": ["error", { "code": 80 }],
       "no-tabs": ["error"]
     }
   }
   

7. .vscode/settings.jsonを作成する

   Copied!!
   $ mkdir .vscode
   $ vim .vscode/settings.json
   

   .vscode/settings.json
   Copied!!
   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
   }
   

補足

• .eslintrc.jsonではインデントサイズや行の最大文字数などのルールを指定します
• .settings.jsonではVSCodeで使用するフォーマッターの指定やフォーマットをするタイミングを指定します