第四章 遨游在“宇宙第一编辑器”——VS Code之中
4.1 基础配置
在介绍Markdown相关的内容之前，我们要先对VSCode进行一些基础的配置，其实主要是安装几个必备的插件——中文插件、主题插件、快捷键插件，这会使接下来的写作体验更好。
4.1.1 中文插件
1. 安装中文插件
- 使用快捷键Command+Shift+X（macOS）或 Ctrl+Shift+X（Windows）进入插件市场。
- 在搜索框中输入[Chinese]。
- 在搜索结果中单击【Chinese（Simplified）Language Pack for Visual Studio Code】
- 在详情页单击【Install】安装插件。
- 重启生效。
2. 切换语言
- 打开命令面板：菜单栏 →【查看】→【命令面板...】或使用快捷键：Shift+Command+A (macOS)/Ctrl+Shift+A (Windows)。
- 在命令面板输入框中输入[Configure Display Language]，然后按回车键。
- 在列出的已安装语言列表中进行切换，重启后生效。
4.1.2 主题插件
1. 选择主题插件
推荐安装One Dark Pro主题插件，这是一款非常经典而且安装人数最多的主题，它不光配色漂亮，据说还护眼。
2.切换主题
单击左下角活动栏上的【管理】图标→【颜色主题】→在显示的已安装的主题列表中切换主题即可
小提示： 推荐大家安装文件图标主题插件，这会让图标看起来更清晰漂亮。这里推荐Material Icon Theme或vscode-icons这两款图标主题插件
4.1.3 快捷键插件
常用的快键键插件：
- IntelliJ IDEA Key Bindings for Visual Studio Code
- Sublime Text Keymap and Settings Importer
- Visual Studio Keymap
- Atom Keymap
- Vim
- Notepad++keymap
- Eclipse Keymap
4.1.4 禁用/启用插件
进入插件管理界面会看到：搜索框、【已启用】、【推荐】、【已禁用】。
默认已安装的插件处于启用状态。如果想卸载或禁用某个插件，可以在【已启用】列表中查找，然后在详情页中选择禁用或卸载插件。禁用的插件会在重启后停用，可在【已禁用】列表中查看和重新启用这些插件。
4.2 写作体验
- 新建一个空文件夹“vscode-md”，用VS Code打开，此时资源管理器中会显示：打开的编辑器、VSCODE-MD 和大纲。现在它们都是空的。
- 单击 VSCODE-MD 右边的新建文件图标，新建一个“README . md”文件，由于我们之前安装了图标主题插件，在该文件之前会显示一个文件图标。
- 在README . md中输入一些内容来查看整个界面的显示情况。
在【大纲】视图中可以很方便地对Markdown文件大纲进行查看、筛选、查找和切换。然后，设置大纲列表，勾选以下选项。
- 跟随光标：在编辑Markdown文件时，大纲列表会跟随光标所在位置进行切换。
- 在输入时筛选：在大纲视图中直接输入内容时对大纲进行筛选，如果不勾选就只有查找功能（高亮显示查找结果，不会进行筛选）。
4.2.1 预览
若要预览Markdown文件，在资源管理器中的文件名上单击鼠标右键→选择【打开预览】→即可显示Markdown文件的预览界面。
| macOS系统 | Windows系统 |
|---|---|
| Command + Shift + V | Ctrl + Shift + V |
也可以在源码编辑界面单击右上角的【打开侧边预览】图标进入经典的Markdown编辑模式。如下图所示（左边为源码编辑界面，右边为预览界面）。
小提示： 两边的滚动是同步的，双击预览界面可切换到源码界面。
- 增强预览
默认的预览功能比较简单，很多语法都不支持，有些语法渲染的效果也不是很好，这时我们需要通过插件来增强预览功能。我们需要安装一个增强预览插件——Markdown Preview Enhanced。
安装完成后，在源码编辑界面，单击鼠标右键，在弹出的操作选项中单击【Markdown Preview Enhanced:Open Preview】，打开增强预览界面，然后你会看到任务列表和表格都变得更美观了。
小提示： 如果想显示文件的目录，可以在预览界面按Esc键。
4.2.2 超级Markdown插件MPE
Markdown Preview Enhanced（以下简称MPE）是一款超级强大的Markdown插件，官方文档这样形容它——让你拥有飘逸的Markdown写作体验。
Typora支持的所有Markdown语法，包括GFM、数学公式、图表、目录等，MPE基本都支持。如果你已经很熟悉Typora的使用，那么使用MPE也会很轻松。除此之外，MPE还支持引用文件和制作幻灯片。
1.插入目录
- 直接在文件中输入
[TOC]然后按回车键，这种方式比较通用，在Typora中也可以正常渲染。 - 调出命令行面板，输入
[TOC]，在联想出来的命令列表中单击[Markdown Preview Enhanced:Create TOC]，保存后可正常渲染目录。
小提示： 在目录生成后，如果文中内容有更改，保存后，目录也会自动更新。
2.引用文件
MPE可以非常方便地引用外部文件，它支持引用 .md、.csv、.jpg、.png、.gif、.html、.pdf 等格式的文件。
- 语法格式
@import "文件名"
或者
a. 引用Markdown文件
@import "README.md"
b. 引用图片
MPE可引用的图片格式包括：.jpg、.gif、.png、.apng、.svg、.bmp。
可以直接引用图片:
@import "Rabbit.jpg"
在引用图片的同时还可以设置图片的大小：
@import "Rabbit.jpg"{width="200px" height="150px" title="Rabbit" alt="This is my Rabbit"}
c. 引用csv文件
被引用的csv文件会被直接解析成表格
3.幻灯片
MPE使用reveal.js来渲染幻灯片，这比直接使用reveal.js来创建幻灯片更加简单便捷。
a. 创建幻灯片
幻灯片通过来分页。
幻灯片会随着光标进行切换，如果你感觉在编辑器中查看不方便，也可以通过浏览器查看。具体方法是在预览界面单击鼠标右键，选择【Open in Browser】，就可以了。
小提示： 不管是在编辑器中，还是在浏览器中，如果想要切换到幻灯片的预览界面，直接按Esc键就可以了。
- 示例演示
# 第一页
# 第二页
b. 切换幻灯片主题
幻灯片默认使用白色主题，如果想切换主题可以这样设置：
---
presentation:
theme: solarized.css
---
- 更多可选的主题
· beige.css
· black.css
· blood.css
· league.css
· moon.css
· night.css
· serif.css
· simle.css
· sky.css
· solarized.css
· white.css
· none.css
· white.css（默认）
小提示： reveal.js提供的配置选项都可以在MPE中非常方便地进行配置，想了解更多配置选项可参考官方文档。
4. 导出文件
a. 导出HTML文件
在MPE中，把Markdown格式的文件导出为HTML文件非常简单，只需在预览界面上，单击鼠标右键，选择【HTML】→【HTML(offline)】即可，HTML文件会被导出到与当前Markdown文件同级的目录中。
可是在默认情况下，当Markdown文件有改动时，HTML文件并不会同步更新，如果想做到这一点，需要在Markdown文件头部加上如下代码
---
export_on_save:
html: true
---
b. 导出PDF文件——（Puppeteer）
通过工具（Puppeteer）导出PDF文件，需要先安装Puppeteer，在命令行执行如下命令。
npm insatll -g puppeteer
安装完成后，只需在预览界面上单击鼠标右键，选择【Chrome (Puppeteer)】→【PDF】即可，PDF文件会被导出到当前目录中，而且会被自动打开。
小提示： 导出PNG和JPEG格式的图片也是使用Puppeteer，步骤同上。
c. 导出PDF文件——（Prince）
使用Prince导出的PDF文件会自动生成目录，也支持自动导出功能。
如果你使用的是macOS系统，则安装命令如下。
brew install Caskroom/cask/prince
其他操作系统的安装方法请参考https://www.princexml.com/doc-install/。
安装完成后，只需在预览界面上，单击鼠标右键，选择【PDF(prince)】即可，PDF文件会被导出到当前目录中，而且会被自动打开。
如果我们想在修改Markdown文件之后，自动导出最新的PDF文件，只需在Markdown文件头部加上如下代码。
---
export_on_save:
prince: true
---
4.3 高效编辑
4.3.1 命令面板
VS Code有一个命令面板，提供了几乎所有功能的快速访问路径，在命令面板中我们可以进行快速打开文件、运行命令、管理和安装扩展、运行任务、打开视图、行跳转、符号跳转等操作。
使用快捷键Command+P（macOS）或Ctrl+P（Windows）打开命令面板。
注意： 输入框中没有任何符号的，因此默认会列出最近打开过的文件，我们可以在这里快速打开之前打开过的文件。
在命令面板的输入框中输入 [?]可以查看命令面板的操作帮助。
小提示： 在输入框中输入不同的符号，能够切换到不同的操作面板，达到快速操作的目的。
1. 实例演示——运行命令
在输入框中输入[ > ]，会切换到运行命令界面，输入命令关键字会列出所有可运行的命令，单击即可运行。
运行命令应该是我们最常用的操作了，因此VS Code提供了快捷键以快速进入命令操作界面。
| macOS系统 | Windows系统 |
|---|---|
| Command + Shift + A | Ctrl + Shift + A |
2. 行跳转
在命令面板的输入框中输入[ : + 行号 ]，并按回车键会行跳转到指定的行，被指定的行会高亮显示。
4.3.2 折叠内容
通常，编辑器都有一个非常好用的功能，那就是可以折叠内容结构，这使内容结构更清晰，也更容易阅读。令人惊喜的是，VS Code竟然支持Markdown源码的折叠，当遇到代码块、嵌套列表（有序列表/无序列表/任务列表）时，在编辑器中就会显示折叠图标，单击该图标即可把内容折叠。最棒的是VS Code还支持标题的折叠。
4.3.3 自动保存
VS Code提供了自动保存的功能，它有3种保存策略可供选择。
- afterDelay：当文件修改超过一定的时间（默认是1000ms）时自动保存。
- onFocusChange：当编辑器失去焦点时自动保存更新后的文件。
- onWindowChange：当窗口失去焦点时自动保存更新后的文件。
VS Code默认使用的是第1种策略，执行：菜单栏→【文件】→【自动保存】，开启自动保存，此后，当文件修改超过1000ms时就会自动保存。
如果想修改延迟时间，可以单击活动栏下面的【管理】图标→【设置】→在搜索设置输入框中输入[ 自动保存 ]，
4.3.4 智能感知
前面提到过VS Code的智能感知功能，这绝对又是一个神技。通过智能感知可以进行自动补全，可以快速插入Markdown语法和自定义的代码片段。
| macOS系统 | Windows系统 |
|---|---|
| Control + 空格键 | Ctrl + 空格键 |
注意： 在Windows系统下快捷键“Ctrl+空格键”可能会跟输入法的快捷键相冲突，可通过修改快捷键解决。
操作步骤：【管理】→【键盘快捷方式】→在搜索框输入[Trigger Suggest]（触发建议）→修改快捷键。
VS Code能够分析当前文件中已使用过的词语，在智能感知界面给出自动补全的提示。
注意： 如果想使用更多快捷键和自动补全的功能，需要安装一个扩展插件——Markdown All in One。
4.3.5 Markdown All in One
Markdown All in One（以下简称MAO）提供了常用的Markdown快捷键和自动补全功能。
| 操作 | macOS系统 | Windows系统 |
|---|---|---|
| 加粗 | Command + B | Ctrl + B |
| 斜体 | Command + I | Ctrl + I |
| 删除线 | Option + S | Alt + S |
| 提升标题级别 | Control + Shift + ] | Ctrl + Shift + ] |
| 降低标题级别 | Control + Shift + [ | Ctrl + Shift + [ |
| 插入数学公式 | Control + M | Ctrl + M |
| 勾选/不勾选任务项 | Option + C | Alt + C |
1. 格式化表格
表格的标记语法是有规范要求的，手动调整可能有点麻烦，而使用MAO则可以一键格式化表格。
注意： 快捷键可能会因你绑定的键盘而有所不同，默认是Alt+Shift+F（Windows系统）。
2. 图片路径自动联想
当输入图片的 Markdown标记时，MAO会自动联想指定路径（默认是文件所在的路径）下的图片，而且在联想出来的图片列表中可以直接预览图片。
4.3.6 自定义代码片段
在VS Code中，可以自定义常用的代码片段，通过触发智能感知，实现一键插入。方法是打开自定义Markdown代码片段的文件，执行：【管理】→【用户代码片段】→在弹出的面板中选择【markdown.json】，然后，就可以在markdown.json中定义自己的代码片段了。保存后，在Markdown编辑界面通过使用“Ctrl+空格键”组合键调出智能提示。
4.3.7 语法检查
markdownlint就是用来检查这些规范的。安装markdownlint以后，它会自动对Markdown文件进行检查，并在VS Code底部面板中列出检查出来的问题。问题标签上会显示检查出来的问题数量，列表中的问题会根据编辑器中已打开的文件名进行分类，单击具体问题会跳转到编辑器中对应的位置，在位置的上面会显示一个小灯泡图标，单击小灯泡会显示解决问题的提示。
4.3.8 从剪切板直接粘贴图片
在Markdown文件中插入图片一直不太方便，通常需要经历“截图”→“保存”→“导入”这几个步骤，使用Paste Image这个插件能够直接从剪切板粘贴图片到Markdown文件中，也就是说，插入图片只需两步就可以了，即“截图”→“粘贴”。
- 调出命令行面板，输入[Paste Image]，按回车键后，截图就被插入到文件中了
- 使用快捷键：Ctrl+Alt+V（Windows系统）/Command+Option+V（macOS系统）
粘贴的图片会被保存到当前编辑的文件所在的文件夹中，格式为PNG，并以当前时间命名。
小提示： 如果快捷键有冲突，我们可以自定义快捷键。操作步骤：【管理】→【键盘快捷方式】→输入[Past Image]→双击快捷键→输入新的快捷键组合→按回车键保存。
4.3.9 打字时的炫酷爆炸效果
使用Power Mode插件能在打字时显示炫酷的爆炸效果，这也是一款非常流行的插件。
需要注意的是，Power Mode在安装后并不会直接开启，需要设置一下。开启Power Mode的方法：【管理】→【设置】→输入[Powermode]→勾选【Enable to active POWER MODE!!!】
4.3.10 拼写检查
Code Spell Checker插件能够帮助我们检查常见的拼写错误，也是必备的插件之一。
4.3.11 禅模式
禅是一种基于“静”的行为，是一种让我们专注于写作的模式。打开VS Code→【菜单栏】→【查看】→【外观】→【切换禅模式】
4.3.12 版本管理
VS Code内置了Git版本管理系统，但功能比较简单，在此推荐3个功能增强插件。
- GitLens：增强了VS Code内置的Git功能。
- Git History：增强了Git提交历史的功能。
- gitignore：可以帮助我们使用.gitignore文件。
由于Git相关的知识点较多，且比较专业，如果想深入了解，还是建议读者系统学习一下，了解Git相关的知识以后，关于这几个插件的使用也就不成问题了。
4.4 本章小结
主要介绍了如何使用VS Code打造一款属于自己的Markdown编辑器，你可以选择自己喜欢的主题，绑定自己熟悉的快捷键，定义自己常用的代码片段，最重要的是学会了选择合适的插件来扩展和增强编辑器的功能。
不过，需要注意的是，一些插件的语法（如MPE引用文件和创建幻灯片）可能不通用，这会导致文档移植起来比较困难。所以如果你的文章需要适应多种不同的平台，建议使用更通用的GFM语法。