要让特定插件接管文件预览,需在settings.json中配置workbench.editorAssociations,指定对应插件注册的viewType和filenamePattern,规则按数组顺序匹配,通配符和*支持,但viewType必须与插件声明完全一致。

怎么让特定插件接管文件预览,而不是用默认编辑器
VSCode 不会自动把某类文件交给某个插件“预览”,必须显式注册关联。核心是 workbench.editorAssociations 配置,它告诉 VSCode:当打开 .vue 时,别用文本编辑器,改用 vue-designer.previewEditor;打开 .tensor 时,调用你写的自定义 tensorPreview view。
常见错误现象:
- 装了 Vue Designer 却双击
.vue还是进文本编辑器 - 写了自定义 preview 处理逻辑,但
onDidOpenTextDocument触发了,预览面板却没出现
实操建议:
-
workbench.editorAssociations必须写在settings.json(用户级或工作区级),不能靠插件自己注册就生效 - 每个条目是
{"viewType": "xxx", "filenamePattern": "*.vue"}形式,viewType必须和插件里vscode.window.registerWebviewPanelSerializer或contributes.views里声明的一致 - 顺序重要:
filenamePattern按数组顺序匹配,通配符*和**支持,但**/*.vue和*.vue冲突时,前者优先 - 如果插件没声明
viewType(比如某些老插件只提供命令不注册 editor),这条路走不通,得换用命令方式触发预览
markdown-preview-enhanced 怎么强制走深色预览
不是改 workbench.colorTheme,也不是改 markdown-preview-enhanced.theme(那是代码块高亮),真正控制背景色的是 markdown-preview-enhanced.previewTheme 字段。
常见错误现象:
- 改完 settings 发现预览还是白底,甚至清缓存重启也没用
- 误把
github-dark.css改成github-dark(少后缀),导致插件找不到文件,静默回退到github-light.css
实操建议:
- 确认值是完整文件名,比如
"github-dark.css",不是"github-dark",也不是"dark" - 路径不重要——MPE 只在自己插件目录下的
node_modules/mume/themes/里找,不读工作区 CSS 文件 - 验证是否生效:预览页右键 →
Toggle Developer Tools→ Elements 面板里搜<style></style>或body class,看加载的是不是你指定的 CSS - 如果用 TaoToken 管理配置,确保该字段没被工作区 settings 覆盖——工作区级设置优先级高于用户级
Vue Designer 预览空白或报 ref is not defined
根本原因不是插件坏了,而是 Vetur 和 Vue Designer 的语言服务冲突。Vetur 会提前解析 <script setup></script> 并剥离顶层绑定,导致 Vue Designer 启动的运行时环境看不到 ref、computed 等 API。
实操建议:
- 必须禁用 Vetur,只启用 Volar(Vue Language Features)和 Vue Designer
- 禁用后要关掉所有已打开的
.vue标签页,再重启 VSCode,否则旧语言模式缓存还在 -
vueDesigner.sharedStyles路径必须是相对工作区根的纯 CSS 路径,例如["src/styles/base.css"],不能带.前缀,不能是.scss,也不能用 glob - 如果仍报错,检查插件版本:2026 年起 Vue Designer 要求 Volar ≥ 2.4,低于此版本可能无法识别新语法
自定义预览逻辑里怎么传文件内容给 WebView
别直接读 document.getText() 后塞进 panel.webview.html ——大文件会卡死,且无法响应后续编辑变化。正确做法是用 webview.postMessage() + 监听 onDidReceiveMessage 实现按需加载。
实操建议:
- 初始化 panel 时设
enableScripts: true,否则postMessage不可用 - 监听文档变更:用
vscode.workspace.onDidChangeTextDocument,过滤出当前预览的文档,再postMessage新内容 - WebView 内 JS 要加防重复初始化逻辑,避免多次
addEventListener('message', ...)导致消息响应爆炸 - 敏感内容(如含 token 的 JSON)不要直接透传,应由插件侧做脱敏处理再发
最易被忽略的点:预览不是静态快照,而是持续通信的视图。一旦漏掉 onDidChangeTextDocument 监听或没处理好 message 生命周期,就会出现“改了代码,预览不动”的假死现象。


















