VSCode 一字十行之代码片段

以前使用 Xcode 的时候，有一种方法可以把自己常用的「代码片段」保存起来，当在 Xcode 输入某个字符时即可提示你所保存的代码片段，可快速地完成编码。

今天查了下 VSCode，也有类似的功能，分享给大家。

比如我们创建一个 vue 组件的时候，通常会输入：

<template>
  <div class="wrap">
    
  </div>
</template>


<script lang="ts">
</script>


<style lang="stylus" scoped>
</style>

我们习惯了粘贴复制，其实可以把这个代码定义成代码片段，以后输入一个字母既可以输入这些代码。

打开 VSCode，依次点击：

Code -> Preferences -> User Snippets -> New Global Snippets file，输入一个 snippet 文件名，我起名 vue，定义了两个代码片段：

1、打印输出

2、vue 组件

{
  "console": {
    "scope": "javascript,typescript",
    "prefix": "sy_log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "wsy to console"
  },
  "component": {
    "scope": "",
    "prefix": "sy_component",
    "body": [
      "<template>",
          "    <div class=\"wrap\">",
          "    </div>",
        "</template>",
        "",
      "<script lang=\"ts\">",
      "$3",
        "</script>",
        "",
      "<style lang=\"stylus\" scoped>",
      "$4",
        "</style>"
    ],
    "description": "component of vue"
  }
}

当在 VSCode 代码区域中输入 sy 的时候会提示 sy_component 和 sy_log。

选择 sy_log ，按回车，输入的代码如下：

console.log('');

选择 sy_component，按回车，输入的代码如下：

更多使用技巧，自己摸索一下即可！大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端