在 VScode 自訂程式碼片段(Snippets),以 Vue 單一元件檔基本架構為例

開啟 VScode 程式碼片段功能

檔案(F)喜好設定程式碼片段

選擇檔案類型

此例選擇 vue.json,依情況有所不同

撰寫程式碼片段

VScode 程式碼片段基本架構為

1
2
3
4
5
6
7
8
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}

自訂片段名稱

修改範例中的 "Print to console" 即可

自訂片段關鍵字

修改範例中的 "prefix": "log" 即可,完成儲存後我們就可以在所有該類型的檔案輸入 log + Tab 鍵 快速生成自訂的程式碼片段

自訂片段描述

修改範例中的 "description": "Log output to console" 即可

自訂片段程式碼

主要的程式碼片段寫在 body 內,每一行都需要以 " " 雙上引號包覆,需要折行則加上 \n,若程式碼內需要使用到雙上引號,需要在前面加上反引號,如 \"。 另外範例中的 $1 為生成該程式碼片段後閃爍游標所在位置,$2 則是再次按下 Tab 鍵後游標的下一個位置,依此類推。

Vue 單一元件檔基本架構程式碼片段範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
"vue template": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" props: {\n",
" },",
" data() {",
" return {\n",
" };",
" },",
" computed: {\n",
" },",
" created() {\n",
" },",
" mounted() {\n",
" },",
" watch: {\n",
" },",
" methods: {\n",
" },",
" components: {\n",
" },",
"};",
"</script>\n",
"<style scoped lang=\"${1:scss}\">\n",
"</style>\n",
],
"description": "Create vue template"
}
}

再來就可以新增 .vue 副檔名檔案,輸入 vue 並按 tab 鍵使用囉。