1.Install

First, you can install a VSCode extension called Markdown All in One, and then there is also Markdown Preview Enhanced.

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

2.Configure image direct paste

2.1.Planning folder and image naming, etc. (old method, recommended for beginners)

图片名字格式为当前图片创建的日期:时间戳.扩展名,例如20251225153422.webp

Create in the project root directory.vscode/settings.json

{
  "markdown.editor.filePaste.enabled": "always",
  "markdown.copyFiles.destination": {
    "**/content/posts/*.md": "/public/images/${documentBaseName}/${unixTime}.${fileExtName}",
    "**/content/pages/*.md": "/public/images/pages/${unixTime}.${fileExtName}"
  },
  "markdown.copyFiles.overwriteBehavior": "nameIncrementally"
}

2.2.Use MD Image Uploader (recommended)

MD Image Uploader 可以在 Markdown 中直接粘贴图片，将图片转换为 WebP 后上传到兼容 S3 的对象存储，并自动插入 CDN 图片链接。

Plugin download URL:

https://marketplace.visualstudio.com/items?itemName=tungchiahui.md-image-uploader

You can also search for tungchiahui.md-image-uploader in the VS Code Extensions panel, then click "Install".

Access keys are sensitive information. Please open VS Code's 首选项：打开用户设置(JSON) and write the following two items into your personal settings. Do not put them in the project's .vscode/settings.json and do not commit them to Git:

// 请放到个人设置，不要放到项目的 .vscode/settings.json
"mdImageUploader.s3.accessKeyId": "xxxxxxxxxxxxxxxxxxxx",
"mdImageUploader.s3.secretAccessKey": "xxxxxxxxxxxxxxxxxxxx"

The following configuration can be placed in the project's .vscode/settings.json. This is a Tencent Cloud COS configuration example; modify it according to your own bucket and CDN address:

{
  // 可以放到 settings.json 的部分，以下是例子
  "mdImageUploader.s3.endpoint": "https://cos.ap-beijing.myqcloud.com",
  "mdImageUploader.s3.region": "ap-beijing",
  "mdImageUploader.s3.bucket": "cdn-tungchiahui-cn-1377333392",
  "mdImageUploader.cdnUrl": "https://cdn.tungchiahui.cn",
  "mdImageUploader.datedUploadPath": "/tungwebsite/assets/images",
  "mdImageUploader.undatedUploadPath": "/tungwebsite/assets/images/undate"
}

After configuration is complete, open a Markdown file, copy a screenshot or local image, then press Ctrl+V to paste. The plugin will sequentially convert the image, calculate the upload path, upload it to the object storage, and insert the final Markdown image link at the current position. You can select MD Image Uploader in the VS Code "Output" panel to view real-time logs.

The upload path uses the following date priority:

1. Prioritize reading the nearest parent directory to the current Markdown that contains a valid YYYY-MM-DD date;
2. When the parent directory has no valid date, read from the Markdown filename the YYYY-MM-DD format date;
3. When neither location has a date, use the local date of the day of pasting and undatedUploadPath.

例如当前文件位于 content/wiki/2025-12-25-MarkDown教程/0200-环境搭建.md，图片会使用目录日期 2025-12-25，上传到 datedUploadPath 对应的年月日目录。

3.Create the first md file

Open VSCode

Create a file with the .md extension

Save the file as TEST.md (note that the extension is .md)

Change the content inside to:

# 我的第一个 Markdown 文档

这是我学习 Markdown 的开始。

## 学习目标

- 掌握基本语法
- 了解应用场景
- 能够独立创作文档

## 今天的感受

学习 Markdown 比我想象的**简单**，我对接下来的学习充满*期待*！

---

> 学习是一个持续的过程，每一小步都是进步。

Click the icon below to preview.

Preview as shown in the figure below: