在昨天，简单写了一下Markdown，并学习了CSDN的Markdown扩展语法，让我们离用Markdown写博客的目标更近了一步。今天开始打造Markdown编辑工具，以帮助我们更好的写博客。这篇全程指导将会分几篇陆续推出，通过VS Code编辑器的安装和设置技巧、VS Code的Markdown相关插件的使用，通过九牛云+图床神器PicGo插件给博客设置图床，VS Code写Markdown的最佳实践总结、在CSDN写博客的一些经验技巧及 Git版本控制等功能和技巧等几个部分，详细指导和讲解利用VS Code + 插件，打造宇宙最强 Markdown编辑器的全过程。

用VSCode打造宇宙最强Markdown编辑器【VSCode篇】

一、初识宇宙最强VSCode编辑器
二、 VSCode到底强在哪儿
三、VSCode的安装设置概述
四、安装完成后的简单配置
五、VSCode的常用快捷键及特殊按法

Windows 平台上好用的 Markdown 编辑器相对还是比较少的。如果需要免费的，那选择范围就更加小。但是写博客，要跟得上时代脚步，而且技术博客这件事本来就有装X的因素，虽然只是用简单的Markdown编辑，但是姿势一定很重要。因此，用号称宇宙最强的VS Code编辑器以Markdown语法写技术博客，通过合理设置，将VS Code 通过几个简单环节DIY打造成 Markdown 的编辑神器，搭建一个神级的博客写作平台，成为有追求的技术宅的不二选择。例如本篇文章，作者就是在这个宇宙最强VS Code平台上使用markdown完成的写作。作为博主，掏心掏肺给你说，这款VS Code的Markdown编辑神器，你值得拥有！

好了，首先让我main先来认识一下大名鼎鼎的VS Code到底是个什么东东。

一、初识宇宙最强VSCode编辑器

VS Code全称Visual Studio Code，是微软公司旗下产品。2015年，微软开源了 Visual Studio Code 这一轻量级的但是功能强大的代码编辑器，赋予它免费、开源、跨平台的新定位，并在2015 年 4 月 29 日的 Build 大会上，发布了 Visual Studio Code 第一个预览版本。这样算来，与众多历史悠久的各大编辑器相比，从诞生到现在，VS Code只用了短短5年的时间，就在代码编辑器这个领域异军突起、高速成长。尤其在近两三年，VS Code的市场占有率急速飙升，将其他的同类编辑器产品远远的抛在了身后。

在Stack Overflow的2018年开发者调查中，VS Code已经成为最受欢迎的开发工具。
2019 年 2 月，在 PYPL Top IDE index 的排名中，VS Code 的涨势迅猛，在所有编辑器与 IDE（集成开发环境）的评比中排名第六，领先于其他所有主流的代码编辑器：例如大名鼎鼎的Sublime、Atom 和 Vim 等等。可以说是已经在代码编辑器中拔得了头筹。
在 Stack Overflow 的 2019 年开发者调查中，VS Code 再次的成为了最受欢迎的开发工具，并遥遥领先其他的开发工具，估计在之后的几年里，它将稳稳的坐在这个王座上，笑看风云。

程序员之间对VS Code仅仅是一个编辑器还是一个IDE集成开发环境虽然一直有争论，微软对VS Code的定义却一直是： “Visual Studio Code is a lightweight but powerful source code editor”。但是，随着VS Code的越来越流行，基于VS Code的开源、跨平台特性、以及强大的API支持，使得VS Code的功能全面、适用性广，VS Code的社区非常活跃，通过VS Code产品自然而然的形成了一个生机勃勃的平台生态，同时开发出了超过一万的VS Code Extensions。基于这个生态，程序员可以用VS Code做任何事情，而不仅仅是用它来写代码了。比如：

编写程序代码，智能提醒和校验
用内置的Terminal终端快速的运行命令行
通过下载Debug插件，设置断点，轻松调试程序代码
使用内置Git功能管理程序源代码，进行版本控制
其他诸如看小说、读新闻、听歌。。。

