离线环境下VSCode文档排版错乱,核心是字体fallback失败、格式化工具链缺失、编码识别失准三者叠加;必须分层修复:预装中文字体(如Sarasa Gothic SC)、配置markdown-pdf.fontFamily为单引号包裹的字体链、禁用preload、锁定文件编码、确保Prettier等依赖离线可用。

离线环境下 VSCode 文档排版错乱,核心问题不是“没网就不能排版”,而是格式化工具链缺失、字体 fallback 失败、编码识别失准三者叠加 —— 修复必须分层击破,不能指望一键解决。
为什么离线时 Markdown/PDF 导出排版全崩
VSCode 离线导出 PDF(如用 Markdown PDF)本质是调用本地 Puppeteer + Chromium 渲染 HTML;一旦缺失中文字体或未预装对应字体文件,就会 fallback 到系统默认非等宽字体(如 Windows 的 SimSun),导致中文占位 1.5 倍宽度、表格列偏移、代码块溢出。这不是渲染 bug,是字体链断裂。
- 必须在离线前确认系统已安装并注册字体,例如
Maple Mono或Sarasa Gothic SC,名称需与字体管理器中「全名」完全一致 -
markdown-pdf.fontFamily配置必须用单引号包裹中文字体名,且前置:"'Sarasa Gothic SC', 'Cascadia Code', monospace" - PDF 导出不读取
editor.fontFamily,必须单独配markdown-pdf.fontFamily,否则编辑器看着正常,导出仍方框 - 导出前务必关闭
markdown-pdf.preload(若启用),它会尝试加载远程 CSS/JS,在离线时直接失败并静默降级为无样式输出
离线 Vue/HTML 文档中中文对齐失效
Vue 单文件组件(.vue)在离线时若 <template> 区域中文属性值对齐错乱,大概率不是缩进问题,而是 Vetur 的 HTML 格式化器(如 js-beautify)未随插件一并打包 —— 离线安装 octref.vetur 时,其依赖的二进制或子模块可能未完整载入。
- 打开内置终端,运行
npx js-beautify --version,无输出说明 HTML 格式化能力缺失 - 临时补救:在
.vscode/settings.json中为[html]显式指定备用 formatter:"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }(Prettier 的 HTML 支持不依赖额外二进制) - 确保
vetur.format.options.wrapAttributes设为"force-aligned-multiple",否则中文属性名(如class="xxx")不会垂直对齐 - 禁用
vetur.format.options.unformatted中的pre和code,否则中文代码块内部缩进会被跳过
离线 Markdown 文件粘贴后缩进全乱
离线时 editor.formatOnPaste 若开启,VSCode 会尝试调用 Prettier 进行即时重排;但若项目未预装 prettier(即 node_modules/prettier 不存在),该操作会静默失败,粘贴内容保留原始空格/TAB 混用,视觉上就是“整段偏移”。
- 检查项目根目录是否存在
node_modules/prettier;若无,需提前在有网环境执行npm install --save-dev prettier并提交package-lock.json - 关闭
editor.formatOnPaste(设为false),改用editor.formatOnSave+ 手动保存触发,更可控 - 粘贴前先执行
editor.action.indentationToSpaces(命令面板搜 “Convert Indentation to Spaces”),强制统一为空格,避免混用干扰后续格式化 - 启用
editor.renderWhitespace: "all",让空格显示为·、Tab 显示为→,一眼定位混排行
离线时中文注释/日志文本对齐漂移
纯文本类文档(如 .log、.txt)在离线状态下出现中文列不对齐,90% 是因为 VSCode 未正确识别文件编码,用 UTF-8 解析了 GBK 编码的文件,导致每个中文被拆成两个乱码字符,宽度计算彻底错误。
- 右下角点击编码标识,依次尝试
GBK、GB2312、UTF-8 with BOM,哪个能还原原文就选哪个 - 在
settings.json中按后缀锁定编码:"files.associations": { "*.log": "gbk", "*.txt": "gbk" },避免每次手动切 - 禁用自动猜测:
"files.autoGuessEncoding": false,防止 VSCode 在你不知情时又切回错误编码 - 字体配置必须同步生效:编辑器、终端、PDF 导出三处的
fontFamily都要含等宽中文字体,且editor.fontSize设为14或15,editor.lineHeight设为像素值(如24),否则基线浮动会让中文“悬空”
真正难的不是某次导出看起来整齐,而是让所有机器、所有时间点、所有文件类型,在离线前提下,都复现同一套对齐逻辑 —— 这要求字体、编码、格式化器、配置项四者全部可携带、可验证、不可覆盖。


















