前言
如何在撰寫樣板字面值的時候,直接在反引號裡面也具有 Emmet 的功能
在 VS Code 的開發編輯器中, Emmet 是內建的功能,所以我們可以在 body 的標籤中直接輸入想要的結構,
按下 tab 就自動生產出來。那麼現在的情況是,我也想要在撰寫樣板字面值的時候,直接在反引號裡面也具有 Emmet 的功能
的話,不是就很方便了嗎?
開啟在樣板字面值中使用 Emmet 的設定
1. 找到 VS Code 左下方的設定,並點選設定(Settings)

2. 開啟使用者設定(Settings.json)
打開以後可能會看到下面兩種畫面
如果是上面的這種,恭喜你,右手邊的 json 就是使用者設定
如果是上面這種,再麻煩點選右上繳紅色框住的按鈕開啟使用者設定(Settings.json)
3. 使用者設定(Settings.json)的語法設置
在使用者設定中,可以針對不同的行為去進行規範以及設定,這裡我們只要把下面這段 json 設定貼到使用者設定裡面就可以開
啟在樣板字面值中使用 Emmet 的功能。
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"plaintext": "jade"
},
貼上去之後並且存檔,就可以正常運作了。
這個時候就可以快速的在樣板字面值中使用 Emmet 產生 html 的結構了。