VSCode运行HTML时控制台乱码本质是终端默认GBK编码与UTF-8文件/声明不匹配，需在settings.json中配置terminal.integrated.profiles.windows为PowerShell或cmd并添加chcp 65001启动参数，同时确保HTML文件为UTF-8编码、含正确<meta charset="UTF-8">声明。
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 中编辑”，添加或补全以下配置：
{
"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> 内联代码或 fetch() 加载本地 JSON 时。
立即学习“前端免费学习笔记（深入）”；
- 右下角状态栏点击当前编码（如
GBK或GB2312），选“通过编码重新打开”→UTF-8，再按Ctrl+S保存（此时会转存为 UTF-8） - 确保文件开头有
<meta charset="UTF-8">，且放在<head>最前面 - 避免用 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）中复现乱码。别只修表面，得查链条上每一段。
