create-next-app で Next.js を立ち上げて ESLint と Prettier で自動コードフォーマットする

create 時に ESLint を含める

npx create-next-app@latest . --eslint

TypeScript も含める

npx create-next-app@latest . --typescript --eslint

Prettier をインストールする

https://nextjs.org/docs/basic-features/eslint#prettier

npm install --D eslint-config-prettier

.eslintrc.json に Prettier 設定をいれる

{
  "extends": ["next", "prettier"]
}

.prettierrc はよしなに

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "jsxSingleQuote": true
}

VSCode に自動フォーマットの設定をする

.vscode/settings.json

{
  // 保存時に自動フォーマットする
  "editor.formatOnSave": true,
  // フォーマッタを Prettier の拡張に設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ESLint でフォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

ついでに別の設定も追加

{
  "editor.tabSize": 2,
  "files.insertFinalNewline": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}