启用 editor.renderWhitespace 设为 "all" 并开启 editor.renderControlCharacters，才能完整显示空格（·）、Tab（→）和换行符（¶）；仅设 renderWhitespace 无法显示 Tab，因其属于控制字符而非空白符。
VS Code怎么让空格和制表符可视化
直接答案：启用 editor.renderWhitespace 并设为 "all"，再配合 editor.renderControlCharacters 才能完整看到空格、Tab 和换行符。
很多人只开 editor.renderWhitespace，结果发现 Tab 仍看不见——因为 Tab 是控制字符，不是空白符，得单独打开渲染开关。
-
editor.renderWhitespace: "all"→ 显示所有空格（包括行尾、缩进中的空格），用小圆点·表示 -
editor.renderControlCharacters: true→ 显示 Tab（显示为→）、换行符（¶）等控制字符 - 如果只想看当前选中区域的空白符，可设
editor.renderWhitespace: "selection"，但日常调试建议用"all"
为什么开了 renderWhitespace 还看不到空格
常见错误是只改了 UI 设置界面里的开关，但没生效——VS Code 的设置有用户级、工作区级、语言级三层，优先级从高到低。如果工作区 settings.json 里显式写了 "editor.renderWhitespace": "none"，那 UI 上的勾选就完全无效。
实操建议：
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Preferences: Open Settings (JSON)，直接编辑 JSON - 确认没有重复配置项冲突，尤其检查是否有语言专属覆盖，比如
"[javascript]": { "editor.renderWhitespace": "none" } - 改完保存，重启 VS Code 或重载窗口（
Ctrl+Shift+P→Developer: Reload Window）
显示空格后怎么快速清理混杂缩进
可视化只是第一步；真正要解决的是历史代码里 Tab 和空格混用的问题。VS Code 提供了原生命令，不用装插件就能批量转换。
操作路径：
- 打开目标文件，全选（
Ctrl+A） - 调出命令面板（
Ctrl+Shift+P），输入Convert Indentation to Spaces并执行 - 如果右下角状态栏显示
Spaces: 4或类似，说明已切换成功；若仍显示Tab Size: 4，说明editor.insertSpaces没开，需补设
注意：这个命令只作用于当前文件，不修改其他文件。对整个项目批量处理，建议用 Prettier + prettier --write "**/*.{js,ts,jsx,tsx}" 命令更可靠。
HTML/JSX 文件里空格显示异常怎么办
部分用户反馈：在 .html 或 .vue 文件中，renderWhitespace: "all" 对模板字符串或属性值内的空格不生效。这不是 bug，而是 VS Code 默认对某些语言禁用了全局空白渲染，防止干扰结构感知。
解决方法是加语言专属配置：
- 在工作区
settings.json中添加：
{
"[html]": {
"editor.renderWhitespace": "all"
},
"[javascript]": {
"editor.renderWhitespace": "all"
},
"[typescript]": {
"editor.renderWhitespace": "all"
}
}
不要依赖全局设置去覆盖所有语言——语言级配置才是实际生效的层级。
真正容易被忽略的点：空格可视化本身不改变代码行为，但它会暴露缩进混乱的真实程度。一旦看到满屏 · 和 →，你就该意识到，光靠显示还不够，得立刻配好 editor.insertSpaces、editor.tabSize 和 editor.formatOnSave，否则下次编辑又会回到原点。
