求助:Visual Studio Code HTML自动格式化莫名添加多余空格
解决VS Code HTML格式化自动添加多余空格的问题
我之前也碰到过类似的格式化异常情况,结合你说的问题近一周才出现的线索,给你几个针对性的排查和解决方向:
先排查第三方格式化插件的问题
很多人会给VS Code装Prettier、HTML Formatter这类第三方格式化工具,要是近一周某个插件自动更新了,很可能引入了bug。你可以先试试:- 暂时禁用所有和HTML格式化相关的第三方插件,重启VS Code后测试格式化是否正常。
- 如果禁用后问题消失,再逐个启用插件,找出那个出问题的家伙——要么回滚到它的旧版本,要么等着作者修复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格式化器出了问题。你可以:- 回滚到上一个稳定版本(左下角设置里找"Install Another Version"),测试格式化是否恢复正常。
- 要是回滚后没问题,那就是新版本的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




