VSCode怎么配置Hexo/Hugo博客写作环境-VSCode-PHP中文网

vscode本身不内置博客工作流，但可通过git bash终端集成、tasks.json一键任务（如hexo clean&&g&&s）、paste image插件规整图片路径、yaml校验避免配置错误，实现hexo/hugo全链路写作闭环。

vscode怎么配置hexo/hugo博客写作环境

VSCode 本身不内置博客工作流，但能通过插件+任务+终端集成把 Hexo 或 Hugo 的写作、预览、部署全链路收进一个窗口里。关键不是装多少插件，而是让 hexo s、hugo server、图片上传、Git 提交这些动作在 VSCode 内可一键触发，且不打断写作节奏。

怎么让 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），并自动拉起浏览器。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

按下 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）

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

Markdown 写作最卡点之一是贴图：本地路径不跨设备、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 —— 后者会卡住等失败输出