VSCode連携

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

.vscode/settings.jsonに以下の設定を含めます。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

保存時の動作順序：

1. ESLintが自動修正可能なルールを適用します。
2. Prettierがコードをフォーマットします。

---

17.3.2. ESLintとPrettierの競合防止

eslint-config-prettierがESLintのフォーマット関連ルールを無効化し、Prettierとの競合を防止します。ESLint config配列の最後にprettierConfigを配置しなければなりません。

---

17.3.3. 必須拡張機能一覧

拡張機能	ID	用途
ESLint	dbaeumer.vscode-eslint	リアルタイムリントフィードバック
Prettier	esbenp.prettier-vscode	コードフォーマット
Vue - Official	Vue.volar	Vue SFCサポート
TypeScript Vue Plugin	Vue.vscode-typescript-vue-plugin	Vue内TypeScriptサポート
Tailwind CSS IntelliSense	bradlc.vscode-tailwindcss	Tailwind自動補完

---

17.3.4. 推奨拡張機能の設定

.vscode/extensions.jsonに推奨拡張機能を明示します。

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "bradlc.vscode-tailwindcss"
  ]
}

この設定をプロジェクトに含めると、チームメンバーがプロジェクトを開く際に推奨拡張機能が自動的に案内されます。