vscode配置mark写作环境:图床 + typora

942 阅读3分钟

王志远,微医前端技术部

前言

试过 typora,忍受着全文搜索不准确、无法快速打开文件、未集成版本控制等问题,直到它收费;于是开始探寻 vscode 中写 markdown 的实践。

改用 vscode 好处如下

  1. 全文搜索不准确
  2. 无法快速打开文件
  3. 未集成版本控制
  4. 统一快捷键
  5. 采用 github 作为图床,避免出现图床出错导致图片全裂的情况 最终效果如下

vscode 扩展需求如下

  1. 图床:这是最最关键的东西,习惯了粘贴自动上传图片并生成线上地址的功能,再也回不去手动或者本地图片裂图的时代了
  2. 样式效果:习惯了 typora 的即写即览,在 vscode 中暂时没有发现更好的方案,目前用的预览工具是【Markdown Preview Enhanced】;也可以使用【weiyi-tools】中的【openInType】功能,在对应 md 文档右键即可触发在 typora 中打开当前文件 那就让我们一步步实现叭!

实现图床功能:picgo + github

GitHub 仓库设置

流程:新建 public 仓库 -> 创建 token -> 复制 token 备用

1. 新建仓库

点击 git 主页右上角的 + 创建 New repository;

填写仓库信息,例如我就创建了一个 cloudimg 的仓库。这里注意,仓库得设置为 Public 因为后面通过客户端访问算是外部访问,因此无法访问 Private ,这样的话图片传上来之后只能存储不能显示。所以要设置为 Public。

img

2. 创建 token 并复制保存

此时仓库已经建立,点击右上角头像,然后进入设置;

img

在页面最下找到 Developer settings,点击进入;

img

创建 token;填 description(也是随心填),勾选复选框 repo ,接着到页面底部 Generate token 就完成了;

img

然后复制生成一串字符 token,这个 token 只出现一次,所以要保存一下

img

PicGo 客户端配置

1. 下载&安装

PicGo (目前 2.0.4)是一个开源的图床工具,非常优秀。可以到 git 上下载,但下载速度太慢,所以我放了一个百度云的链接,速度快很多。

git 地址:PicGo

Win 版下载链接:百度云 密码:PicG

2. 配置

先上图

img

  • 仓库名:即你的仓库名
  • 分支名:默认 master
  • Token:就是刚刚复制的那一串字符
  • 存储路径:这个可以填也可以不填,填了的话图片就上传到 git 中 data 这个文件夹

然后关于上传的快捷键设置。默认的是 Mac 按键,推荐改成 Ctrl + alt +c。

img

vs-picgo

最后,继承进 vscode,安装扩展【vs-picgo】,点击设置图标选择扩展设置进入设置项。配置项如下

  • current设置为github后,填写branch分支(默认为 master)
  • 自定义 URLcustomUrl填写后可生成图片 markdown 代码
  • path为仓库下图片存储路径
  • repo为仓库
  • tokenGitHub生成,点击Generate new toke勾选 repo 确认生成后留存备用。

使用方式

  1. 从剪贴板上传快捷键方式,Windows/Unix 为Ctrl + Alt + U,OsX 为Cmd + Opt + U
  2. 从资源管理器选择上传快捷键方式,Windows/Unix 为Ctrl + Alt + E,OsX 为Cmd + Opt + E
  3. 输入本地资源地址上传快捷键方式,Windows/Unix 为Ctrl + Alt + O,OsX 为Cmd + Opt + O
  4. 以上三种方式上传时,若选中文本则以选中文本为上传文件名。

尾声

参考链接