一、VSCode 配置优化：Vue3 开发提效指南

以下整合了 Vue3 + TS 开发中高频用到的代码片段、自动格式化、语法提示等配置，统一放在项目根目录的 .vscode 文件夹下（若没有该文件夹，先新建），提升开发效率。

1. 自动生成 Vue3 模板（代码片段）

文件路径：.vscode/vue3.code-snippets（统一命名，避免重复）
作用：输入快捷指令 Vue3.t 快速生成符合项目规范的 Vue3 + TS 基础模板，可根据项目实际组件（如布局组件）调整。

{
  "Vue3+TS 快速生成模板": {
    "scope": "vue",
    "prefix": "Vue3.t",
    "body": [
      "<template>",
      "  <div class='app-container'>",
      "    <HeaderLayout></HeaderLayout>",
      "    <ContentLayout></ContentLayout>",
      "  </div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "// 导入类型/组件（示例）",
      "// import type { XXXType } from '@/types/xxx'",
      "// import { useXXX } from '@/hooks/useXXX'",
      "",
      "// 定义 props（示例）",
      "interface Props {",
      "  title?: string",
      "}",
      "const props = withDefaults(defineProps<Props>(), {",
      "  title: '默认标题'",
      "});",
      "",
      "// 定义 emit（示例）",
      "const emit = defineEmits<{",
      "  (e: 'change', val: string): void",
      "}>();",
      "",
      "// 响应式数据（示例）",
      "const loading = ref(false);",
      "const list = ref<XXXType[]>([]);",
      "",
      "// 方法（示例）",
      "const handleFetch = async () => {",
      "  loading.value = true;",
      "  try {",
      "    // 业务逻辑",
      "  } catch (err) {",
      "    console.error('请求失败：', err);",
      "  } finally {",
      "    loading.value = false;",
      "  }",
      "};",
      "",
      "// 生命周期（示例）",
      "onMounted(() => {",
      "  handleFetch();",
      "});",
      "</script>",
      "",
      "<style lang=\"scss\" scoped>",
      ".app-container {",
      "  width: 100%;",
      "  height: 100%;",
      "  // 基础样式",
      "}",
      "</style>"
    ],
    "description": "快速生成 Vue3 + TS 业务组件模板（含Props/Emit/响应式/生命周期）"
  },
  "Vue3 空模板（极简版）": {
    "scope": "vue",
    "prefix": "Vue3.empty",
    "body": [
      "<template>",
      "  <div class=\"container\"></div>",
      "</template>",
      "",
      "<script setup lang=\"ts\"></script>",
      "",
      "<style lang=\"scss\" scoped></style>"
    ],
    "description": "快速生成极简版 Vue3 + TS 空模板"
  }
}

2. 保存自动格式化 + 全局格式化配置

文件路径：.vscode/settings.json
作用：统一团队代码格式，保存时自动格式化，避免手动调整格式冲突，新增 Vue 专属配置、ESLint 联动、语法提示等高频配置。

{
  // 基础格式化配置
  "editor.formatOnSave": true, // 保存文件时自动格式化
  "editor.formatOnType": true, // 输入时自动格式化（如分号、括号）
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 全局默认格式化器（Prettier）
  "editor.formatOnPaste": true, // 粘贴内容时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存时自动修复 ESLint 可修复错误
  },

  // Vue 专属配置
  "vetur.validation.template": false, // 禁用 Vetur 模板校验（Vue3 推荐用 Volar）
  "volar.complete.propsWithDefaultValue": true, // Volar 自动补全 Props 默认值
  "volar.complete.componentImport": true, // 自动补全组件导入
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // Vue 文件指定 Prettier 格式化
  },

  // Prettier 个性化配置（覆盖默认规则）
  "prettier.printWidth": 120, // 单行最大字符数
  "prettier.tabWidth": 2, // 缩进宽度
  "prettier.useTabs": false, // 使用空格而非 Tab
  "prettier.semi": true, // 语句末尾加分号
  "prettier.singleQuote": true, // 使用单引号
  "prettier.quoteProps": "as-needed", // 仅必要时给对象属性加引号
  "prettier.trailingComma": "es5", // ES5 风格尾逗号（数组/对象最后一项）
  "prettier.bracketSpacing": true, // 对象大括号前后加空格（{ a: 1 }）
  "prettier.vueIndentScriptAndStyle": true, // Vue 文件中 script/style 标签内缩进
  "prettier.endOfLine": "lf", // 换行符统一为 LF（跨平台兼容）

  // 代码提示/编辑优化
  "editor.suggest.snippetsPreventQuickSuggestions": false, // 代码片段不阻止快速提示
  "editor.quickSuggestions": {
    "strings": true // 字符串内也触发代码提示
  },
  "files.associations": {
    "*.vue": "vue" // 识别 .vue 文件为 Vue 类型
  },

  // 关闭不必要的校验（避免冲突）
  "javascript.format.enable": false,
  "typescript.format.enable": false
}

3. 补充：必备插件推荐（团队统一安装）

在 .vscode/extensions.json 中配置推荐插件，团队成员打开项目时会提示安装，保证开发环境一致：

{
  "recommendations": [
    // Vue3 官方语法支持（替代 Vetur）
    "Vue.volar",
    // TypeScript 语法支持
    "Vue.vscode-typescript-vue-plugin",
    // 代码格式化
    "esbenp.prettier-vscode",
    // ESLint 校验
    "dbaeumer.vscode-eslint",
    // SCSS 语法提示/格式化
    "syler.sass-indented",
    // 路径自动补全
    "christian-kohler.path-intellisense",
    // 括号配对高亮
    "CoenraadS.bracket-pair-colorizer-2",
    // 注释模板
    "oderwat.indent-rainbow"
  ]
}

二、使用说明

1. 代码片段使用：新建 .vue 文件后，输入 Vue3.t（完整版模板）或 Vue3.empty（极简模板），按下 Tab 键即可快速生成模板；
2. 格式化生效：确保已安装 Prettier - Code formatter 插件，保存文件时会自动按配置格式化；
3. 个性化调整：
   • 模板中的布局组件（HeaderLayout/ContentLayout）可替换为项目实际组件；
   • Prettier 规则（如单行字符数、引号类型）可根据团队规范修改；
   • 新增代码片段时，只需在 vue3.code-snippets 中添加新的对象即可。

三、注意事项

1. .vscode 文件夹需纳入项目版本管理（git），确保团队成员同步配置；
2. 若项目已配置 .prettierrc（Prettier 配置文件），settings.json 中的 Prettier 规则会覆盖默认值，建议优先统一在 .prettierrc 中配置，保持规则单一来源；
3. Vue3 项目建议卸载 Vetur 插件，仅保留 Volar，避免语法校验冲突。