VSCode怎么配置Hexo/Hugo博客写作环境

说实话，VSCode本身并没有内置博客工作流的选项，但只要用对方法，通过插件加任务加终端集成，完全可以把Hexo或Hugo的整套流程——写文章、预览、部署——都收在一个窗口里解决。真正重要的点不在于装了多少插件，而在于怎么让那些常用命令变成一键触发，不打断写作的节奏。

怎么让VSCode终端默认用Git Bash（Windows）

Windows环境下，直接用CMD或PowerShell运行hexo或hugo时，经常遇到“命令未找到”的错误，这背后其实是环境变量继承或Shell兼容性的问题。Git Bash之所以靠谱，是因为它能正确识别npm全局bin路径，也兼容Unix风格命令。

• 打开VSCode设置（Ctrl+,），搜索terminal.integrated.defaultProfile.windows
• 设为Git Bash；如果没出现该选项，手动加配置项：
  "terminal.integrated.profiles.windows": {"Git Bash": {"path": "C:\Program Files\Git\bin\bash.exe"}}（路径按你实际安装位置调整）
• 重启终端，输入which hexo或which hugo，应返回有效路径
• 若仍报错，检查Node.js是否全局安装了CLI：npm list -g hexo-cli或scoop list hugo（Windows用Scoop安装时）

怎么配tasks.json实现一键生成+预览

每次手动敲hexo g && hexo s或hugo server --watch太重复了，用VSCode的tasks.json可以绑定快捷键（比如Ctrl+Shift+B），还能自动拉起浏览器。

• 按下Ctrl+Shift+P → 输入Tasks: Configure Task → 选Create tasks.json from template → Others
• 替换内容为（以Hexo为例）：

  {  "version": "2.0.0",  "tasks": [{    "label": "hexo serve",    "type": "shell",    "command": "hexo clean && hexo g && hexo s",    "group": "build",    "presentation": {      "echo": true,      "reveal": "always",      "focus": false,      "panel": "shared",      "showReuseMessage": true    },    "problemMatcher": []  }]}

• Hugo用户把command换成hugo server --watch --disableFastRender即可
• 保存后按Ctrl+Shift+B，选择hexo serve，终端自动执行，服务起来后手动访问http://localhost:4000（Hexo）或http://localhost:1313（Hugo）

怎么解决图片插入和图床上传的断点问题

写作时最卡人的环节之一就是图片处理：本地路径不跨设备、GitHub Pages不支持相对路径引用子目录图、每次拖拽再改路径太慢。VSCode插件能补上这一环，但得选对方案。

• 优先用Paste Image插件：粘贴截图自动存到source/images/（Hexo）或static/images/（Hugo），并插入![](images/xxx.png)格式链接——它不传图床，只管本地路径规整，稳定可靠
• 如果必须直传七牛/SM.MS等图床，qiniu-upload-image插件仍可用，但注意：它只读取当前文件夹下.qiniu.json配置，且不支持Hugo的assets目录结构；建议Hexo用户用，Hugo用户绕开
• 别依赖插件自动生成绝对URL：Hugo中图片应统一用![](/images/xxx.png)，Hexo则靠post_asset_folder: true + hexo-asset-image插件解析同名文件夹，二者机制不同，混用会失效

怎么避免_config.yml / hugo.yaml配置被覆盖或忽略

VSCode不校验静态生成器的配置文件语法，但一个拼写错误（比如theme:写成them:）会导致整个站点build失败，且错误提示藏在终端末尾，极易漏看。

• Hexo用户务必在根目录_config.yml中确认：
  source_dir: source（不是./source）、public_dir: public、post_asset_folder: true
• Hugo用户检查hugo.yaml中baseURL是否带结尾斜杠（https://example.com/），否则资源路径会404
• 用YAML插件（如Red Hat YAML）开启schema校验：在设置中添加"yaml.schemas": {"./node_modules/hexo-cli/schema.json": "_config.yml"}（Hexo暂无官方schema，可跳过；Hugo推荐用https://json.schemastore.org/hugo）
• 修改完配置，先运行hexo g --debug或hugo --dryRun快速验证，别直接hexo s——后者会卡住等失败输出

真正卡住人的从来不是某个插件装不上，而是Hexo的post_asset_folder和Hugo的resources.GetMatch对图片路径的处理逻辑完全不同，却有人试图用同一套VSCode配置通吃两者。分清生成器底座差异，比堆插件重要得多。