Zenn
🎨

PrettierとESLintをNext.jsの開発時に同時に使うための設定

2025/02/18に公開
個人開発
ESLint
Prettier
tech

ご覧いただきありがとうございます。Furuyaです。
今回は「PrettierとESLintをNext.jsの開発時に同時に使うための設定」についてまとめます。
最近、新規の案件立ち上げが増えてきており毎回他のブロジェクトどうなってたっけな？と調べるのが面倒なのでひとしきりまとめようと思います。

環境

PC：MacBook Pro 13-inch, 2020, Four Thunderbolt 3 ports
macOS：Ventura 13.5.1
Shell: zsh

前提

Next.jsのプロジェクトがすでに作成されている状態であることを前提に話を進めていこうと思います。
Next.jsプロジェクトの立ち上げ方はこちらにまとめていますのでご覧ください。
https://zenn.dev/k0y0k0y0/articles/article_20240918

必要なパッケージのインストール

npm i -D @babel/eslint-parser eslint-config-prettier prettier

設定ファイルの修正

ESLint

.esrintrc.jsonがない場合は新規に作成し、既にある場合は修正します。
.esrintrc.jsonが以下のようになればOKです。

.esrintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "arrow-parens": ["error", "avoid"],
    "prettier/prettier": "error"
  }
}

Prettier

.prettierrc.jsonがない場合は新規に作成し、既にある場合は修正します。
.prettierrc.jsonが以下のようになればOKです。

.prettierrc.json
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "auto"
}

VSCodeの設定

VSCodeで使用する場合は上記以外に設定が必要になります。
.vscode/settings.jsonを新規に作成します。

.vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "editor.tabSize": 2,
  "prettier.requireConfig": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "files.autoSave": "onFocusChange",
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true
  },
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true
}

以上で「PrettierとESLintをNext.jsの開発時に同時に使うための設定」は完了となります！

GitHubで編集を提案

Discussion