新增在 Markdown 中直接粘贴图片的功能,无需插件。介绍了功能使用配置,如自定义存放目录、重命名、重名覆盖和功能关闭。对比内置功能与其他插件能力,得出多数情况内置功能够用,特定需求可选 Markdown Paste 插件的结论。关联问题:内置功能有何局限插件安装复杂吗重命名能否优化相信大家在使用 VSCode 处理 Markdown 文档时,可能都遇到了一个共同的问题,就是无法直接添加剪切板图片到Markdown 文档中。我们不得不手动将图片复制到工作区,然后在 Markdown 文档中添加图片引用片段,例如 ![](该图片在工作区的相对地址)。以前,我们可以通过插件如 Markdown Paste 或者 Paste Image 来解决这个问题。但现在,你不再需要了,因为 VSCode 1.79 版本已经内置了这样的功能。本文将重点介绍以下内容:VSCode 新功能介绍功能使用配置能力对比VSCode 新功能介绍VSCode 在 2023.05 发布了 1.79 版本,提供了一项名为 Automatic copy of external files 的新功能,当用户使用拖拽或粘贴将外部媒体文件(比如图片、音视频)放置到 Markdown 文档上时,VSCode 会自动复制一份文件到工作区,并在 Markdown 文档中插入相应的图片引用片段。以下是一个图片拖拽的例子: 当然,剪贴板图片也同样可用,包括系统复制或者工具截图。你可以在 Markdown 文档中执行粘贴操作,VS Code 将从剪贴板数据中创建一个新的图像文件,并插入一个指定新文件的 Markdown 图像链接。图片默认存放目录与粘贴该图片的 Markdown 文件同级,插入的 Markdown 片段如下(假设图片名为 image.png):markdown代码解读复制代码![Alt text](image.png)除了图片,新功能还支持音频和视频,会生成 <audio> 和 <vidoe> 的 Markdown 片段。为了简单起见,本文只讲图片。功能使用配置某些情况下我们可能需要调整该功能的默认行为,包括:自定义存放目录重命名重名覆盖功能关闭为方便后续配置介绍,我们建立一个名为 myProject 的项目,项目的绝对路径假定为 /User/me/myProject。并建立如下的项目结构:css代码解读复制代码--docs ----api ------README.md --assets自定义存放目录由 markdown.copyFiles.destination 配置控制图片文件的存放目录。json代码解读复制代码 "markdown.copyFiles.destination": { "/docs/api/**/*": "${documentWorkspaceFolder}/docs/images/" }该配置是一个对象,key 使用 Glob 语法,表示匹配的 Markdown 文档;value 则表示所匹配的这些 Markdown 文档,它们的图片文件存放目录,可以使用一些简单的变量。${documentFileName} — Markdown 文档的完整文件名,比如 README.md${documentBaseName} — Markdown 文档的基本文件名,比如 README${documentExtName} — Markdown 文档的拓展名,比如 md${documentDirName} — Markdown 文档的上级目录名词,比如示例的 api${documentWorkspaceFolder} — Markdown 文档工作区路径,比如示例的 /Users/me/myProject。如果 Markdown 文档不是工作区的一部分,则该值与 ${documentDirName} 相同${fileName} — 被拖拽或粘贴的图片文件名,比如 image.png常见的图片存放目录有这两种:与当前 Markdown 文档同级并新建目录工作区固定目录统一管理图片1. Markdown 同级目录(假设为 images)VSCode 配置:json代码解读复制代码 "markdown.copyFiles.destination": { "**/*": "images/" }项目结构css代码解读复制代码--docs ----api ------images --------image.png ------README.mdmarkdown 插入内容markdown代码解读复制代码![Alt text](images/image.png)2. 工作区固定目录(假设为 工作区目录/assets)VSCode 配置:json代码解读复制代码 "markdown.copyFiles.destination": { "**/*": "${documentWorkspaceFolder}/assets/" }项目结构css代码解读复制代码--docs ----api ------README.md --assets ----image.pngmarkdown 插入内容markdown代码解读复制代码![Alt text](../../assets/image.png)重命名markdown.copyFiles.destination 配置字段也可以用于图片重命名。当配置以 "/" 结尾时,VSCode 会将其视为目录,并在原始文件名前拼接该路径作为新的文件路径。但如果结尾没有 "/",VSCode 将其视为准确的文件路径。以下面配置为例:json代码解读复制代码 "markdown.copyFiles.destination": { "**/*": "images/custom-${fileName}" }如果原始图片名为 "image.png",生成的图片名将是 "images/custom-image.png"。目前,配置支持类似于 片段语法(snippet syntax) 的正则表达式变量替换语法,但其功能相对有限,缺少了内置变量和转换器。GitHub 上有个 issue 就是关于时间戳重命名的,如果官方解决的话意味着需要支持完整的片段语法。json代码解读复制代码 "markdown.copyFiles.destination": { "/docs/**/*": "images/me.${fileName/(.*)\\.(.*)/$2/}" }如果粘贴的图片是 test.jpg ,那么新的图片路径为 images/me.jpg因此,就目前来说,可以理解为重命名功能受限,无法实现更复杂的编码转换等需求。重名覆盖如果出现重名(通常出现在截图,图片名始终为 image.png),默认不会覆盖,而是修改图片名词后缀并进行自增。比如出现的重名是 image.png,那么新图片名词为 image-1.png如果希望重名覆盖,可以配置 overwriteBehavior 字段json代码解读复制代码"markdown.copyFiles.overwriteBehavior": "overwrite"功能关闭此项功能默认开启,如果觉得干扰,也可以配置 copyIntoWorkspace 字段进行关闭json代码解读复制代码// 拖拽行为 "markdown.editor.drop.copyIntoWorkspace": "never" // 粘贴行为 "markdown.editor.filePaste.copyIntoWorkspace": "never"能力对比将内置能力和 Markdown 图片粘贴插件放一起进行对比,顺便也做下内置能力的总结。基础能力自定义存放目录重命名重名覆盖拓展能力维护性内置✅✅弱,支持简单替换✅ 支持自动增加后缀避免覆盖- 支持 audio 和 video 的粘贴- 支持拖拽新功能Paste Image✅注意粘贴命令用的是 Ctrl+Alt+V / Cmd+Option+V✅✅支持多种方式,自动、手动出现覆盖提示,默认使用时间戳命名基本不会重名-停止维护Markdown Paste✅注意粘贴命令用的是 Ctrl+Alt+V / Cmd+Option+V✅✅ 同上同上- 支持 HTML 内容和富文本转化为 Markdown 片段- 支持 base 图片内联持续维护,Paste Image 的增强版基础能力指的是支持粘贴图片到工作区,并自动生成 Markdown 的语法片段。整体对比下来,Markdown Paste 插件功能最为强大,缺点就是需要额外安装,以及和系统默认不一致的粘贴快捷键。使用建议如果没有重命名的需求,使用内置功能就足够了。但如果你希望自动重命名,例如使用时间戳替换原始文件名,那么你可以使用 Markdown Paste 插件。由于两者的粘贴快捷键不同,实际上你也可以同时使用它们。请考虑在正常项目中是否真的需要进行重命名。不过 VSCode 内置能力也在不断迭代,后续估计是能彻底取代 Markdown Paste总结本文介绍了 VSCode 1.79 新增的图片粘贴功能,现在不再需要依赖插件就能将图片插入 Markdown 文档中。接下来提供了常见的功能使用配置,包括自定义存放目录、重命名、重名覆盖 以及 能力关闭等选项。最后,对比了内置功能和其他插件的能力,并得出结论:Markdown Paste 插件的能力最强,但在大多数情况下,内置功能已经足够使用。