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

이 설정을 프로젝트에 포함하면 팀원이 프로젝트를 열 때 권장 확장을 자동으로 안내합니다.