Editor

# ===== Required extensions =====
# Vue (Volar)                  official Vue language support (Vue 3)
# TypeScript Vue Plugin (Volar) better TS support inside .vue
# ESLint                         linting
# Prettier                       formatting

# Optional:
# Iconify IntelliSense           icon name completion
# Vue VSCode Snippets            quick scaffolding
# Pinia Snippets                 store boilerplate

# ===== Disable Vetur =====
# Vetur is Vue 2 era; Volar replaces it for Vue 3.
# In Extensions: search 'Vetur' -> Disable.

# ===== TypeScript hybrid mode (Vue 3.4+) =====
# settings.json:
{
  "vue.server.hybridMode": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

# Volar uses your project's TS via the TS plugin; better single-source-of-truth.

# ===== Format on save =====
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  }
}

# ===== ESLint =====
# .eslintrc.cjs (Vue 3 + TS)
module.exports = {
  root: true,
  env: { browser: true, es2022: true },
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
};

# ===== Snippets =====
# .vscode/vue.code-snippets:
{
  "Vue SFC": {
    "prefix": "vsfc",
    "body": [
      "<script setup lang=\"ts\">",
      "$0",
      "</script>",
      "",
      "<template>",
      "  ",
      "</template>",
      "",
      "<style scoped>",
      "",
      "</style>"
    ]
  }
}

# ===== Debugging =====
# launch.json:
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vue dev",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    }
  ]
}

# ===== Vue DevTools =====
# Browser extension: Chrome / Firefox / Edge
# Or standalone: npm install -g @vue/devtools && vue-devtools
# Inspect components, props, state, router, Pinia stores.

# ===== Workspace settings =====
# .vscode/settings.json committed for team consistency:
{
  "editor.tabSize": 2,
  "files.eol": "\n",
  "vue.complete.casing.tags": "kebab",
  "vue.complete.casing.props": "camel"
}

# ===== Patterns =====
# - One Volar version per workspace; pin via extensions.json recommendations
# - Format on save with Prettier; ESLint --fix on save
# - Snippets for the SFC skeleton
# - Vue DevTools always installed in dev browser

# ===== Pitfalls =====
# - Vetur + Volar both enabled -> double IntelliSense
# - Hybrid mode off + project on TS 5+ -> Volar lags
# - Workspace settings not committed -> teammates fight defaults

<!-- The Vue playground uses esm.sh + the Vue compiler. -->