适用于 Hugo 博客的 VSCode 扩展

扩展是为 VSCode 编辑器添加额外功能的插件，通过扩展可以优化 Markdown 编辑体验、简化图片上传流程，并为模板调试提供语法支持。

下面基于 Hugo 博客的写作场景，介绍一些写作、调试和使用体验方面的扩展及其关键配置点。

扩展设置

在开始之前，先了解 VSCode 扩展的几个基本操作：

• 安装扩展：点击左侧活动栏的扩展图标（Ctrl+Shift+X），搜索扩展名称，点击 安装。
• 启用 / 禁用 / 卸载：在扩展面板的 “已安装” 列表中，点击扩展下方的齿轮图标，选择对应操作。
• 配置扩展：点击扩展下方的齿轮图标打开设置，用户配置全局生效，工作区配置（位于项目根目录的 .vscode/settings.json）仅对当前项目生效。

写作扩展

写文章时高频使用的扩展，解决 Markdown 编辑、表格操作和图片上传的问题。

• dir tree generator：写教程时展示文件目录结构；右键点击文件夹选择 复制目录树。
• Insert Date & Time：Ctrl+Shift+I 快速插入当前日期时间，支持自定义格式和时区；设置中 Insert Date String: Format 改为 YYYY-MM-DDTHH:mm:ssZ 即可输出 2026-06-30T14:05:09+02:00；Insert Date String: Timezone 改为 Asia/Shanghai 确保输出东八区时间。
• Markdown All in One：Markdown 编写增强；Ctrl+B 加粗、Ctrl+I 斜体。
• Markdown Table：表格快捷键导航，支持行列增删、对齐调整；Tab 移至下一单元格，Shift+Tab 移至上一单元格；在最后一格按 Tab 自动新增行；右键菜单可添加列、设置对齐方式。
• PicList：图片粘贴即上传，配合 PicList 桌面端使用；支持 Ctrl+Alt+U 剪贴板上传、右键菜单上传、直接拖拽上传；设置中 Copy Style 选 custom，可自定义链接格式（Custom Style），如 ![$fileName](../../../assets/images/$fileName)。
• Visual Markdown Table Editor：类 Excel 可视化表格编辑器，增删行列、实时同步；右键菜单 Markdown Table: Create 新建表格、Markdown Table: Edit 编辑已有表格。

调试扩展

处理 Hugo 模板、代码格式化、版本管理和 Python 批处理脚本时用到的扩展。

• Even Better TOML ：hugo.toml 配置文件语法高亮和校验。
• Git Graph：Git 提交历史和分支关系的图形化展示。
• Hugo Language and Syntax Support：Hugo 模板语法（Go Template）高亮。
• Hugo Shortcode Syntax Highlighting：Hugo Shortcode 语法高亮。
• Prettier - Code formatter：多格式代码格式化，支持 Markdown、JSON、YAML、HTML 等；项目目录创建 .prettierignore，可排除无需格式化的文件（如 *.md、*html）。
• Python：脚本编写与运行（如批量修改 Front Matter、图片压缩、文章迁移等），配合 Python 桌面端使用；如需在当前项目关闭自动激活虚拟环境，可在项目目录创建 .vscode/settings.json ，添加 "python.terminal.activateEnvironment": false。

其他扩展

辅助性工具，不直接参与写作或调试，但能提升日常使用体验。