解决VSCode中emmet对行内标签不换行的问题

Posted 2021-09-07 BENCJL

问题：VSCode使用emmet编辑a*5或 span*5，生成多个行内标签时，不会自动换行。对块标签则会自动换行。我希望对行内标签也可以自动换行。

分析：网上能找到WebStorm类似问题的做法（webstorm中emmet展开a标签和行内元素不换行），VSCode没有。WebStorm的做法是直接修改IDE的配置，VSCode没有此类配置。VSCode的格式化，在html和emmet这两个内置插件上，经过一番搜索（关键字“行内”、“inline”、“new line”），找到了两篇文章：

• 【翻译】Emmet(Zen Coding)官方文档 之六 自定义 Emmet
• Force Emmet (VS Code) to wrap all abbreviations inline

解决：参考第一篇文章，应对emmet的配置文件做修改。其思路是，设置inline_break属性值为2，从而达到2个行内元素即强制换行，以此类推；值为0则不为行内元素换行。第一次配置还不知道格式，参考第二篇文章解决类似问题的配置格式。VSCode设置中搜索Syntax Profiles，在settings.json中编辑，加入如下代码：

    "emmet.syntaxProfiles": {
        "html": {
            "inline_break": 2
         }
    }

保存后立即生效，输入a*2或span*3等均可自动换行。