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

環境

• next@14.0.4
• typescript@5.3.3
• eslint@8.56.0
• prettier@3.2.4

Next.jsプロジェクト作成

npx create-next-app hogehoge-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 hogehoge-project
npm run dev

ESLintとPrettierのインストール

npm i -D @typescript-eslint/eslint-plugin prettier eslint-config-prettier

ESLintの設定

.eslintrc.jsonを作成＆編集。

.eslintrc.json

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

Prettierの設定

.prettierrc.jsonを作成＆編集。

.prettierrc.json

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

npmコマンドの追加

scriptsにformatを追記。

package.json

  "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"
  },

確認

以下を実行して、ソースが整形されたらOK。

npm run format

VSCodeの保存時自動フォーマット

.vscode/settings.json

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

Unknown at rule @￰tailwind 警告を消す

マーケットプレイスから Tailwind CSS IntelliSense をインストールする。

settings.jsonに以下を追記する。

.vscode/settings.json

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