如何在vscode中高效编写Markdown与预览文档?【教程】

9次阅读

vs code 可通过 markdown Preview Enhanced 扩展实现高效双栏 Markdown 编写与预览:固定右侧预览、自动刷新、支持数学公式与 Mermaid 图表;关闭 markdownlint 和拼写检查减少干扰;配置代码片段快速插入表格等结构。

如何在vscode中高效编写Markdown与预览文档?【教程】

VS Code 本身不内置实时双栏 Markdown 预览,但通过合理配置扩展和快捷键,可以实现接近 Typora 的高效编写+预览流——关键不在“自动同步”,而在“低干扰切换”和“精准刷新”。

Markdown Preview Enhanced 替代默认预览

VS Code 自带的 Ctrl+Shift+V 预览功能简陋:不支持数学公式、图表(Mermaid)、目录跳转,且无法并排。而 Markdown Preview Enhanced(简称 MPE)是目前最稳定的替代方案。

  • 安装后右键编辑器 → Markdown Preview Enhanced: Open Preview to the Side,即可固定右侧预览窗
  • 它会监听文件保存(Ctrl+S),自动刷新;如需手动刷新,按 Ctrl+K V
  • 支持 $$E=mc^2$$```mermaid[TOC] 等主流扩展语法,无需额外配置
  • 注意:不要同时启用 VS Code 内置预览和 MPE,否则右侧可能出现两个预览标签页,造成混淆

settings.json 关闭冗余格式校验

VS Code 默认对 Markdown 启用 markdownlint 和拼写检查,常在写标题时弹出“line Length exceeds 80”的提示,打断思路。

  • 打开设置(Ctrl+,)→ 搜索 markdown.validate.lineLength → 取消勾选
  • settings.json 中添加:
    "markdownlint.config": {   "line-length": false,   "no-inline-html": false }, "editor.spellcheck": "off"
  • 这样既保留基础语法高亮,又避免写作中频繁弹出无关警告

Ctrl+K Ctrl+P 快速插入常用结构

手敲 ## 标题- [ ] 待办 或表格太慢;VS Code 的代码片段(snippets)可一键补全。

  • 新建用户代码片段:Ctrl+Shift+P → 输入 Configure User Snippets → 选 markdown.json
  • 添加一个常用表格片段:
    "Table 3 cols": {   "prefix": "table3",   "body": [     "| ${1:Header1} | ${2:Header2} | ${3:Header3} |",     "| --- | --- | --- |",     "| ${4:Cell1} | ${5:Cell2} | ${6:Cell3} |"   ] }
  • 之后输入 table3 + Tab,光标会依次停在表头和单元格位置,比复制粘贴快得多

真正影响效率的不是预览是否“自动”,而是切换成本和干扰频率。MPE 的右侧预览 + 关闭 lint 提示 + 自定义 snippet,三者组合下来,写一篇 2000 字文档基本不用离开键盘——唯一容易被忽略的是:每次重装系统或换机器后,记得重新启用 MPE 的“自动刷新”选项(它有时会在更新后被重置为手动模式)。

text=ZqhQzanResources