在这个生态的支撑下，不论你想让它实现哪种功用、支持哪种语言，都可以找到相应的插件、或者插件合集，轻松的下载安装，愉快的用VSCode展开新的旅途。而且，几乎整个的开发过程都可以在VS Code这一个工具中完成。有了最多的用户群、无数的免费扩展插件、以及良好的用户体验，VS Code真正做到了重新定义代码编辑器，它也同时被被喜爱它的人们认为是宇宙最强的代码编辑器产品。

二、 VSCode到底强在哪儿

作为一款代码编辑神器，它具有很多优点，从而避免了其他编辑器产品的缺陷，举例说：

1. 开源且免费

开源对于一个产品的长期发展极为重要。与闭源的Sublime 、开源的Vim 和 Atom 相比， VS Code 可以说是开源做的最好的。
VS Code 不仅仅是把代码开源出来。而是把整个产品的开发过程建立于开源之上，与整个社区深入合作，倾听用户在 GitHub 上的反馈，使 VS Code 越做越好：
每一年，VS Code 团队都会在 GitHub Wiki 发布 Roadmap ，列出一整年的规划图。
每个月初，在产品设计阶段，VS Code 团队会在 GitHub Issue 上会发布 Iteration Plan ，列出这个月会做的每一个功能，每一个功能基本会对应一个 GitHub Issue，你可以看到详细的设计以及 mockup，并且可以提出你自己的见解。
每个月末，临近产品发布，你可以在 GitHub 看到 Endgame 了解到 VS Code 是如何进行产品测试与发布的。
不仅代码开源，VS Code 整个产品的计划，设计以及发布管理都是“开源”的：每一个阶段对每一个用户是公开透明的，你不仅可以开 Issue，发PR，你甚至也可以参与到每个功能的设计与讨论中去。

2. 性能好内存占用低

天下武功唯快不破。在转投到 VS Code 的童鞋中，很多就是因为对 VS Code 的性能情有独钟的。作为一个集成了各种功能的代码编辑神器，其在使用中表现的高性能、低占用和流畅的用户体验，让大家都赞不绝口。通过良好的性能表现，碾压多款同类产品，获得了广泛的认可。

同为基于 Electron 开发的产品，VS Code 在性能的优化上要比 Atom 领先许多;
从插件进程与主进程的隔离、插件的延迟加载，再到 Text Buffer 的优化，提升大文件的加载与编辑速度，减少内存使用率
VS Code 仍然不断在进行优化和提升，让大家不断看到它在性能方面的进步。

3. 使用简单，开箱即用，用户体验好

VS Code 提供开箱即用的良好用户体验。与 Vim、Sublime 和 Atom 等流行的编辑器一样，VS Code 都提供了非常好的代码编辑体验。此外，VS Code 在保持其轻量级代码编辑器的前提下，还不断丰富IDE中才会有的重要功能，比如：

Terminal：内置的 Terminal 使得开发者可以直接在 VS Code 中快速地运行脚本，而不需要在 VS Code 和系统的 Terminal 之间来回切换。
调试器：直接在 VS Code 中调试代码，断点、call stacks、交互式的 debug console，使得调试变得异常轻松。
版本控制：开箱即用的 Git 支持，让你方便地进行文件更改比较，管理你的源代码。特别是对于前端开发者来说，VS Code 有着非常好的支持。
前端功能支持：除了JavaScript 的智能提示、重构、调试等功能支持外，像 HTML, CSS, SCSS, Less 和 JSON 这些前端技术栈，都有着很棒的支持。
而且VS Code 在用户体验方面也一致在不断改进。比如，VS Code 的设置页面就没有图形化的配置界面，但它基于用户的意见反馈，增加了图形化的配置界面，同时也保留了基于 JSON 文件的配置方式，满足了不同人群的使用习惯。

4. 融入开源社区，插件扩展丰富

