一个让Markdown管理变得更简单的vscode插件

最新推荐文章于 2025-02-10 02:06:13 发布

loveyourz1

最新推荐文章于 2025-02-10 02:06:13 发布

阅读量1k

点赞数 15

文章标签： vscode javascript typescript 开发语言 visual studio code

本文链接：https://blog.youkuaiyun.com/loveyourz1/article/details/144334021

版权

1. 开发背景

Markdown 是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式编写文档，使得它非常适合作为文档的草稿或者笔记。在日常使用中，对于Markdown的管理大致分为本地管理和图床管理两种。但这两种方法，在需要迁移文件的场景下，都存在较大局限性。

本地管理：
- 通常在根目录的./images文件夹中管理图片。但当随笔草稿积累之后，./images文件中存放图片过多，难以迁移单个文件及其所属的图片，无法分类随笔，难以实现笔记迁移。
- 当需要将文件发布为博客时，本地图片链接失效。
图床管理：
- 通常设置粘贴单张图片，自动上传图床。虽然使用方便，但容易导致图床平台堆积大量无用资源。
- 虽然暂时避免了本地迁移问题，但移动图床资源后，无法自动更新markdown链接，导致更困难的图床迁移问题，易丢失资源。
- 由于流行的托管平台多变，且存在存储能力限制。当需要迁移图床时，仍需要下载资源到本地,无法避免本地管理。

基于以上需求，实现了一个将管理行为放在本地，完成自动链接，并拓展图床发布服务的工具。该工具自动维护本地markdown和image关系，支持图床的上传与下载，保证所有迁移场景下的资源有效性。

本地迁移：
1、当需要移动指定文件时，支持一键迁移md文件及其附属图片至目标位置。
2、当需要移动指定内容（包含图片URL）时，支持一键复制/剪切/粘贴。
3、当需要删除指定文件时，支持一键丢弃md文件及其附属图片至.recycle文件夹。
4、当需要删除指定内容（包含图片URL）时，支持一键删除内容，并移动附属图片到.recycle/images文件夹。
图床迁移：
1、当需要发布指定文件为博客时，支持一键上传图片到图床，并生成online版副本文件，其中url被替换为图床链接。
2、当需要备份网络资源时，支持一键下载图片到./images文件夹，并自动替换为本地链接。
图片管理：
1、当需要查看图片情况时，无需打开渲染器，支持一键分析当前图片资源。
2、当需要仅移动附属图片到指定文件时，支持一键迁移附属图片至目标位置。
3、当需要转换图片URL格式时，支持一键相对/绝对路径转换。

通过插件市场或vscode内搜索的方式，安装插件即可使用本地管理所有功能。
alt text
如需要使用图床上传，完成图床配置即可使用。

本插件提供菜单和常用快捷键两种使用方式，具体如下：
打开Markdown文件后，在编辑页面右键出现菜单如下： alt text
功能描述如下：

alt text

移动当前文件和图片 --> 另外的目录（自动更新图片链接） : Migrate Markdown File
- 快捷键：Ctrl + Shift + M
复制/剪切当前文件内选中内容（包括图片） --> 另外的目录下的文件内 :
- 复制所选择的内容: Copy With Content
  - 快捷键：Ctrl + Shift + C
- 剪切所选择的内容: Cut With Content
  - 快捷键：Ctrl + Shift + X
- 粘贴之前选择的内容: Paste With Content
  - 快捷键：Ctrl + Shift + V