Vue文件新建后不触发snippet需手动设语言模式为Vue，并确认snippet含"scope":"vue"；Volar与Vetur不可共存；vue3-setup片段需加lang="ts"及泛型props；File Templates适合新建文件，Prettier与ESLint需分工配置。
Vue 文件新建后不触发 snippet 怎么办
新建一个 .vue 文件，默认语言模式是 Plain Text 或 HTML，VS Code 根本不会加载 Vue 相关 snippet。这不是插件没装，而是上下文缺失。
必须手动设置语言模式为 Vue：点击右下角状态栏的语言标识（比如 “Plain Text”），输入 vue 并回车选中；或按 Ctrl+K M（Windows/Linux）/Cmd+K M（macOS）快速切换。
检查 snippet 定义里是否含 "scope": "vue" 字段——漏掉这行，哪怕前缀写对了（如 vue3），也不会出现在补全列表里。
若用 Volar，确认没和旧版 Vetur 共存；两者冲突会导致 snippet 失效、defineProps 不识别等连锁问题。
立即学习“前端免费学习笔记（深入）”；
vue3-setup 片段报 defineProps 类型错误
常见现象是补全后提示 Property 'msg' does not exist on type '{}'，本质是 TS 上下文未激活。
-
<script setup>默认是 JS 模式，必须显式加lang="ts" - 片段
body中的defineProps必须用泛型写法：defineProps<{ msg?: string }>()，不能只写defineProps({ msg: String }) - 检查 VS Code 状态栏左下角是否显示
TS，不显示说明 TypeScript 服务未加载，可尝试关闭再重开文件夹 - 项目若不用 TS，别硬套该片段——JS 写法和 TS 写法在类型系统上完全不兼容
用 File Templates 替代 snippet 更省事？
是的，但适用场景不同：snippet 是编辑中补全，File Templates 是创建文件那一刻就填好结构，适合“新建组件/页面”这种一次性动作。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
例如用 Qoder 插件右键 → Create File from Template → 选 component.vue，直接生成带 <script setup lang="ts"> 的完整文件，连改语言模式都跳过。
模板支持变量替换：${fileName} 自动转成文件名，${date:YYYY-MM-DD} 插入日期，方便加版权头注释。
缺点也很明确：无法像 snippet 那样用 Tab 跳转占位符（比如快速改 name 或 class），所有内容都是静态填充。
团队统一维护时，File Templates 比分散管理多个 snippet 更容易批量更新（比如统一加 scoped 或禁用 emits 校验）。
Prettier + ESLint 协同下，保存后代码格式还是乱
不是插件没起作用，而是分工没理清：ESLint 负责逻辑校验（比如 no-unused-vars），Prettier 只管格式（缩进、引号、换行）。两者硬刚会互相覆盖。
关键配置点：
- 在工作区
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，并开启"editor.formatOnSave": true - ESLint 配置里必须引入
eslint-config-prettier，把它加进extends数组末尾，关掉所有与 Prettier 冲突的规则 - Volar 用户注意：Vue 模板部分的格式化由 Volar 自己接管，需在
settings.json中额外配"volar.format.enable": true，否则<template>里 v-if/v-for 仍可能错乱
最容易被忽略的是：Volar 的格式化开关默认是关的，且不随 Prettier 全局设置联动——这个点卡住很多人，查半天以为是 Prettier 配错了。
