VSCode的Beautify扩展在HTML文件中不生效该如何配置？

算力阿峰

2026-10-3

VSCode Beautify扩展HTML格式化异常原因与配置方案

问题产生的常见原因

Beautify扩展未关联HTML文件类型：默认配置可能未将html加入支持的格式化目标列表
VSCode默认格式化器冲突：当前HTML文件的默认格式化程序被设置为其他扩展（如Prettier、内置HTML格式化工具），未指定为Beautify
配置文件优先级冲突：项目根目录的.jsbeautifyrc配置规则存在错误，或与全局Beautify配置冲突
HTML文件语法错误：文件存在未闭合标签、语法报错时，Beautify会终止格式化操作
扩展版本兼容性问题：老旧版本Beautify与新版VSCode存在适配缺陷

修复配置方法

1. 关联Beautify到HTML文件类型

打开VSCode设置（快捷键Ctrl+,/Cmd+,），搜索beautify.language，在settings.json编辑项中添加如下配置：

"beautify.language": {
    "js": {
        "type": ["javascript", "json"],
        "filename": [".jshintrc", ".jsbeautifyrc"]
    },
    "css": ["css", "scss"],
    "html": ["htm", "html", "vue"] // 此处需确保包含html类型
}

2. 指定HTML文件默认格式化器为Beautify

打开任意HTML文件，右键点击编辑器空白处，选择「使用...格式化文档」
选择「配置默认格式化程序」，在弹出列表中选中HookyQR.beautify

也可以直接在settings.json中添加配置实现：
"[html]": {"editor.defaultFormatter": "HookyQR.beautify"}

3. 校验并调整Beautify格式化规则

如果项目根目录存在.jsbeautifyrc配置文件，需确保HTML相关规则配置正确，基础可用示例如下：

{
    "html": {
        "indent_size": 2,
        "indent_char": " ",
        "max_preserve_newlines": 2,
        "preserve_newlines": true,
        "wrap_line_length": 120,
        "unformatted": ["code", "pre"]
    }
}