VsCode程式碼段新增方法

我們在編寫程式碼的過程中，常常會遇到一些固定的結構或常用的處理方法。

編寫耗費時間盡力，這時我們想到了新增程式碼段功能，幫助我們快速的完成編寫。

下面以VsCode為例子：

我們將在VsCode中插入Vue1.0的一個固定寫法

1.準備常用程式碼

 1     <div id="app">
 2         <div>{{msg}}</div>
 3     </div>
 4     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 5     <script>
 6         var vm = new Vue({
 7             el: '#app',
 8             data: {
 9                 msg: 'hello world'
10             },
11             methods: {
12     
13             },
14         })
15     </script>

2.藉助工具編寫,將程式碼貼上到左邊欄，注意格式

https://snippet-generator.app/

3.點選Copy snippet複製編輯好的程式碼，開啟VsCode同時按住Ctrl + Shift + p 輸入程式碼片段選中，輸入html（因為該程式碼片段在html檔案中使用）選中html.json

4.在開啟檔案中貼上程式碼段儲存即可

5.在html檔案中輸入vue-m便會提示該程式碼塊，選中便可引用成功