VScode 設定 js 的 emmet

按下 tab 快速產生「樣板字面值( Template Literal )」

2 min readJun 23, 2020

ES6 樣板字面值

ES6 組字串的方式稱為「樣板字面值」（Template literals ），與傳統組字串不同的地方是：1. 使用重音符號「``」包裹字串。2. 加入變數的方法為：「${變數名稱}」，不須補上「+」號，寫法像是 HTML，可讀性較高。

var string = `
  <h1>這是一個 ${expression} 標題</h1>
  <ul>這是一個 ${expression} ul</ul>
      <li>這是一個 ${expression} li<il>
      <li>這是一個 ${expression} li<il>
`

在 js 裡設定 emmet，tab 展開即可快速生成 HTML 標籤，設定方法如下。

1. 開啟設定

2. 在設定中搜尋「Launch」

3. 開啟 settings.json，將下列程式碼覆蓋後儲存

{
    // emmet tab 自動展開
    "emmet.triggerExpansionOnTab": true,
    // template 展開
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "plaintext": "jade",
        "ejs": "html",
    },
}