Next.js+TypeScript+ESLint+Prettierで開発環境を構築

yarn create next-app test-project --ts

√ Would you like to use ESLint? ... No / [Yes]
√ Would you like to use Tailwind CSS? ... No / [Yes]
√ Would you like to use `src/` directory? ... No / [Yes]
√ Would you like to use App Router? (recommended) ... No / [Yes]
√ Would you like to customize the default import alias (@/*)? ... [No] / Yes

cd test-project
npm run dev

yarn add -D @typescript-eslint/eslint-plugin prettier eslint-config-prettier @typescript-eslint/parser

{
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "prettier"
  ]
}

{
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true
}

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}' && next lint --fix"
  },

yarn format

{
  "editor.formatOnSave": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "explicit"
  },
  "prettier.configPath": ".prettierrc.json",
  "typescript.tsdk": "node_modules/typescript/lib"
}

  "files.associations": {
    "*.css": "tailwindcss"
  }