Sublime实现一键生成Vue模板_自定义Snippet实战

秋丽君_4768

秋丽君_4768

2026-04-29

643人浏览

原创

最常见原因是 scope 填错,sublime 依赖当前光标位置的语法作用域而非文件后缀;需用 developer: show scope name 查看真实 scope(如 text.html.vue),并严格匹配;右下角显示非“vue”时 snippet 不生效。

sublime实现一键生成vue模板_自定义snippet实战

为什么在.vue文件里按Tab没反应

最常见原因是 scope 填错了。Sublime 不看文件后缀,只认当前光标所在位置的语法作用域。比如你打开一个 .vue 文件,右下角显示“Vue”,但实际 scope 可能是 text.html.vue(由 Vue 插件提供),也可能是 source.vue(旧版插件)或 text.html.basic(没装 Vue 语法支持时)。填错就完全不触发。

实操建议:

  • 先按 Ctrl+Shift+P(Win/Linux)或 Cmd+Shift+P(macOS),输入 Developer: Show Scope Name,把光标放在 <script></script> 或 <template></template> 里点一下,看弹出的完整 scope 链
  • 若显示 text.html.vue,scope 就必须写成 text.html.vue;若显示 source.vue meta.script.js,则需用更精确的 source.vue meta.script.js(仅对 script 块生效)
  • 别写 vue、.vue 或 html —— 这些不是合法 scope

如何让 vuecomp 按 Tab 后生成完整结构

核心是 XML 结构合法 + <content></content> 用 CDATA 包裹 + 占位符顺序合理。直接复制粘贴容易漏掉根节点或转义问题。

正确写法示例(保存为 Packages/User/VueComponent.sublime-snippet):

<snippet><content><div class="$1">
    $2
  </div>


<script>
export default {
  name: '$3',
  data() {
    return {
      $4
    }
  },
  methods: {
    $5
  }
}
</script><style scoped>
$6
</style>
]]></content><tabtrigger>vuecomp</tabtrigger><scope>text.html.vue</scope><description>Vue SFC template</description></snippet>

注意点:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习