VSCode 技术写作与博客发布需配置三类扩展、增强 Markdown 预览、集成 Hugo 生成静态站、对接 GitHub Pages 自动部署，并切换 Typora 风格主题提升沉浸感。
如果您使用 VSCode 编写技术文档或博客文章，但缺乏高效的内容组织、格式预览与发布流程，则可能是由于编辑器配置未针对写作场景优化。以下是实现技术写作与博客发布的具体操作路径：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装核心写作扩展
VSCode 本身不内置 Markdown 高级渲染与静态站点集成能力，需通过扩展补足写作工作流所需功能。安装以下三类扩展可构建基础写作环境：
1、在左侧活动栏点击扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中依次输入并安装：Markdown All in One、Paste Image、GitHub Markdown Preview。
3、重启 VSCode 使扩展生效。
二、配置本地 Markdown 预览增强
默认预览仅支持基础语法高亮与简单渲染，启用实时同步滚动与数学公式支持可提升技术文档可读性。
1、按下 Cmd+, 打开设置界面。
2、在搜索栏输入 markdown.preview.math，勾选启用项。
3、在设置中查找 markdown.preview.scrollPreviewWithEditor 和 markdown.preview.scrollEditorWithPreview，均设为 true。
三、使用 Hugo 快速生成静态博客
Hugo 是无需 Node.js 运行时的静态站点生成器，配合 VSCode 可实现“写作即发布”。其零依赖特性适配纯文本写作流。
1、通过 Homebrew 执行 brew install hugo 安装 Hugo CLI。
2、在终端中进入项目目录，运行 hugo new site myblog 初始化站点。
3、进入 myblog 目录，执行 hugo new posts/first-post.md 创建新文章。
4、用 VSCode 打开该 .md 文件，编辑内容后保存。
5、在终端中运行 hugo server -D 启动本地预览服务，访问 http://localhost:1313 查看效果。
四、对接 GitHub Pages 自动部署
将 Hugo 构建产物推送到 GitHub 仓库的 gh-pages 分支，即可启用免费托管服务，无需额外服务器。
1、在 GitHub 创建空仓库，名称格式为 username.github.io（username 替换为您的 GitHub 用户名）。
2、在 Hugo 项目根目录下执行 hugo -d docs，生成静态文件至 docs 子目录。
3、进入 docs 目录，运行 git init && git add . && git commit -m "deploy"。
4、执行 git branch -M main && git remote add origin https://github.com/username/username.github.io.git，替换 username。
5、运行 git push -u origin main 完成首次推送。
五、使用 Typora 风格主题提升写作沉浸感
VSCode 默认界面偏开发向，切换为极简主题并隐藏非必要面板，可模拟专业写作工具体验。
1、打开命令面板（Cmd+Shift+P），输入 Preferences: Color Theme 并回车。
2、选择 Quiet Light 或 GitHub Dark Dimmed 主题。
3、按下 Cmd+K，再按 Cmd+B 关闭侧边栏；按下 Cmd+Shift+M 隐藏状态栏。
4、在设置中搜索 editor.fontFamily，将其值设为 'SF Pro Display', 'Segoe UI', sans-serif。
