VSCode运行html时控制台乱码的设置方法-VSCode-PHP中文网

vscode运行html时控制台乱码本质是终端默认gbk编码与utf-8文件/声明不匹配，需在settings.json中配置terminal.integrated.profiles.windows为powershell或cmd并添加chcp 65001启动参数，同时确保html文件为utf-8编码、含正确声明。

vscode运行html时控制台乱码的设置方法

VSCode 运行 HTML 时控制台乱码，本质是终端输出编码与 HTML 文件或浏览器环境不匹配，不是 HTML 本身的问题，而是 VSCode 启动终端（如 cmd/PowerShell）默认用 GBK，而你的文件、<meta charset="UTF-8">、甚至 VSCode 编辑器内部都按 UTF-8 处理 —— 两边对不上，就显示“”或方块。

确认当前终端代码页是否为 UTF-8

在 VSCode 集成终端中直接运行：chcp。如果返回类似 活动代码页: 936（即 GBK），而非 65001（UTF-8），说明终端没切到 UTF-8，这是绝大多数乱码的起点。

不要依赖“右下角点击 UTF-8 → 通过编码重新打开”来解决控制台输出问题——那只是改编辑器视图，不影响终端运行时的字符解释
chcp 65001 是临时生效命令，关掉终端就失效；必须让 VSCode 每次启动终端时自动执行它
PowerShell 和 cmd 的启动参数写法不同，不能混用

修改 `settings.json` 强制终端启动即切 UTF-8

打开 VSCode 设置（Ctrl + ,），搜索 settings.json，点击“在 settings.json 中编辑”，添加或补全以下配置：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

{
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "args": ["-NoExit", "-Command", "chcp 65001"]
    },
    "Command Prompt": {
      "path": "cmd.exe",
      "args": ["/K", "chcp 65001"]
    }
  },
  "terminal.integrated.defaultProfile.windows": "PowerShell"
}

必须指定 "-Command" 而非 /c，否则 PowerShell 可能跳过执行
如果只配了 Command Prompt 却把默认设为 PowerShell，配置不会生效
改完后需关闭所有终端面板，再新建一个才能看到 chcp 生效

HTML 文件自身也要匹配 UTF-8 编码和声明

即使终端已切 UTF-8，若 HTML 文件实际保存为 GBK，浏览器解析时仍可能出错，尤其当文件含中文路径、<script></script> 内联代码或 fetch() 加载本地 JSON 时。

右下角状态栏点击当前编码（如 GBK 或 GB2312），选“通过编码重新打开”→ UTF-8，再按 Ctrl+S 保存（此时会转存为 UTF-8）
确保文件开头有 <meta charset="UTF-8">，且放在最前面
避免用 Notepad 直接另存为 UTF-8 —— 它默认加 BOM，VSCode 有时会误判；推荐用 VSCode 自身保存，或选“UTF-8（无 BOM）”

Code Runner 运行 HTML 时的特殊处理

如果你用 Code Runner 插件点 ▶ 运行 HTML（比如调用 Chrome），它默认不走终端，而是直接启动浏览器，此时乱码通常来自两个地方：文件编码不对，或浏览器未正确识别 charset。

检查 code-runner.executorMap 中 HTML 配置是否包含路径空格转义（如 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"），漏掉反斜杠或引号会导致启动失败，间接引发加载异常
确保 HTML 文件里 <meta charset="UTF-8"> 存在且拼写正确（大小写敏感，charset 不是 char-set）
如果 HTML 里用 document.write 输出中文，且页面未声明 charset，Chrome 可能回退到系统编码（GBK），造成乱码

真正容易被忽略的是：终端编码、文件编码、HTML 声明、浏览器解析这四者必须全部对齐为 UTF-8。少一个环节，就可能在某个操作路径（比如右键“Open in Browser” vs 点击 Code Runner ▶ vs 手动拖进 Chrome）中复现乱码。别只修表面，得查链条上每一段。