美貌与强大并存——VScode，我的markdown码字利器(内附插件推荐)


VScode除了打代码很优秀，作为一个markdown编辑器/写文工具也很棒！
纯文本写作可以使人沉浸在写作的氛围中，不被格式排版的调整打断思绪。
市面上有许多为markdown打造的文本编辑器，我也用过typora，它的所见即所得与简洁漂亮我也很喜欢，那么，为什么我最终还是选择了VScode？
VScode的下载与安装我就不说啦，相信网上有许多比我写的好的。可以看看这个教程了解更多设置与快捷键。

VSCode 入门|极客教程

下面我来介绍下VScode对码字有用的一些自带功能与插件吧。VScode有丰富的快捷键设置，下文中的许多功能你可以在设置中自由调整。插件在插件商店中有详细介绍。本文仅是简单地提及其作用。

VScode自带功能

大纲和面包屑导航

  • 可以告诉你目前所在层级，当作目录看很方便。
  • 面包屑导航可以跳转到文档中的某一层级。

Untitled 1.png

Untitled 2.png

拆分窗口

  • 自由查看、对比参考资料。
  • 不仅可以左右拆分，还可以上下拆分。
  • 下载插件，不仅可以看pdf\word\excel等各类文件，还可以听歌、看番、刷微博。

Untitled 3.png

Untitled 4.png

禅模式

  • 专心写作。（可以在设置里修改需不需要显示行数）

Untitled 5.png

Untitled 6.png

自动保存

  • 写文最怕丢了，一不小心就会忘记ctrl+s。
  • 可以在文件中打开自动保存，首选项→设置中设置自动保存的时间。

    Untitled 7.png

Untitled 8.png

小地图

  • 自由定位。

    Untitled 9.png

Git版本管理

  • 文件版本管理。

    Untitled 10.png

    不清楚git的可以看看廖老师的教程。

    Git教程

文档跳转、查找与替换

  • ctrl+p显示最近使用过的文档，实行文件外跳转。
  • 点击左侧的放大镜进行多文档查找。
    Untitled 11.png
  • 点击文档顶部面包屑导航，实现文档内跳转。
    Untitled 2.png
  • 按ctrl+p/ctrl+f进行文档内搜索。

Untitled 12.png

Untitled 13.png

Untitled 14.png

文件对比

Untitled 15.png

Untitled 16.png

Untitled 17.png

个性化编辑器风格

调整全局字体、行高

Untitled 18.png

各种日夜主题与文件图标

Untitled 19.png

Untitled 21.png

Untitled 20.png

  • 主题安利

    Untitled 22.png
    OneDarkPro 经典深色主题

    Untitled 23.png

    Panda Theme 科技感深色主题

    Untitled 24.png

    Pink-Cat-Boo Theme 少女风深色主题

    Untitled 25.png

    Markdown Theme Kit 其中的一个Focus主题

    Untitled 27.png

    Jeng Theme Light

    Untitled 28.png

    Horizon Theme 一套少女风主题

固定UI切换

VSCode 固定 UI 视图|极客教程

Untitled 29.png

光标样式设置

VSCode 光标样式|极客教程

聚焦/专注模式

VSCode 修改编辑器配色|极客教程

VScode本身并没有像Typora的聚焦模式，但可以通过VScode灵活的设置达成这个目的。

  1. 设置中搜索。
    Untitled 30.png
  2. 选择需要聚焦模式的主题。

    Untitled 31.png

  3. 输入这一串英文，悬浮在数字上即可看到取色盘，选择比主题底色深的颜色。

    Untitled 32.png

  4. 优化
    VScode行号是没有高亮的，也许会有些突兀，可以在设置中修改。
    Untitled 33.png

  5. 最终效果
    Untitled 34.png
    注：

    • 设置之后，VScode自带的md预览无法显示文字，可以用插件的预览实现。
    • 不需要时，选中这段代码，ctrl+/注释掉。
    • 嫌麻烦的可以搜索Markdown Theme Kit主题。

Markdown预览

VSCode 支持Markdown|极客教程

  • 点击右上角的预览放大镜，就可以调出预览窗口。
    Untitled 35.png
  • 有时候你希望右边的预览窗显示的不是当前文件，想要用这个预览文件和其他文件进行参考。可以执行Markdown: 在侧边打开锁定的预览 （Markdown: Open Locked Preview to the Side）命令。

    Untitled 36.png

  • 可以根据层级进行折叠

    你可以按照章节折叠不需要显示的信息

    Untitled 37.png

插件

字数统计

  • Word Count CJK

    一个中国人制作的插件，可以计算当前文档的字数。

    可以在配置中自己根据需要调整。
    Untitled 38.png

日夜主题切换

  • Auto Day Night Theme Switcher

    有时候码着码着不知不觉就到晚上了，大晚上的开着大白屏很刺眼，手动调主题也很烦。

    这个插件可以根据配置的时间切换主题，而且可以选择自己喜欢的主题！

    Untitled 39.png

历史版本

  • Local History

    这个插件可以保存历史版本，点击历史文件可以进行版本对比。
    Untitled 40.png

Markdown

  • Markdown Preview Enhanced

    满足大部分markdown需求。

Untitled 41.png

Untitled 42.png

Untitled 43.png

  • MarkdownFormat

    Markdown格式化，下载插件后写完文档右键便有格式化选项。
    Untitled 44.png

  • markdownlint

    Markdown语法格式提示

统计码字时长

  • Codetime

    3、4两张需要科学上网才能看

Untitled 45.png

Untitled 46.png

Untitled 47.png

Untitled 48.png

  • 缺点是没有文件分类的分析图，但如果仅仅是码字，用这个就够了。

  • Wakatime

    • 按文件类型分类统计时长。
    • 需要打开外部网站查看。

Untitled 49.png

ToDo

  • Todo Tree

    • 有时候码字到一半突然想码下一段，或者重读发现有需要捉虫的地方，可以打个// TODO，点击左侧的树型图案便可以显示出打着TODO的段落。
    • 就相当于一个tag，通过命令【F1】，输入add tag，可以新建一个tag，比如捉虫，在需要捉虫的段落打// 捉虫 就可以了。
    • 点击左边代表TodoTree的树形图标，可以清晰地看见自己在哪里做了标记。

Untitled 50.png

其他插件

可以自己搜搜看，我认为对码字来说并不是硬性要求就不多介绍。

  • 番茄钟[各种各样]
  • Todoist
  • Focus

    执行命令可隐藏选中的文本(更改文字颜色)，可以设置成任意颜色。

  • evermonky

    可以在 VSCode 中使用 Markdown 编辑，创建，更新印象笔记。

  • Sycning

    同步VScode设置与扩展。

  • Markdown Checkbox(时间戳)
  • kanban

    Untitled 51.png

  • PicGo 图床

  • 思维导图

    • TinyMind for Markdown

      根据Markdown内容生成思维导图，类似幕布。

    • Vscode Blink Mind

      思维导图、流程图编写。

    • vscode-mindmap

      思维导图编写。

  • 不过最后，我还是要另提一句，VScode或许不能满足你手机端与电脑端实时同步的需求，毕竟没有移动端（虽然最近有消息说正在搞浏览器版）。但你可以用云盘同步、git曲线救国。