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，按回车，输入的代码如下：

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