Paste Image - Favourite VS Code Extensions

Last updated August 31, 2021 by Jacob Paris

I discovered this extension through the Foam recommended extensions

You can find Paste Image on VS Code Marketplace

This extension allows you to paste images directly into your code in any format you want.

The image in the clipboard is saved as a .png into my /public/images folder (where Next.js wants it) and inserts a Markdown image tag like this:

![](/images/vscode-paste-image_2021-06-07-01-17-30.png)

I have configured this locally to the workspace (instead of globally) because each project will have different requirements about where to serve images and how to reference them.

json.vscode/settings.json
1{
2 "pasteImage.path": "${projectRoot}/public/images",
3 "pasteImage.basePath": "/images",
4 "pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
5 "pasteImage.insertPattern": "![](/images/${imageFileName})"
6}
7