vscode常见设置

一键生成vue模板

• step1：安装Vetur插件
  
• step2：找到配置文件

设置->用户代码片段->新代码片段

用下面自己写好的模板代替原来的模板

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"\t<div >",
			"\t\t$1",
			"\t</div>",
			"</template>",
			"",
			"<script>",
			"\texport default {",
			"\t\t//存放数据",
			"\t\tdata() {",
			"\t\t\treturn {",
			"\t\t\t\t$2",
			"\t\t\t}",
			"\t\t},",
			"\t\t//方法集合",
			"\t\tmethods: {",
			"\t\t\t\t$3",
			"\t\t},",
			"\t\t//生命周期 - 创建完成（可以访问当前this实例）",
			"\t\tcreated() {",
			"\t\t},",
			"</script>",
			"",
			"<style lang='scss' scoped>",
			"\t$4",
			"</style>"
		],
		"description": "create vue SPA template"
	}
}	

1. prefix，很重要，快捷标签，新建.vue文件输入后自动生成模板结构。
2. body，非常重要，生成的结构内容速度。
3. $1,$2,$3……，快捷生成结构后，光标所在的位置，当然肯定是在1位置。在我们定义结构后肯定个有些地方时要修改或者增加内容，直接TAB键，就会依次准备定位到了该位置。

tab键设为2个空格

快捷键：ctrl+,调出设置选项

快捷键

全局查找:ctrl+shift+f
全局替换：ctrl+shift+h
热编译：项目运行后ctrl+s
选中一个单词：ctrl+d
选中一行：ctrl+L