如何将图像粘贴到 VS Code 中的 Markdown 文件中？

Question

如何在 VS Code 中优雅地粘贴剪贴板中的屏幕截图，VS Code 会在当前指定目录时复制此图像并根据时间重命名

内置的markdown插件有一个markdown.experimental.copyFiles.destination设置，但没有文档解释如何配置它，例如使用'粘贴图像'插件没有效果

Answer 1

这在 vscode Stable v1.79 中发生了很大的变化。请参阅发行说明：将媒体文件复制到 markdown。

想要将图像或视频添加到 Markdown 文档中吗？现在，您只需将文件拖放到或粘贴到 Markdown 中即可，而不必浪费时间先手动将文件复制到工作区，然后添加指向它的链接。如果该文件当前不是工作区的一部分，VS Code 会自动将该文件复制到您的工作区并插入指向它的链接：

这对于剪贴板中的图像数据也非常有效。例如，如果您在 Windows 上使用截图工具截取屏幕截图，则可以在 Markdown 文件中按“粘贴”，VS Code 将从剪贴板数据创建一个新的图像文件，并将 Markdown 图像链接插入到新文件中。如果您在截屏时按住 Ctrl 键将其复制到剪贴板，则这也适用于 macOS。

为此，请确保将以下设置设置为mediaFiles，这是默认设置。

Markdown > Editor > File Paste: Copy Into Workspace  // default is mediaFiles, or never
Controls if files outside of the workspace that are pasted into a Markdown editor should be copied into the workspace. Use 'Markdown > Copy Files: Destination' to configure where copied files should be created.

此外，还必须启用这两个设置：

Markdown > Editor > File Paste: Enabled   // default is Enabled
Editor > Paste As: Enabled                // default is Enabled

然后，当您将图像复制到剪贴板并将其粘贴到 Markdown 文件中时，会出现一个如下所示的链接

![Alt text](image.png)   // note that gif files are pasted as a simple png

在 markdown 文件中创建，并在工作区中创建一个名为image.png. 后续粘贴将命名为image-1.png等等。

上面是粘贴，拖放图像文件将在链接和工作区中新创建的文件中保留其原始文件名。

该文件的确切位置由以下设置确定：

请参阅发行说明：复制的文件目标。

例如，如果我们希望/docs工作区中的每个 Markdown 文件都将新媒体文件放入特定于当前文件的图像目录中，我们可以编写：

Markdown > Editor > File Paste: Copy Into Workspace  // default is mediaFiles, or never
Controls if files outside of the workspace that are pasted into a Markdown editor should be copied into the workspace. Use 'Markdown > Copy Files: Destination' to configure where copied files should be created.

现在，当粘贴新文件时/docs/api/readme.md，将在 处创建图像文件/docs/api/images/readme/image.png。

您甚至可以使用简单的正则表达式以类似于片段的方式转换变量。例如，此转换在创建媒体文件时仅使用文档文件名的第一个字母

Markdown > Editor > File Paste: Enabled   // default is Enabled
Editor > Paste As: Enabled                // default is Enabled

当将新文件粘贴到时/docs/api/readme.md，现在将在 下创建图像/docs/api/images/r/image.png。

不幸的是，没有您所要求的时间戳变量。

上面的链接中有更多关于控制此行为的信息，例如使用这些设置：

"markdown.copyFiles.overwriteBehavior"
"markdown.editor.drop.copyIntoWorkspace": "never"
"markdown.editor.filePaste.copyIntoWorkspace": "never"

Answer 2

我花了一些尝试和错误才弄清楚这是如何工作的。设置Item="**/*"并将Value="images/"我粘贴到 Markdown 文件中的文件复制到images/目录中

Answer 3

注意：从 VS Code 1.79 开始，该设置不再是实验性的，并且被称为markdown.copyFiles.destination( source )。

\n

首先，您需要启用editor.experimental.pasteActions.enabled（“启用/禁用粘贴时从扩展运行编辑。 ”）。markdown.experimental.copyFiles.destination然后根据其文档进行配置即可：

\n

\n

定义应在何处创建通过放置或粘贴创建的复制文件。这是从 Markdown 文档上匹配的 glob 到目的地的映射。

\n

目的地可以使用以下变量：

\n

\n
• ${documentFileName}\xe2\x80\x94 Markdown 文档的完整文件名，例如：readme.md。
\n
• ${documentBaseName}\xe2\x80\x94 Markdown 文档的基本名称，例如：readme。
\n
• ${documentExtName}\xe2\x80\x94 Markdown 文档的扩展名，例如：md。
\n
• ${documentDirName}\xe2\x80\x94 Markdown 文档的父目录的名称。
\n
• ${documentWorkspaceFolder}\xe2\x80\x94 Markdown 文档的工作区文件夹，例如：/Users/me/myProject。${documentDirName}这与文件不属于工作区的情况相同。
\n
• ${fileName}\xe2\x80\x94 拖放文件的文件名，例如：image.png。
\n

\n

\n

例如，要将任何粘贴的图像粘贴到与要粘贴到的 markdown 文件相同的目录中，请使用：

\n

"markdown.experimental.copyFiles.destination": {\n    "**/*": "${documentDirName}/"\n}\n

\n