你不知道的vscode之扩展 | snippet代码片段

王志远，微医前端技术部

前言

​ code snippet即代码片段，可以理解为自定义的代码块，输入相关命令就会自动生成这块代码，主要解决类似于业务强相关的代码重复问题。

​ 在定义时主要有两个因素去考虑：文件类型和内容的扩展性。前者将颗粒度变细，免得定义太多时杂乱不堪；后者通过支持设定光标行为、设定默认值、设定特定行为变量等操作使得用户更为方便；

正文

起步：唤起特定功能

打开命令面板，搜索“配置用户代码片段”（Configure User Snippets）并且执行

这时候我们会看到一个列表，让我们选择语言，即前言中的【文件类型】因素，不是这个类型的文件是不会唤起这个snippet的。

了解：定义规范

选择完语言后，我们就能看到一个 JSON 文件被打开了

这时我们把这个注释打开，略作修改

	"Print to console": {
		"prefix": "Dlog",
		"body": [
			"isDev && console.log('$1');",
			"$2"
		],
		"description": "测试环境才打印"
	}

然后在 js 文件中输入prefix，就会显示body中定义的内容。

现在，我们来了解下这个定义规范是什么

这个代码片段的名字叫做 Print to console，这个无关紧要；

其值是个对象，必须要包含 “prefix” 前缀和 “body” 内容这两个属性，其余属性非必须

{
		"prefix": "", // 输入这个以导入 snippet
		"body": [ // 导入的内容
			"isDev && console.log('$1');",
			"$2"
		],
		"description": "测试环境才打印" // 提示信息
}

深入：高级用法-内容的扩展性

就像前言说的支持设定光标行为、设定多光标、设定默认值、设定特定行为变量等操作，我们可以看一些实例

支持：默认设定光标在''内

通过$1设置初始光标位置

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

支持：预定多光标位置

通过$i设置光标位置，从 1 开始，每次按下Tab就会切换到指定的下一个位置

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

支持：设定多光标操作

如果有一个变量多处使用的情况，$i中的i可以重复使用以达到多光标的效果

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

支持：设定占位符

占位符，顾名思义，这个值是我们在代码片段中预先设置好的，光标会默认选中这个内容，假如设定i为占位符

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

我们可以注意到其实这些行为都是对光标的处理，可以从光标的三个角度记忆：位置、数量、选中内容

除此之外，VSCode还预定义了一些特定行为，如将剪切板的内容作为占位符。这通过【预设变量】实现

支持：将剪切板的内容作为占位符

"Development Env to console": {
		"prefix": "loge",
		"body": [
			"isDevelopment && console.log('${1:$CLIPBOARD}',$CLIPBOARD);"
		],
		"description": "测试环境下打印信息"
	},

除了剪切板，VS Code 还支持其他数十个预设值，大家可以按需自行查看文档，自己尝试。

实战：定义一个针对 vue 文件的初始化代码片段

1. 打开命令面板，找到Configure User Snippets
2. 选中vue json
3. 对 json 对象新增如下代码

"vue temp": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div class=\"wrapper\">$0</div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  components: {},",
			"  props: {},",
			"  data() {",
			"    return {",
			"    };",
			"  },",
			"  watch: {},",
			"  computed: {},",
			"  methods: {},",
			"  created() {},",
			"  mounted() {}",
			"};",
			"</script>",
			"<style scoped>",
			".wrapper{}",
			"</style>"
		],
		"description": "A vue file template"
	}

小结

​ 巧用代码片段，节省生命，year！