VS Code很好的融入了开源社区，并能快速响应需求，同时把许多重要组件抽离出来，成为大家都可以复用的开源产品，与社区合作，把产品越做越好。因此，VS Code 已经不仅仅是一个代码编辑器，它还有着丰富且快速增长的插件生态。随着VS Code插件生态的不断发展，如今仅在在 Visual Studio Marketplace中，就已经有了上万个VS Code插件。而且，VS Code 建立了中心化的插件市场，在 VS Code 编辑器里就可以轻松搜索插件，实现一键安装与管理。此外，VS Code 还推出了 Extension Packs，方便开发者一键安装多个插件。比较出色的 Extension Pack 有 Java Extension Pack、PHP Extension Pack、Vue.js Extension Pack 等，使得 VS Code 真正实现秒变 IDE。

三、VSCode的安装设置概述

作为宇宙第一的Visual Studio Code编辑器，可不仅仅能在软件开发专业领域使用，它的功能强大、适用性广，能干各种各样的事情，写Markdown文档更是小菜一碟。不过，为了能够打造用Markdown写博客的最佳环境，首先我们需要把它装起来，然后简单做一下必要的设置，一个超级Markdown编辑器就可以DIY完成了。我们先看看如何安装VS Code。

VS Code的安装非常简单，各步骤操作如下：

下载VS Code并安装
- 首先登陆 Visual Studio Code 的官网 https://code.visualstudio.com ，如下图：
- 然后根据自己的操作系统类型，选择适合的版本下载 VS Code 安装包

点击安装包，直接运行安装即可。

安装中文语言插件

Visual Studio Code 下载安装后，界面是英文的，不能直接切换成中文包，但我们可以使用中文插件，来提高 Visual Studio Code 的使用体验，

VS Code有一个丰富的 VS Code 开源免费插件生态，在软件内部通过简单的插件查找即可在上万个VS Code插件中轻松查找选择，当我们找到一个合适的VS Code插件后，安装也非常简单。通常情况下，我们只要在搜索栏里填入相关信息，搜索插件的名称，当找到需要的插件后，直接点击插件右下角的“安装”即可安装完成。以安装中文语言插件为例，操作方法如下：

VS Code安装插件时，按快捷键Ctrl + Shift + X ，也可以点击左侧工具栏“扩展（Extensions）”按钮，调出插件面板
在查找文字输入框中，输入“chinese”快速过滤并定位到“Chinese(Simplified) Language Pack for Visual Stidio Code”这个插件

点击右下角的“安装(install)”，安装Chinese(Simplified) Language Pack for Visual Stidio Code 中文汉化插件

按快捷键Ctrl + Shift + P 调出命令面板，输入Configure Display Language，选择zh-ch，然后重启vs code即可。

四、安装完成后的简单配置

VS Code提供开箱即用的用户体验，且原生支持Markdown（具体来说是只有比较基本的Markdown语法标记可以识别）, 因此安装完成后，不用配置即可直接用VS Code作为Markdown编辑器正常进行编辑了。当然，你只要是肯花一点时间进行简单的设置，并安装一个专门的Markdown插件扩展Markdown的编辑功能，就会获得更好的体验。一般主要是选择一个浅色主题，更换一个中文字体和选择一个Markdown预览的CSS就可以了。

更换浅色背景主题

默认的深色背景适合写代码，不适合写大篇幅的中文文本，所以安装了一个浅色背景的主题非常重要。关于主题的样式，因为我比较喜欢把背景设置为灰色，选择了“Github Light Theme”这个主题中的灰色系，更换主题很简单，主要是安装插件。

VS Code安装插件时，按快捷键Ctrl + Shift + X ，也可以点击左侧工具栏“扩展（Extensions）”按钮，调出插件面板
在查找文字输入框中，输入“Github Light Theme”快速过滤并定位到“Github Light Theme”这个插件

选择最右边的那个下载按钮，自动下载安装。
插件安装完成后，最后会让你选择用哪个色系，如下图

以上步骤都做完后，重启VS Code，最后我的VS Code看起来变成了下面这个样子，是不是比之前的样子顺眼多了呢。

更多的主题插件，大家可以参考下面这篇博客，或者网上搜一下其它自己喜欢的VS Code主题插件即可。

10个漂亮的VSCode浅色（Light）主题

配置中文默认字体

VS Code的缺省字体是等宽的英文字体，因为编辑器大部分的考虑都是为了方便写代码的和看代码，换成中文编辑后，对大段落中文的显示效果并不是非常好，
如果你使用的是windows系统，可以换成“微软雅黑”字体，就会显的舒服很多。具体方法：

