如何在VScode中添加代碼片段

拿 VUE 舉例，新建 VUE 文件，輸入前綴，出現代碼段

文件 --->  首選項 ---> 用戶代碼片段 

在輸入框中輸入 vue ，找到 vue.json ，然后在 vue.json 里面配置。

如下是 vue.json 的例子

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

 

prefix ： 在 Intellisense 中選擇代碼片段時將使用的前綴。

 

body：代碼片段的內容。使用“$1”和“${1:defaultText}”定義光標位置，使用“$0”定義最終光標位置。使用“${varName}”和“${varName:defaultText}”插入變量值，例如“這是文件：$TM_FILENAME”。

 

description：代碼片段描述。

 

我們可以更改為自己想要的內容

"Print to console": {
    "prefix": "vuec",
    "body": [
      "<template>",
      "  <div>",
      "    $0",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '',",
      "",
      "  data () {",
      "    return {",
      "    }",
      "  },",
      "",
      "  methods: {}",
      "}",
      "</script>",
      "",
      "<style lang='stylus' rel='stylesheet/stylus'>",
      "",
      "</style>",
      ""
    ],
    "description": "Log output to console"
  }