VSCode利用Snippets设置超实用的代码块

console.log 代码块

"console.log": {
    "prefix": "log",
    "body": [
      "console.log($1)",
      "$2"
    ],
    "description": "console.log快捷"
  }
复制代码

以下说明都用 console.log 代码块为例子：

• console.log 对应代码片段名称。
• prefix 对应触发代码片段的字符。
• body 对应代码片段内容，可以是字符串，也可以为数组，若为数组每个元素都做为单独的一行插入。 body 的内容支持js的转义字符，如 \n\r 等，我个人不建议用 \n ，可另起一行给数组多插入一项，不然一行太多的话不容易观察代码块的格式。
• description 对应代码片段描述。

如上图所示，“console.log快捷”是代码块的描述，出现在关闭icon的左边，然后下面是代码块的预览。

1.占位符$

log 方法中 $ 后面紧跟数字可指定代买片段触发并落入编辑器之后的光标位置，光标位置按照从小到大排序。 log 方法中当你输入 log + TAB 之后光标会默认落到 log() 的括号中（ $1 的位置），如果此时没有手动移动光标位置，再次按 TAB 则光标会落到 console.log() 的第二行（ $2 的位置），当然，你也可以设置 $3、$4 ... 等等。需要特别注意的是 $0 用于设置最终光标的位置，设置了 $0 之后，再设置其他占位符则不会生效， $0 终止了 TAB键 的光标跳转操作。

2.占位内容的可选项

"方法注释": {
    "prefix": "zs-Function",
    "body": [
      "/**",
      " * @param name... { ${1|Boolean,Number,String,Object,Array|} }",
      " * @description description...",
      " * @return name... { ${2|Boolean,Number,String,Object,Array|} }",
      " */",
      "$0"
    ],
    "description": "添加方法注释"
  }
复制代码

上面是一个简单的方法注释代码块，占位符默认不带可选项，如果要设置占位内容的可选项，写法为 ${1|a,b,c} ，括号中的 1 对应的是按 TAB 之后的光标落点顺序， abc 为可选的项，用逗号隔开。所以上面的代码在输入 zs + TAB 后第一个光标会落在 param name... {} 的大括号中（ $1 的位置），如下图可以看到设置的可选项。

选择了参数类型之后，再次按 TAB , 光标会自动落到返回参数类型处（ $2 的位置）并弹出可选项。如下所示：

选择了第二个选项之后，再次按 TAB ,光标自动落到我们配置的 $0 处，也就是 */ 的下一行：

需要注意的是：

${1:default}
${1:another ${2:placeholder}}

3.变量

使用 $name 或者 ${name:default} 可以插入变量的值。如果未设置变量，则会插入其默认值或空字符串。当变量未知（未定义其名称）时，会将插入的变量名称转换为占位符。

VSCode中可以使用以下变量：

1）文档相关：

2）当前日期和时间：

3）要插入行或块注释，请遵循当前语言：

举个栗子：

下面的代码块是常用的文件顶部添加作者和时间的块注释，其中用到了年（ CURRENT_YEAR ）月（ CURRENT_MONTH ）日（ $CURRENT_DATE ）的系统变量。

"作者和时间注释": {
    "prefix": "zs-Author & Time",
    "body": [
      "/**",
      " * Created by preference on $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE",
      " */",
      "$0"
    ],
    "description": "添加作者和时间注释"
  }
复制代码

再举个栗子：

下面的代码块是新建 .Vue 文件的模板代码块，其中用到了当前文档没有扩展名的文件名（ TM_FILENAME_BASE ），默认把文件名填入 name 和 class 中。

"Vue模板": {
    "prefix": "vue-template",
    "body": [
      "<template>",
      "  <section class=\"$TM_FILENAME_BASE\">",
      "    $1",
      "  </section>",
      "</template>\n",
      "<script>",
      "export default {",
      " name: '$TM_FILENAME_BASE',",
      "  data() {",
      "    return {\n",
      "    }",
      "  },",
      "  components: {},",
      "  watch: {},",
      "  mounted() {},",
      "  methods: {}",
      "}",
      "</script>\n",
      "<style scoped lang=\"less\">\n",
      "</style>",
      "$0"
    ],
    "description": "Vue模板"
  }
复制代码