一講到寫代碼的效率問題，很多程序員同志們都會想到各種編輯器的插件，這些插件有的能幫你快速地規范代碼格式，有些能自動補全閉合標簽，還有的能智能提示文件路徑等。

其實除了安裝各種插件之外，有些編輯器（如vscode，sublime）內置了自定義代碼片段功能，即snippet。

自定義snippet之后，可以通過輸入簡短的觸發指令而生成完整的代碼片段。如輸入log即可生成console.log('')。

然而似乎很多程序員盆友們很少把這個功能用起來。下面以vscode編輯器為例，介紹snippet的玩法。

1.進入菜單 code--首選項--用戶代碼片段

菜單示意圖

2.選擇代碼片段的語言，自定義的代碼片段只會在選定的語言類型文件里生效

選擇代碼片段的語言

3.以vue代碼片段語言為例，生成vue.json文件

示例說明

現在我們可以開始自定義我們常用的vue代碼片段了，如：

"Vue template": {
   "prefix": "vue",
   "body": [
       "<template>\n\t<div>\n\t\t$1\n\t</div>\n</template>\n<script>\nexport default {\n\t\n}\n</script>\n<style lang=\"less\" scoped>\n\n</style>",
    ],
   "description": "Log output vue template"
    }

現在我們新建一個test.vue文件，輸入vue再回車即可生成vue代碼模板

生成的vue代碼模板

很方便對吧！簡直是“write less，code more”有木有！

4.配置優化
vscode默認的配置是，用戶輸入指定的prefix字段，然后根據編輯器提示選擇并回車生成代碼片段，但是有時候編輯器的彈窗提示存在一定的延遲。

image.png

優化建議：進入菜單 code--首選項--設置，添加配置"editor.tabCompletion": true，這樣我們就可以在輸入prefix字段后按Tab鍵快速生成代碼片段啦～