发布于 

想要提高开发效率,先把VScode快捷键用好

整理了一些使用VScode的小技巧：快捷键、配置代码片段

快捷键(window)

  • Ctrl+N：新建文件
  • Ctrl+Shift+N：打开一个新的VScode编辑器
  • Ctrl+O：打开文件
  • Ctrl+W：关闭当前文件
  • Ctrl+\：拆分文件到侧边显示
  • Ctrl+Tab：在工作区切换文件窗口
  • Ctrl+B：显示/隐藏侧边栏
  • Ctrl+`：显示/隐藏Terminal
  • Ctrl+F：当前文件中查找
  • Ctrl+H：当前文件查找替换
  • Ctrl+Shift+F：全局查找
  • Ctrl+D：选中下一个匹配项
  • Ctrl+L：选中当前行

配置代码片段

效果

配置代码

首先需要打开VScode->右上角的“文件“->首选项->配置用户代码片段

在点击”配置用户代码“后，VScode会提示你输入，比如说我经常使用vue开发，那就可以这样干:

输入vue选中后，会生成vue.json，这个json文件通常用于快速构建一个文件结构，比如一个vue3的模板(上述效果图就是配置vue.json)

然后输入javascript就会生成javascript.json，这个是可以在script标签内生成js代码

最后输入vue-html，就会生成html代码，在template标签中生成html代码，像常用的el-form就可以配置，不需要再跑到官网进行复制

代码文件

具体的代码配置如下：

vue.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
	"vue3模板": { //快捷输入的时候显示的提示
		"prefix": "vue", //输入的前缀，就是输入这个会有提示
		"description": "vue3模板", //描述
		"body": [ //这个是一个字符串数组，就是会输出的内容，如果内容含有 双引号，需要转义，比如最下面的lang=\"scss\"
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup>",
			"",
			"</script>",
			"",
			"<style lang=\"scss\" scoped>",
			"</style>",
			""
		]
	},
}

javascript.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{
	"import基本配置": {
		"prefix": "import",
		"description": "import基本配置",
		"body": [
			"import {ref,reactive,inject} from 'vue'",
			"import {useRouter,useRoute} from 'vue-router'",
			"const global = inject('global')",
			"const router = useRouter()",
			"const route = useRoute()",
		]
	},
	"dialog弹窗配置": {
		"prefix": "dialogConfig",
		"description": "弹窗config配置",
		"body": [
			"const dialogConfig = reactive({",
			"  show: false,",
			"  title: \"标题\",",
			"  buttons: [",
			"   {",
			"    type: \"danger\",",
			"    text: \"确定\",",
			"    click: (e) => {",
			"      submitForm();",
			"    },",
			"  },",
			" ],",
			"});"
		]
	},
	"formData配置": {
		"prefix": "form",
		"description": "快速实现添加form配置",
		"body": [
			"const formData = ref({});",
			"const formDataRef = ref();",
			"const rules = {",
			"  title: [{ required: true, message: \"请输入内容\" }],",
			"};",
		]
	},
	"watch使用": {
		"prefix": "watch",
		"description": "快速实现watch",
		"body": [
			"watch(() => (newVal, oldVal) => {}, { immediate: true, deep: true });",
		]
	},

}

vue-html.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
{
	"el-form模板": {
		"prefix": "el-form",
		"description": "创建el-form",
		"body": [
			"<el-form",
			"  :model=\"formData\"",
			"  :rules=\"rules\"",
			"  ref=\"formDataRef\"",
			"  label-width=\"80px\"",
			"  @submit.prevent",
			">",
			"<!--input输入-->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-input clearable placeholder=\"提示信息\" v-model.trim=\"formData.\"></el-input>",
			"  </el-form-item>",
			"<!--textarea输入-->",
			"  <el-form-item label=\"\" prop=\"\">",
			"    <el-input",
			"      clearable",
			"      placeholder=\"提示信息\"",
			"      type=\"textarea\"",
			"      :rows=\"5\"",
			"      :maxlength=\"150\"",
			"      resize=\"none\"",
			"      show-word-limit",
			"      v-model.trim=\"formData.\"",
			"  ></el-input>",
			"  </el-form-item>",
			"<!-- 单选 -->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-radio-group v-model=\"formData.\">",
			"      <el-radio :label=\"值1\">显示信息</el-radio>",
			"      <el-radio :label=\"值2\">显示信息</el-radio>",
			"    </el-radio-group>",
			"  </el-form-item>",
			"<!-- 下拉框 -->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-select clearable  placeholder=\"提示信息\" v-model=\"formData.\" ,>",
			"      <el-option :value=\"值1\" label=\"显示信息\"></el-option>",
			"      <el-option :value=\"值2\" label=\"显示信息\"></el-option>",
			"    </el-select>",
			"  </el-form-item>",
			"</el-form>",
		]
	},
	"el-input模板": {
		"prefix": "el-input",
		"description": "创建el-input",
		"body": [
			"<!--input输入-->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-input clearable placeholder=\"提示信息\" v-model=\"formData.\"></el-input>",
			"  </el-form-item>",
		]
	},
	"el-card模板": {
		"prefix": "el-card",
		"description": "创建el-card",
		"body": [
			"<el-card class=\"box-card\">",
			"  <div slot=\"header\" class=\"clearfix\">",
			"    <span>卡片名称</span>",
			"    <el-button style=\"float: right; padding: 3px 0\" type=\"text\">操作按钮</el-button>",
			"  </div>",
			"  <div>",
			"    这里是内容",
			"  </div>",
			"</el-card>",
		]
	},
	"el-divider竖线":{
		"prefix":"el-divider",
		"description": "竖线",
		"body": [
			"<el-divider direction=\"vertical\" />"
		]
	}
}
许可协议

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。