Sublime Text不支持Vue语义级补全,因Vue Syntax Highlight仅做语法着色、不解析逻辑,defineProps等API需LSP支持,v-if等指令需手动启用vue-directive scope,且<script setup>块须正确设置子语法为Vue Script。

Sublime Text 本身不支持 Vue.js 的语义级代码补全(比如 defineProps、useRouter、ref() 的类型推导或自动导入),所谓“补全”基本是词典匹配或 Emmet 展开,不是真正的 LSP 支持。
为什么 Sublime 里写 defineProps 没提示、v-if 不高亮
Vue Syntax Highlight 插件只负责按区块切分语法并着色,不解析运行时逻辑;v-if、@click 等指令默认被当普通 HTML 属性处理,除非你手动启用 vue-directive scope 并在配色方案中映射对应颜色。而 defineProps 这类组合式 API 属于 TypeScript/JavaScript 语义层,Sublime 自带的 JS 语法或旧版 JavaScriptNext 都无法识别其返回类型 —— 它压根不调用 vue-eslint-parser 或 typescript-vue-plugin。
Vue Syntax Highlight 装了但 <script setup> 块还是白底黑字
这不是插件失效,而是语法绑定错了。该插件把 <script> 块拆成多个子语法,必须手动设置:
- 右键
<script setup>区域 → Set Syntax → Vue → Vue Script (JavaScript) 或 Vue Script (TypeScript) - 别选 “JavaScript” 或 “Vue Component” —— 前者不认
setup语法,后者是过时命名,已停更 - 如果用了
lang="ts",还得额外装TypeScriptSyntax插件,并确保 Sublime 能找到全局tsserver
想让 import 路径和组件名有提示,能靠什么
只能靠有限但实用的路径补全工具,不是完整 IntelliSense:
立即学习“前端免费学习笔记(深入)”;
-
AutoFileName:在import、src、href等属性值里输入'./后自动列出当前目录文件,支持嵌套路径 -
Emmet(默认已带):在<template>中敲el-button+ Tab 可展开为<el-button></el-button>,但不识别自定义组件或v-指令 - 别装
Vue Completion或Vuejs Complete:它们依赖废弃的Tern.js,在 Vue 3 下大概率报错AttributeError: 'NoneType' object has no attribute 'split'或卡死
真正容易被忽略的是:Sublime 的“补全”永远只是辅助,它不参与构建、不连接 Volar、不读取 tsconfig.json,所有类型检查和跳转都得交给终端里的 vue-tsc 或浏览器 DevTools。你写的每行 ref() 是否有效,得等 npm run build 报错才知道。


















