vscode中使用emmet

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的快捷键冲突即可。