Skip to main content

VSCode搭建最强Markdown编辑环境

VSCode是笔者用过的最好用的开发工具,没有之一。笔者14年的码龄生涯中,先后用过Eclipse、 IntelliJ IDEA、 WebStorm、 PyCharm、 Visual Studio(2010/2013/2015)、 NetBeans、 Sublime Text等,但自从用VSCode之后,就再没换过其他工具,一直用到现在有5年多的时间。

1. 本文目标

这篇文章主要介绍如何使用VSCode来进行Markdown的写作,用VSCode来搭建一套markdown的文档写作环境。

什么是markdown?

Markdown是一种轻量级的标记语言,旨在简化文本格式化的过程。它允许用户使用纯文本格式编写文档,并通过简单的标记语法来添加格式,如标题、列表、粗体、斜体、链接和图片等。Markdown文件通常以.md或.markdown为扩展名。具体语法参见以下文档,这里不再赘述。

先展示一下最终的效果图:

2. 准备工作

官网下载VSCode并安装: https://code.visualstudio.com/

3. 安装插件

vscode默认是支持Markdown的,基本的语法、编辑功能、预览功能都可以用,但如果需要更高级的功能,可以安装一些插件来提升效率。使我们的markdown文档编辑起来更加丝滑、高效。

插件名称发布者功能介绍
Markdown All in OneYu Zhang支持快捷键(如粗体/斜体)、创建目录、表格自动格式化、LaTeX 数学公式支持等功能
markdownlintDavid AnsonMarkdown语法检查器,可识别和快速修复常见的Markdown语法错误。
Markdown TableTakumi IshiiMarkdown表格编辑的神器,可对表格进格式化、插入行、行/列等。
Markdown PDFyzane支持将Markdown文件转换成pdf, html, png, jpeg等格式。
Markdown Preview Github StylingMatt BiernerGithub使用的Markdown渲染样式,整体样式:朴素、简洁。
Markdown Preview EnhancedYiyi WangMarkdown预览插件,支持目录树,提供更丰富的功能和更强的定制化能力。
Markdown Preview Github Styling是同类型的插件,可以根据自己的喜好选择其中一个安装。
Write Timestampmichael gieson插入系统当前时间戳,可以自定义格式。
Paste Imagemushan粘贴图片,支持将剪切板里的图片直接保存到文档中。支持自定义保存路径。

4. 插件的用法

4.1. Markdown All in One

4.1.1. 快捷键

快捷键功能
Ctrl + B加粗
Ctrl + I斜体
Ctrl / Cmd + Shift + V切换预览模式和编辑模式

4.1.2. 创建/更新目录

  1. 打开命令面板(Ctrl + Shift + P)。
  2. 输入“Markdown All in One: Create Table of Contents”创建目录,输入“Markdown All in One: Update Table of Contents”更新目录。
  3. 点击/或按下回车确认。

4.1.3. 给标题增加序号

  1. 打开命令面板(Ctrl + Shift + P)
  2. 输入“Markdown All in One: Add/Update section Number”
  3. 点击/或按下回车确认

4.2. markdownlint

4.2.1. 格式检查

markdownlint安装后,默认会开启格式检查的功能。当markdown文档格式错误时,编辑器内对应的错误行会有(黄色波浪线的)提示信息。

4.2.2. 文档格式化

可以通过markdownlint对整个markdown文档进行格式化,并自动修复错误。

快捷键:

MacOS: Option + Shift + F Windows: Ctrl + Shift + F

鼠标右键:

  1. 编辑器内右键鼠标 -> 选择“Format Document With” -> 选择“markdownlint” -> 点击/或按下回车确认。
  2. 编辑器内右键鼠标 -> 选择“Format Document With” -> 选择“Configure Default Formatter...” -> 配置默认的格式化器。

保持时自动格式化:

settings.json文件中添加以下内容:

"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable"

4.3. Markdown Table

4.3.1. 格式化表格

  1. 打开命令面板(Ctrl + Shift + P),或者鼠标右键点击表格区域。
  2. 选择“Markdown Table: format table”。
  3. 点击/或按下回车确认。

4.3.2. 插入表格列

  1. 打开命令面板(Ctrl + Shift + P),或者鼠标右键点击表格区域。
  2. 选择“Markdown Table: insert column left/right”。
  3. 点击/或按下回车确认。

4.4. Markdown PDF

  1. 打开命令面板(Ctrl + Shift + P)。
  2. 输入“Markdown PDF:”。
  3. 选择需要导出的文件格式。
  4. 点击/或按下回车确认。

注意: Markdown PDF导出的PDF文件没有目录,如果需要目录,可以使用prince工具。prince的安装和使用可以参考《将Markdown转换为PDF文件(支持目录大纲)》。

4.5. Write Timestamp

  1. 快捷键

PC: ctrl-shift-t

MAC: cmd-shift-t

  1. 自定义时间格式

在settings.json文件中添加以下配置:

"writeTimestamp.bCustomFormat": "yyyy-mm-dd  HH:MM:SS"

4.6. Paste Image

默认快捷键:

Windows/Linux: Ctrl+Alt+V

MacOS: Cmd+Alt+V

自定义保存路径:

在settings.json文件中添加以下配置:

// 设置图片保存路径:与文件同级的目录创建一个与文件同名的文件夹,在此文件夹下存放图片。
"pasteImage.path": "${currentFileNameWithoutExt}/",
// 设置图片默认名称, 默认为当前文件名
"pasteImage.defaultName": "${currentFileNameWithoutExt}",