Sublime利用Snippets打造常用的Vue组件模板-sublime-PHP中文网

最常见原因是scope填错，sublime只认光标位置的真实语法作用域（如text.html.vue），而非文件后缀或右下角显示名称；scope必须严格匹配developer: show scope name命令获取的完整链，且xml结构、路径、编码、文件名四者缺一不可。

sublime利用snippets打造常用的vue组件模板

为什么 vuecomp + Tab 没反应

最常见原因是 scope 填错。Sublime 不看文件后缀名，也不认右下角显示的 “Vue”，它只认光标所在位置的真实语法作用域。比如你在 <script></script> 里按 Tab，实际 scope 可能是 source.js.embedded.html 或 source.vue meta.script.js；在 <template></template> 里可能是 text.html.vue。填成 vue、.vue 或 html 都无效。

实操建议：

把光标放在想触发的位置（比如 <template></template> 开头），按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS），输入 Developer: Show Scope Name 回车，状态栏会显示完整链，如 text.html.vue
scope 字段必须严格匹配这个值，多个 scope 用英文逗号分隔，例如 text.html.vue, source.vue meta.script.js
别删掉 <scope></scope> 标签——留空 ≠ 全局生效，不写等于禁用

如何保存一个合法的 .sublime-snippet 文件

文件名、路径、编码、XML 结构四者缺一不可，任一出错都静默失效。

实操建议：

用命令面板创建：按 Ctrl+Shift+P → 输入 Tools: New Snippet 回车，避免手写 XML 漏掉 <snippet></snippet> 根节点或
保存路径必须是 Packages/User/（可通过 Preferences → Browse Packages… 打开），文件名用英文，后缀严格为 .sublime-snippet（不是 .snippet 或 .xml）
含中文或特殊字符时，确保编辑器以 UTF-8 无 BOM 编码保存；Windows 用户注意关闭“隐藏已知文件扩展名”，防止实际存成 vuecomp.sublime-snippet.txt
改完后可执行 Reload Syntax Definitions 强制刷新，不用重启 Sublime

Vue 组件模板里占位符怎么写才不卡光标

、等不是装饰，它们决定光标跳转顺序和同步行为。写错会导致光标卡死、改一处其他不同步、无法自然退出。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

实操建议：

编号必须连续递增：$1 → $2 → $3……跳号（如只有 $1 和 $3）会让 $2 丢失跳转点
重复编号（如两个 $1）会让它们变成联动字段——改一个，另一个自动同步；这不是 bug，是设计，但容易误用
结尾务必加 $0：它是最终光标出口，漏掉会导致光标停在最后一个 $N 后无法跳出模板
需要默认值用 ${1:MyComponent}，不是 $1:MyComponent；想输出字面量 ${date} 得写成 \${date}

同一个 .vue 文件里，template/script/style 要用不同 snippet 吗

要。因为三块区域的作用域通常不同：<template></template> 是 text.html.vue，<script></script> 是 source.js.embedded.html 或 source.vue meta.script.js，<style></style> 可能是 source.css 或 source.postcss。混写在一个 snippet 里，scope 无法同时匹配。

实操建议：

拆成三个独立 snippet：一个用于 <template></template>（scope="text.html.vue"），一个用于 <script></script>（scope="source.js.embedded.html"），一个用于 <style></style>（scope="source.css"）
触发词区分用途：比如 vue-temp、vue-script、vue-style，避免冲突
如果想一键生成整块 SFC，只能靠一个 snippet 覆盖全部结构，此时 scope 必须取三者交集——通常是 text.html.vue（Vue 插件提供），且内容里不能依赖 script 块专属语法（如 import）