Javascript 进阶 10-2 样板字面值技巧：VSCode 搭配 Emmet 撰写 HTML 结构

很多有开发经验的人应该都很需要 Emmet 的帮忙，来快速生产想要且重複性高的 html 结构。

而在 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的结构噜!