1.创建vue文件模板
vs.code创建html文件可以直接输入!或者 html:5 回车即可出现模板
而创建vue文件没有模板,解决方法如下:
在输入框输入vue打开,如果搜索不到,安装一个插件 vueHelper
复制下列代码全选覆盖,保存即可
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" };",
" },",
"",
" created(){},",
"",
" methods: {},",
"",
" computed: {},",
"}",
"",
"</script>",
"<style lang='scss' scoped>",
"</style>"
],
"description": "Log output to console"
}
}
创建vue文件输入vue回车就会出现模板了, 代码片段还可以添加其他代码
2.添加用户代码片段,并调整代码段提示的显示位置
- 打开vscode,选择文件--首选项--用户代码片段
- 选择javascript类型,打开javascript.json文件
- 系统默认给我们提供了console.log的代码格式例子,参考注释
但是在文件里输入时,代码片段不是在列表最上面不方便使用
调整提示的显示位置:文件>首选项>设置,搜索代码段或snippetSuggestions,将 Editor: Snippet Suggestions 改为top 即可