如何在Vim中使用VSCode默认的HTML格式化程序

VSCode 内置 vscode.html-language-features 的 HTML 格式化能力基于定制版 js-beautify 实现，可通过独立命令行工具调用同款逻辑，对接已安装的 vim-autoformat 即可，配置步骤如下：

1. 安装同款格式化命令行工具 #

先确保本地已安装 Node.js 环境，终端执行以下命令全局安装和 VSCode 默认行为完全对齐的格式化工具：

npm install -g @vscode/html-formatter

安装完成后终端执行 vscode-html-format --version 能正常输出版本号即代表安装成功。

如果遇到包安装失败的情况，也可以安装通用版 js-beautify 作为替代，格式化逻辑和 VSCode 默认差异极小：

npm install -g js-beautify

安装后可用命令为 html-beautify。

2. 配置 vim-autoformat 关联格式化工具 #

打开你的 Vim 配置文件（通常路径为 ~/.vimrc，Neovim 为 ~/.config/nvim/init.vim），添加以下配置：

" 定义VSCode同款HTML格式化程序
if executable('vscode-html-format')
    let g:formatdef_vscode_html = '"vscode-html-format"'
elseif executable('html-beautify')
    let g:formatdef_vscode_html = '"html-beautify -f -"'
endif
" 将该格式化程序绑定到HTML文件类型
let g:formatters_html = ['vscode_html']

" 可选配置：保存HTML文件时自动触发格式化
autocmd BufWritePre *.html Autoformat

配置注意事项：

• vscode-html-format 默认从标准输入读取待格式化内容，将格式化结果输出到标准输出，完全符合 vim-autoformat 的调用规范，不需要额外传参。
• 如果需要和你本地 VSCode 的自定义格式化规则对齐，可在项目根目录或用户家目录创建 .jsbeautifyrc 配置文件，VSCode 的 HTML 格式化本身也会读取该文件的规则，可实现两边格式化效果100%一致。

3. 常见问题排查 #

• 执行格式化提示找不到命令：在 Vim 中执行 :echo $PATH 确认 npm 全局二进制路径是否被 Vim 识别，可通过终端执行 npm bin -g 拿到全局二进制存放路径，将路径追加到 Vim 的 PATH 变量中即可，示例：

  let $PATH .= ':/your/npm/global/bin/path'
  

• 格式化规则和 VSCode 不一致：检查 VSCode 中所有 html.format.* 开头的配置项，对应映射到 .jsbeautifyrc 的同名字段即可，两边配置字段基本完全通用。

内容的提问来源于stack exchange，提问作者candrew