vscode中使用emmet

最新推荐文章于 2021-08-20 11:19:55 发布

原创最新推荐文章于 2021-08-20 11:19:55 发布 · 1.8w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器

本文详细介绍如何在VSCode中激活并优化Emmet功能，包括设置语法展开提示、优先显示及适用场景，解决tab键冲突问题，适用于HTML、JSX、CSS等文件，特别针对React和Vue开发者的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vscode内置emmet功能，可以用在html、jsx、css、sass、less等文件上。但是默认没有开启。

在setting中添加：

  "emmet.triggerExpansionOnTab": true,

之后，在.html文件里输入div.myclass，vscode会自动弹出提示，询问你是否展开该语法，按下tap键盘后会自动展开html，完美～

但是在react或vue里使用缩写，emmet不会自动弹出展开提示，我大致看了下文档emmet部分，解决方案如下：

在setting中添加下面几句：

  //显式弹出语法展开提示
  "emmet.showSuggestionsAsSnippets": true,
  //将语法展开提示在提示列表中置顶
  "editor.snippetSuggestions": "top",
  //emmet只显示标记语言和样式表的展开提示
  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
  //emmet能识别缩写语法的场景
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "jade"

这样，在react/vue中，或模板jade里，都可以使用emmet语法了，并且提示列表里会优先显示emmet语法扩展。

期间遇到一个小问题，就是按下tab键无效，只能在弹出提示的时候按下enter来展开jsx，随后找到了原因：

因为我之前将vscode的go to definition的快捷键改为tab+space。由于是user设定的快捷键，优先级比默认的高，所以覆盖了emmet的tab。在我按下tab键之后，软件会继续等我按下space，而不是直接执行emmet的语法展开。

solution：将自定义的go to definition的热键删除，或换成其他键，确保不会与emmet的快捷键冲突即可。