写一个VSCode snippets 代码片段

在上篇文章中(基于element-ui 搭建管理后台_夜跑者的博客-CSDN博客_elementui搭建后台)

我们基于element-ui搭建了一个通用的管理后台，在网络模块，对接口进行了封装，get, post请求如下所示：

    this.$http
      .get({ urlKey: "iot-getAsset", params: {} })
      .then((res) => {
        console.log("iot-getAsset res is: ", res);
      })
      .catch((err) => {
        console.error("iot-getAsset err is: ", err);
      });


    this.$http
      .post({ urlKey: "iot-getAsset", data: {} })
      .then((res) => {
        console.log("iot-getAsset res is: ", res);
      })
      .catch((err) => {
        console.error("iot-getAsset err is: ", err);
      });

这是两段通用网络接口代码，每个请求都这么写。我们能不能做个小工具方便的输入这些通用的代码片段呢？当然可以的。有经验的前端工程师基本上都安装了类似这样的VSCode插件。所以我们自定义的这个通用代码片段当然可以用VSCode插件来实现。为这2段代码片段写个VSCode插件有点杀鸡焉用牛刀的感觉。有没有更轻量的实现方案呢？VSCode 提供了snippets来实现。

1. 创建snippets文件

VSCode 编辑器 File -> Preferences -> Configure User Snippets   回车  选择New Snippets

2. 书写代码片段

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"http get shortcut": {
		"scope": "javascript, typescript",
		"prefix": "vhttpget",
		"body": ["this.\\$http.get({urlKey: '$1', params: {}}).then(res => {console.log('$1 res is: ', res)}).catch(err => {console.error('$1 err is: ', err)})"],
		"description": "a http get short cut"
	},
	"http post shortcut": {
		"scope": "javascript, typescript",
		"prefix": "vhttpost",
		"body": ["this.\\$http.post({urlKey: '$1', data: {}}).then(res => {console.log('$1 res is: ', res)}).catch(err => {console.error('$1 err is: ', err)})"],
		"description": "a http post short cut"
	},
}

按注释进行书写代码片段就可以了，语法请参考：Snippets in Visual Studio Code

我们在.vue 中的<script>标签下输入vhttpget 就会直接输入代码片段如下所示：

 再shift+alt + f 进行格式化代码就可以啦。