vscode配置代码片段模板

vscode配置代码片段模板

	在平常写代码时我们经常会遇到很多常用的代码结构需要书写，通常都是复制粘贴来使用。
	这样不仅要去翻找代码，还容易导致修改不完全出错。
	这个时候我们就需要使用到 vscode 自带的模板配置功能了。
	在 vscode 中提供了用户可以自定义的模板，支持多种语言。
	这里我以 JavaScript 为例，给大家分享一下如何在 vscode 中配置代码片段模板。

一、需要配置的代码如下：

// XXX接口调用
const {接口名} = async (params) => {
  try {
    const res = await API.{接口名}(params);
    console.log('API_ {接口名}', res);
    if (res.responsecode == 1 && res.response) {
      // 解析接口数据
      
    } else {
      // 接口调用异常
      throw new Error(res.responsemessage);
    }
  } catch (error) {
    // 捕获接口调用异常，并处理
    console.log('{接口名} 接口异常', error);
  }
};

二、首先需要将我们要配置的代码转换成配置文件所需的格式

1. 使用片段生成器 snippet 生成代码

   https://snippet-generator.app/

2. 在片段生成器 snippet 中我们可以轻松的生成我们的配置代码

   

3. 依次填写完即可，例：

   

三、进入 vscode 进行相关设置

1. 找到 配置用户代码片段 功能

   

2. 选择语言

   

3. 粘贴生成好的代码片段

   

4. 保存后即可使用，在JS文件中可以调用该快捷片段

   

   

四、关于占位符

1. 在选择语言后，会有说明和示例
2. 变量有: $1， ${2:name}表示制表位，$0表示最终的光标位置，${1:label}， ${2:another}表示占位符。
3. 占位符 id 相同的被连接可被同步修改。
4. 在代码编写过程中光标会自动获取到 $1 处，按 Tab 建可以切换光标位置，直至 $0 。