选择右下角的“设置(settings)”打开设置面板
搜索“Editor: Font Family”，如下图，其中第二个就是中文字体

将设置由“Consolas, ‘Courier New’, monospace”改为“Consolas, ‘微软雅黑’, monospace”，即可把中文字体从宋体改成了“微软雅黑”，中文字体对比之前会好很多，尤其是斜体等情况时，感觉顺眼多了。
当然，你也可以修改一下字体的大小，把“editor.fontSize”的取值，在15-18之间试一下，看哪一个看起来更舒服。

如果你的操作系统没有你喜欢的字体，也可以先在网上下载字体文件，再设置。

其它常用的设置优化（手工settings.json）

我们还可以根据自己的使用习惯，修改VS Code的一些基础设置。让我们的编辑器更好用，这里就不一一演示了。

对于这些设置，更迅速的当然是直接在settings.json中手动进行修改，这里仅根据使用习惯举例一二，如下。

关闭标签介绍信息

我们在编写代码的时候鼠标移动到某个标签上，经常会自动弹出一些介绍信息，挡住部分代码，给我们的阅读带来了很大的困难，一直没有找到关闭它的方法，目前可以通过设置时间延迟暂时实现这个效果，如果设置成5000毫秒，甚至可以设置的更大一些，基本上它就不会弹出来了。

     "editor.hover.delay": 5000

自动保存

目前有四个选项，缺省选项通常是关闭的，只要根据自己的习惯，把“off”替换成其他你习惯的选项即可，如下：
- off：关闭自动保存。
- afterDelay：当文件修改后的时间超过"Files：Auto Save Delay"中配置的值时自动进行保存。
- onFocusChange：编辑器失去焦点时自动保存更新后的文件。
- onWindowChange：窗口失去焦点时自动保存更新后的文件。

     "files.autoSave": "off"

五、VSCode的常用快捷键及特殊按法

VS Code的常用快捷键如下,熟练运用，提高效率：

1. 编辑器与窗口管理
Ctrl + Shift + P: 打开命令面板。
Ctrl + Shift + N: 新建窗口。
Ctrl + Shift + W: 关闭窗口。
切分窗口：Ctrl + 1 / Ctrl + 2 / Ctrl + 3
Ctrl + H：最小化窗口
Ctrl + B：显示/隐藏侧边栏
Ctrl + +：放大界面
Ctrl + -：缩小界面

2. 文件操作
Ctrl + N：新建文件
Ctrl + W：关闭文件
Ctrl + Tab：文件切换

3. 格式调整
Ctrl +C / Ctrl + V：复制或剪切当前行/当前选中内容
Alt + Up / Down：向上/下移动一行
Shift + Alt + Up / Down：向上/下复制一行
Ctrl+Delete：删除当前行
Shift + Alt + Left / Right：从光标开始向左/右选择内容

4. 代码编辑
Ctrl + D：选中下一个相同内容
Ctrl + Shift + L：选中所有相同内容
Ctrl + F：查找内容
Ctrl + Shift + F：在整个文件夹中查找内容

大家在读取资料时，可能会发现除了 ctrl + shift + p这类常规的快捷键之外，VS Code还有几类快捷键的按法设置会比较奇怪。

通常的快捷键按法，比如 ctrl + shift + p：一起按下 ctrl ，shift 和 p 键，调出命令帮助菜单
第一种，ctrl + k z：这种快捷键首先需要按下 ctrl 和 k，然后松开按下 z，可以切换禅模式
第二种，ctrl + k ctrl + o：这种快捷键需要按下 ctrl 和 k，然后 ctrl 不放，松开 k 并按下 o，可以打开文件夹

虽然按VS Code这样设计，可以使快捷键更加丰富，但是对于新手来说无疑是增加了快捷键的上手难度，我们可以根据自己的习惯，通过 ctrl + k ctrl + s 可以自定义快捷键，修改快捷键的设置。

今天先到这里，下一篇，讲一下VB Code的Markdown插件和使用技巧。