VSCode配置Beautify插件实现多种语言格式化-VSCode-PHP中文网

不推荐新项目使用beautify插件，因其自2019年起停止维护，与vs code新版语言服务兼容性差，易导致js不生效、vue指令错位、json解析错误；旧项目无问题可继续用，但新建或团队项目应优先选用prettier或unibeautify。

vscode配置beautify插件实现多种语言格式化

Beautify插件是否还值得用？

不推荐新项目直接上 Beautify（即 vscode-beautify），它自 2019 年起已基本停止维护，官方 GitHub 仓库长期无更新，且与 VS Code 新版语言服务（如 TypeScript 5.5+、ESLint v9、HTML 全新解析器）存在兼容问题。常见表现是：格式化后 script 标签内 JS 不生效、template 中 Vue 指令错位、JSON 文件报 Unexpected token 错误。如果你正用着它且没出问题，可以继续；但新建项目或团队统一规范时，应优先选 prettier 或 unibeautify。

想用Beautify必须满足的三个前提

即使坚持使用，也得先确认这三点是否成立，否则按教程配了也白配：

当前文件右下角语言模式必须正确识别 —— 比如 SQL 文件要显示 SQL 而非 Plain Text，否则 Beautify 根本不触发
已安装对应语言的子格式化器 —— Beautify 本身不带解析能力，靠外部库（如 vkbeautify 处理 HTML/CSS/JS，sql-formatter 处理 SQL），插件设置里要手动指定路径或启用内置 fallback
beautify.ignore 配置项必须显式声明忽略项 —— 否则它会尝试格式化 node_modules 下的 .min.js 或 dist/ 里的压缩文件，导致卡死或报错 RangeError: Maximum call stack size exceeded

如何让Beautify支持多语言但不冲突

它不支持“自动识别语言并调用对应美化器”，必须靠 language-specific settings 手动绑定：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

打开设置 → 搜索 beautify.language → 点击 Edit in settings.json
填入类似这样的映射（注意：键名是 VS Code 内部语言 ID，不是文件后缀）：

{
  "beautify.language": {
    "js": {"type": ["javascript", "json"], "filename": [".jshintrc", ".jsbeautifyrc"]},
    "css": {"type": ["css", "scss", "less"]},
    "html": {"type": ["html", "vue", "svelte"]}
  }
}

⚠️ 关键点：vue 和 svelte 不在默认支持列表里，必须显式加进去；ts 类型默认不被识别，若要处理 .ts 文件，得额外加 "typescript" 到 js.type 数组中，否则保存时无反应。

配置文件 .jsbeautifyrc 的实际生效逻辑

.jsbeautifyrc 只在文件所在目录或其任意父级目录存在时才加载，且**就近优先** —— 项目根目录的配置不会覆盖 src/components/ 下同名文件的本地配置。常见坑：

indent_size 设为 0 不代表“不缩进”，而是退回到编辑器全局缩进设置，容易误以为失效
wrap_line_length 对 HTML 生效，但只作用于属性换行（如 class="a b c d e f"），不影响标签嵌套层级
extra_liners 数组里写 "div" 没用，必须写 "/div" 才能在闭合标签前加空行
VS Code 1.80+ 版本对 .jsbeautifyrc 的 JSON Schema 校验更严格，字段名拼错（如 indet_size）会导致整个配置静默失败，不报错也不生效