VSCode Integration

17.3.1. Format on Save

The following configuration must be included in .vscode/settings.json.

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

Execution order on save:

1. ESLint applies auto-fixable rules.
2. Prettier formats the code.

---

17.3.2. Preventing ESLint and Prettier Conflicts

eslint-config-prettier disables ESLint's formatting-related rules to prevent conflicts with Prettier. prettierConfig must be placed last in the ESLint config array.

---

17.3.3. Required Extensions

Extension	ID	Purpose
ESLint	dbaeumer.vscode-eslint	Real-time lint feedback
Prettier	esbenp.prettier-vscode	Code formatting
Vue - Official	Vue.volar	Vue SFC support
TypeScript Vue Plugin	Vue.vscode-typescript-vue-plugin	TypeScript support in Vue
Tailwind CSS IntelliSense	bradlc.vscode-tailwindcss	Tailwind autocompletion

---

17.3.4. Recommended Extensions Configuration

Recommended extensions must be specified in .vscode/extensions.json.

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

Including this configuration in the project automatically prompts team members to install the recommended extensions when they open the project.