自定义Vetur快捷代码块snippet

2,272 阅读1分钟

Vetur

如果通过官方指南Snippet来自定义代码块的话(根目录创建.vscode/vetur/snippets文件夹),不会生效。然后去插件设置开关也没用(偶尔也生效了,但重新打开又失效了)。不断网上找办法,都是去创建vue.json提示,写JSON文件,这也太不vue了。

解决办法

直接去插件配置哪里修改

  1. ctrl + shift + p 弹出命令终端,输入extensions folder,确定enter

image.png

  1. 找到octref.vetur目录,进入.vscode\extensions\octref.vetur-0.33.1\server\dist\veturSnippets

image.png

  1. 添加自定义代码片段(可以直接复制default.vue然后修改)

image.png

<template>
  ${0}
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>
  1. 重启vscode,完成

修改:重启会导致运行的 vue serve 关闭,后续又要重新 npm run serve 。所以采用只刷新窗口 vscode: ctrl + shift + p => 输入 reload window => 这样会重新加载插件vetur而不会关闭终端。

image.png