在vscode里直接粘贴图片——pasteimage

本文最后更新于 1 年前，文中所描述的信息可能已发生改变。

前言 #

使用vscode写博客，要想便捷快速地在文章中插入图片，比较常见的一个做法是通过picgo+图床实现快捷键上传图片，并生成markdown格式的链接。图床常常是利用jsdelivr加速github仓库的方式搭建。 我原本也一直是这样做的，但自从jsdelivr在国内不可用之后，（再者，jsdelivr的使用规范也不允许作为图床使用）我换用了另一种方案，即本文所写，通过vs的pasteimage插件直接把图片粘贴在文章内，并保存在博客目录内。

效果展示 #

为了突出这个插件的好用，特把效果展示提到使用教程前。

首先，截张图，或者复制一张图片

然后在vscode内，使用快捷键ctrl+alt+v（可自定义）粘贴这张图片

这样就完成了，粘贴到文章内的图片会保存在你设置的目录下，粘贴图片实际上是粘贴的图片路径。图片文件以{文章标题_时间}的格式命名，十分有条理。

vscode内的实际效果↓↓↓

图片文件名↓↓↓

使用 #

先设情景 #

你使用vscode写博客，你的博客由hexo驱动，你的博客的根目录文件夹名是hexo-blog-raw，你想把粘贴的图片以文章标题_时间.png的格式命名，并保存在hexo-blog-raw/source/photo目录下

教程 #

首先，在vscode的扩展商店中，搜索 paste image并安装

然后，在博客根目录下，新建.vscode文件夹，用于存放vscode的工作区配置（即局部设置）

在.vscode文件夹内，新建settings.json文件，并写入以下内容并保存。（是的，配置我都帮你写好了）

{
    "pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
    "pasteImage.path": "${projectRoot}/source/photo",
    "pasteImage.basePath": "${projectRoot}/source",
    "pasteImage.forceUnixStyleSeparator": true,
    "pasteImage.prefix": "../"
}

{
    "pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
    "pasteImage.path": "${projectRoot}/source/photo",
    "pasteImage.basePath": "${projectRoot}/source",
    "pasteImage.forceUnixStyleSeparator": true,
    "pasteImage.prefix": "../"
}

这样就完成了。 按照如上配置后，所有配置是只在hexo-blog-raw工作区生效的，即只有在用vscode写博客文章时，以上配置才生效。

使用时，用vscode打开博客文章，用快捷键ctrl+alt+v即可插入图片到文章内。

更多的自定义配置，可参考pasteimage官方文档