You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

求助:Visual Studio Code HTML自动格式化莫名添加多余空格

解决VS Code HTML格式化自动添加多余空格的问题

我之前也碰到过类似的格式化异常情况,结合你说的问题近一周才出现的线索,给你几个针对性的排查和解决方向:

  • 先排查第三方格式化插件的问题
    很多人会给VS Code装Prettier、HTML Formatter这类第三方格式化工具,要是近一周某个插件自动更新了,很可能引入了bug。你可以先试试:

    1. 暂时禁用所有和HTML格式化相关的第三方插件,重启VS Code后测试格式化是否正常。
    2. 如果禁用后问题消失,再逐个启用插件,找出那个出问题的家伙——要么回滚到它的旧版本,要么等着作者修复bug。
  • 仔细核对内置格式化器的配置
    哪怕你说已经排查过设置,有些细节可能没注意到。打开VS Code设置(快捷键Ctrl+,或者Cmd+,),搜索html.format,重点检查这些选项:

    • 看看有没有自定义的js-beautify配置(比如本地的.jsbeautifyrc文件),里面的attribute_space如果被错误配置,可能会强制给属性值前后加空格。
    • 检查html.format.wrapAttributes的设置,如果是force-aligned或者force-expand-multiline,也可能间接导致空格异常,暂时改成auto试试。
  • 检查VS Code本身的版本更新
    要是近一周你更了VS Code的新版本,说不定是内置的HTML格式化器出了问题。你可以:

    1. 回滚到上一个稳定版本(左下角设置里找"Install Another Version"),测试格式化是否恢复正常。
    2. 要是回滚后没问题,那就是新版本的bug,去VS Code的GitHub仓库提个issue反馈就行。
  • 别漏了工作区的自定义设置
    有时候工作区里的.vscode/settings.json会覆盖全局设置,你可能只查了全局的,没注意工作区的。打开这个文件,搜索html.format相关配置,看看有没有奇怪的自定义规则,比如强制给属性加空格的设置,暂时注释掉再测试。

举个例子,要是你在工作区设置里看到这样的配置,大概率是它搞的鬼:

"html.format.wrapAttributes": "force-expand-multiline",
"html.format.indentInnerHtml": true

针对你给出的例子:

原代码:<table class="decodeTable" ng-show="mode == '0'">
格式化后变为:<table class=" decodeTable " ng-show="mode == '0'">

这种属性值前后硬加空格的情况,基本就是某个格式化工具的配置被改了,不管是插件还是内置的js-beautify,重点找控制属性空格的相关选项就行。

内容的提问来源于stack exchange,提问作者frlo

火山引擎 最新活动