如何在VSCode設定自己想要的使用者片段

前端工程師在使用 vscode 這個編譯器進行切板剛開始時，通常開完一個叫做 index.html 的檔案後，就會開始在最初的頁面裡下一個驚嘆號。

這是預設的，所以完全不用做任何的設定，而當把這個驚嘆號給按下去之後，就會出現一套模板，包含了 html、head、body，這個模板節省了最初的撰寫時間，相信很多人沒有這個驚探號生成的模板可能剛開頭就不知道如何下手了。

而這個其實也能夠自己手動去做設定的，它是 vscode 其中的一個好用功能，叫做 User Snippets，也稱之為使用者自訂程式碼片段。

接下來就會教如何從零設定自己想要的使用者片段。

步驟一

首先 vscode 頁面從最上面那一排找到一個叫做喜好設定的選項當中，會看到裡面有一個叫做==使用者程式碼片段==的區塊，點下去。

會出現一個視窗的選項在中央供選擇，這此請按新增==全域程式碼片段檔案==。

這個選項的意思是此檔案設定的使用者片段會讓你的所有檔案都可以使用，所以假如只由讓特定檔案使用而已的話，就不適合全域的方式，可以選擇只 for 一個專案去新增。

然後會跳出需要為這個程式碼片段取名字，假如不知道要取什麼的話可以跟我一樣先叫做 demo，當做測試的意思。

會進入到一個檔案當中，這個檔案就是用來設定你全域使用者片段的地方，裡面一開始就有一段註解的 code，這段 code 其實就是在說明要如何使用使用者片段，還附了一段簡單的範例。

在這邊先反註解它的範例 code，來做測試，把綠色字 Example:下面的都反註解。
(mac 系列的使用者使用者反註解的方式就是 command + ?)

這邊解釋一下它範例裡面語法的個別意思。

指這個使用者片段可以使用的程式語言範圍，像是裡面 javascript 跟 typescript 就表示說，只有寫在兩種程式語言的檔案時才會生效，假如說在 html 的檔案中就不會生效。

填寫時的關鍵字，就像是最前面說的那個驚嘆號，打出關鍵字就能成功引入自己設定的使用者片段。

單個關鍵字用字串直接寫就好，但如果需要多個關鍵字就需要用陣列包起來。

使用者片段的內容本體，填寫在裡面的內容就會直接被當成使用者片段來輸出。

另外裡面假如只有單行的話，就可以包字串就好，但如果是多行的架構，就需要用一個陣列包起來。

描述這個使用者判斷是幹嘛的，可寫可不寫，寫了的話會顯示在顯示在 IntelliSense 上，可以讓其他人更好理解這個使用者片段在幹嘛。

這個範例裡面可以發現到 body 之中有著神秘的$符號，它其實就代表著，把這個使用這片段引入之後，預設的輸入位置，假如有多個時候，可以透過 tab 來做切換。

來看看這個內建的 log 使用者片段的效果。

我有一個想要用使用者片段的地方，就是我在一個新 vue 檔案時，都要重新寫

1
2
3

<script setup></script>
<template></template>
<style scoped></style>

所以會希望用使用者片段去節省掉寫這些的時候，直接來做設定！

直接照著格式謝一組自己需要的片段。

看使用效果：