WebStorm Project栏乱码主因是UI字体不支持中文或文件编码非UTF-8;需在Appearance中更换中文字体并重启,或对乱码文件右键选择正确编码Reload/Convert。

WebStorm 左边的栏(Project 工具窗口)显示乱码,大概率不是 Project 本身的问题,而是 IDE 界面字体或系统级编码没对上——它不读文件内容,只显示文件名和结构,所以乱码只可能出在 UI 渲染层。
界面字体不支持中文导致菜单/侧边栏口口口
这是最常见原因:WebStorm 默认用系统字体渲染 UI,但某些 Linux 发行版、旧版 macOS 或精简 Windows 镜像里缺中文字体,结果菜单、Project 栏里的中文路径全变成方块或“口口口”。
- 进
File → Settings → Appearance & Behavior → Appearance(macOS 是WebStorm → Preferences → Appearance) - 勾选
Override default fonts by (not recommended) - 在
Name下拉框里选一个带中文支持的字体,比如Microsoft YaHei(Windows)、WenQuanYi Micro Hei Mono(Linux)、PingFang SC(macOS) - 点
OK后必须重启 WebStorm 才生效——热重载不刷新 UI 字体栈
文件名本身乱码(非 UI,而是 Project 栏里显示的路径名异常)
如果你看到的是 Project 栏里某几个文件名是乱码(比如 test.js),但其他正常,说明这些文件在磁盘上就是用非 UTF-8 编码保存的(常见于从旧 Windows 项目拷贝来的 GBK 文件),WebStorm 尝试按 UTF-8 解码失败,就用 替代无法识别的字节。
- 右键该乱码文件 →
Reload project from disk有时能触发重新探测 - 更可靠的做法:在 Project 栏里右键该文件 →
File Encoding → GBK(或其他你怀疑的编码),然后选Reload预览效果 - 确认无误后,再右键 →
Convert把内容真正转成 UTF-8 并写回磁盘 - 注意:
Convert不可逆,操作前建议备份原始文件
终端/控制台输出影响 Project 栏?不会,但容易混淆
有人把 Terminal 里 npm run dev 输出的中文乱码,误以为是 Project 栏乱码。其实完全无关——Terminal 的乱码由 JVM 参数、系统 chcp、VM options 共同决定,不影响 Project 工具窗口。
- Project 栏只依赖 UI 字体 + 文件系统返回的原始字节流(Linux/macOS 通常 UTF-8,Windows NTFS 默认是 UTF-16LE 路径,但 WebStorm 已适配)
- 如果 Project 栏里连新建的
测试.js都显示为.js,那 99% 是上面第一条的字体问题 - 别去动
Settings → Editor → File Encodings里的设置——那里管的是文件内容编码,不是 UI 显示
真正难搞的是那种“改了字体、重启了、还是口口口”的情况——大概率是系统级字体缓存损坏,或者用了自定义桌面环境(如 i3wm、Sway)没装 fontconfig 配置。这时候与其死磕,不如直接换用 JetBrains Runtime 自带的字体回退机制:启动时加参数 -Djb.fonts.old=true,强制走旧版字体匹配逻辑。











