以前使用 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，按回車，輸入的代碼如下：

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