vscode自定义代码片段,让编码起飞

转眼之间已经到了2020年,已经是是写代码的第二个年头了,奈何技术深度仍然尚浅,想要独当一面还需要努力

最近在写uniapp的时候有个烦恼,也就是代码提示实在是让人非常难受

写view标签之前必须要打<,实在是让人难受,而直接写view也咩有提示,编码体验很差

我们能不能让敲出view的时候就给我提示<view class=''></view>呢,这样一定会编码飞起

所以我们要借助vscode提供的自定义代码片段功能

首先我们点击到文件>首选项>用户代码片段

找到当前语言对应的配置文件,例如我当前项目是vue的,并且需要的是template的提示,所以我需要编辑vue-html.json

在自定义代码判断之前需要了解他的字段含义

prefix      :代码片段名字，即输入此名字就可以调用代码片段。
body        :这个是代码段的主体.需要编写的代码放在这里,&emsp;&emsp;&emsp;&emsp;&emsp; 
$1          :生成代码后光标的初始位置.
$2          :生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....
${1,字符}    :生成代码后光标的初始位置(其中1表示光标开始的序号，字符表示生成代码后光标会直接选中字符。)
description :代码段描述,输入名字后编辑器显示的提示信息。

以及书写规则

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

我们会主需要了解其简单的规则就可以去完成我们的目标了

{
	// Place your snippets for vue-html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"view": {
		"prefix": "view",
		"body": [
			"<view class='$0'></view>"
		],
		"description": "uni基础视图组件"
	},
	"text": {
		"prefix": "text",
		"body": [
			"<text class='$0'></text>"
		],
		"description": "uni基础文字组件"
	},
	"button": {
		"prefix": "button",
		"body": [
			"<button class='$0'></button>"
		],
		"description": "uni基础按钮组件"
	},
	"image": {
		"prefix": "image",
		"body": [
			"<image class='$0'/>"
		],
		"description": "uni基础图片组件"
	}
}

当我们保存完毕之后,再试使用就会发现输入view就会发现我们自定义的代码片段完成了

自定义代码片段还可以定义很多常用的代码片段

例如自定义一段vue的代码模板(注意不是vue-html.json)

vue.json

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"baseVue": {
		"prefix": "baseVue",
		"body": [
			"<script lang='ts'>",
			"import Vue from 'vue';",
			" export default Vue.extend ({",
			"   data () {",
			"     return {\n",
			"     }",
			"   },",
			"   components: {\n",
			"   }",
			" })",
			"</script>\n",
		],
		"description": "vuets基础模板"
	},
}

是不是非常好用呢~~~

如果想了解更多请看官方文档Visual Studio代码中的代码片段

自定义代码判断就是下载的插件的功能,也就是自定义snippet,你学会了吗?