Skip to content

这篇文章,其实很早就想写了,今天一个微信群友问我,干脆把我在 VSCode 中写文章的方法详细说一下。

整体效果

👆 这是整体效果。

写过的文章

👆 这是文章管理。

我的博客

👆 这是文章显示效果。

那么如何在 VSCode 中更加丝滑地写文章呢,这当然需要一些好用的插件来了帮忙啦。

先说好了,我们的文章格式是:markdown

Markdown All in One (快捷操作)

扩展地址

Markdown All in One

首先是 Markdown All in One 这个插件,效果如下:

动图演示

动图演示

动图演示

简而言之,就是让你写 Markdown 如香皂一样丝滑。

Markdown Image (图片管理)

扩展地址

Markdown Image

其次,处理图片,也是写 Markdown 的重中之重。

这个插件有以下功能:

  1. 可复制图片文件或截图粘贴,快捷键 Alt + Shift + V,或右键菜单 粘贴图片
  2. 自动生成 Markdown 代码插入。
  3. 可配置支持 本地Imgur七牛SM.MSCoding 等图床。
  4. 也可以自定义代码实现图片上传。
  5. 支援 Windows,MacOS,Linux。

可以说,把图片问题处理地妥妥当当。

笔者没有用任何图床,通过这个插件把图片自动链接到本地,然后再上传到自己的服务器上面。

fnMap (函数地图)

扩展地址

fnMap(函数地图)

标题目录,也是一个提升写 Markdown 体验的地方,这里呢,推荐笔者自己开发的 fnMap(函数地图)

标题列表

将函数地图拖动到右侧面板,可以一览无余地查看整个文档结构,把控整篇文章脉络。

Prettier (格式化)

扩展地址

Prettier

格式化方面,笔者喜欢用 Prettier

保存时自动格式化

在设置中开启保存时自动格式化。

鼠标右击

鼠标右击,选择 Format Document With

选择Prettier

将 Prettier 作为格式化的默认插件。

这样,就能非常快速且方便地格式化 Markdown 文档了。

zhlint (中文空格)

扩展地址

zhlint

虽然下载量不多,但是确实好用。

数字字母加空格

可以给数字和字母两边,加上空格,也可以给反引号两边加空格。

搜狗输入法

自定义标点

最后呢,就是写 Markdown 经常需要写反引号,可以用搜狗输入法,在输入中文的时候,按反引号键一次就能输入英文的反引号。


这就是笔者在 VSCode 中写 Markdonw 的技巧了,如果你觉得有用,可以给笔者一键三连哦~

何以解忧,唯有代码。不忘初心,方得始终。