VSCode智能代码补全配置_VSCode离线开发Vue项目【经验】-VSCode-PHP中文网

离线环境下vue项目vscode智能补全必须满足三要素：volar语言服务正常运行、jsconfig.json/tsconfig.json存在且含vue类型路径、vue类型定义本地可用；缺一则ref、definecomponent、@/别名等全部失效。

vscode智能代码补全配置_vscode离线开发vue项目【经验】

离线环境下 Vue 项目在 VSCode 中的智能补全不是“降级可用”，而是必须手动满足三要素：语言服务能加载、jsconfig.json 或 tsconfig.json 存在且有效、Vue 相关类型定义被显式包含；缺一者，ref、defineComponent、@/components/ 别名路径等全部失效。

确认 Vue 语言服务是否真在运行（离线时最容易卡在这步）

离线状态下，VSCode 无法自动下载或更新语言服务器，所有依赖都得提前就位。右下角状态栏必须显示 Vue（不是 HTML 或 Plain Text），否则补全只是拼写建议。

按 Ctrl+Shift+P → 输入 Change Language Mode → 手动选 Vue（尤其 .vue 文件常被误判为 HTML）
打开一个 .vue 文件，在 <script setup></script> 中写 const a = ref(，没参数提示？说明 Volar 服务没接管
离线时 Volar 不会自动重装，必须提前安装好：确保已安装 Vue.volar（不是旧版 Vetur），且禁用所有冲突扩展（如 Vetur、Auto Close Tag）
打开输出面板（Ctrl+Shift+U）→ 切换到 Volar 日志 → 搜 Starting 或 error；若无日志或报 Cannot find module 'vue'，说明项目里没离线可用的 vue 类型定义

离线必备：jsconfig.json + node_modules/vue/types 共存

jsconfig.json 是离线 Vue 补全的锚点，它不光管路径别名，更决定类型服务能否索引到 vue 自身的声明文件。没有它，defineProps、useRouter 这类 API 根本不会进补全列表。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

项目根目录必须有 jsconfig.json，内容至少含：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "vue": ["node_modules/vue/types"]
    }
  },
  "include": ["src/**/*", "types/**/*.d.ts"],
  "exclude": ["node_modules"]
}

paths.vue 显式指向 node_modules/vue/types 是关键——离线时 VSCode 不会联网查 @vue/runtime-core，必须靠本地 .d.ts 文件提供类型
确认 node_modules/vue 下真实存在 types/ 目录（Vue 3.2+ 默认自带；若用 pnpm 安装，需检查是否被 hoist 覆盖）
改完立刻按 Ctrl+Shift+P → Developer: Restart Extension Host，不重启 Volar 不会重新读取配置

路径别名补全失效？检查 baseUrl 和当前文件位置

离线时路径补全不跨文件夹，且严格依赖 baseUrl 与当前文件的相对关系。写 import Button from '@/ui/Button' 却不提示，大概率是路径解析断了。

baseUrl 必须设为 "."（项目根目录），不能是 "src" 或空字符串；否则 @/ 会被解析成错误路径
当前 .vue 文件必须在 include 范围内（比如放在 src/views/ 下，但 include 只写了 ["src/components/**/*"]，那它就被忽略）
别名补全只在 import、require()、<script setup></script> 的顶层作用域生效；写在 setup() 函数体内或 <template></template> 中不会触发
多根工作区（multi-root workspace）下，路径补全默认只对当前激活的根目录生效；离线时无法跨根解析，建议单根打开 Vue 项目文件夹

离线调试补全失败：先看 Volar 是否识别为 Vue 项目

很多问题表面是“补全不弹”，实际是 Volar 根本没把当前文件当 Vue 处理。离线环境没法靠网络兜底，每一步都得人工验证。

打开任意 .vue 文件 → 按 Ctrl+Shift+P → 输入 Volar: Show Doctor → 查看输出：是否显示 Project type: vue、Vue version: 3.x
若显示 Project type: unknown，说明 Volar 未检测到 package.json 中的 dependencies.vue 或 devDependencies.@volar/vue-language-features，需手动补全
检查 package.json 是否含 "vue": "^3.4.0"（版本号必须明确，不能是 * 或 workspace:）；离线时 Volar 靠这个字段判断 Vue 版本并加载对应类型
settings.json 中必须有：
```
"vue.preferences.useVolarForJs": true,
"vue.autoInsert.dotValue": true
```
；这两项离线时不可省略，否则 ref(). 后不提示 value