vs.code使用技巧

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.添加用户代码片段，并调整代码段提示的显示位置

1. 打开vscode,选择文件--首选项--用户代码片段
2. 选择javascript类型，打开javascript.json文件
3. 系统默认给我们提供了console.log的代码格式例子，参考注释

 

但是在文件里输入时，代码片段不是在列表最上面不方便使用

调整提示的显示位置：文件>首选项>设置，搜索代码段或snippetSuggestions，将 Editor: Snippet Suggestions 改为top 即可