Webstorm 中 terminal 中 cmd/powershell v1/powsershell v7 三种终端中文乱码修正方法

背景

很多时候我们顺手 console.log("xxxx",变量,变量) ,这里的 XXXX 有时候图识别快,就会用中文来输出,必定搞拼音有点 low,写英文不太熟,拼错了还丢人,所以中文仍然是一个快速识别的手段。

那么,如何将配置终端的中文输出呢?

原因

  1. 微软为了照顾中文用户,所有的地方基本都是采用 gb2312 或者 gbk,这是一个比较老的故事,那时候互联网还不够大,对全世界的语言的支持都不太行,就只能各自搞各自的编码了

  2. 之后随着互联网规模越来越大,加入的国家和地区语言越来越多,尤其是编程语言的广泛普及,很多国家的程序员迫切想要支持自己国家的语言文字,于是在这种号召下,UTF-8 出现了,详细参考UTF-8 发展历史以及与 UTF-16/GBK 之间的差异-优快云博客 ,但是微软系统遗留的中文编码的事情并没有随之而改变,大家都只遵循着旧的东西慢慢衰亡,新的东西渐渐升起。

Webstorm 的 Terminal

Shell Path 可以默认可以支持 cmd,git bash,powsershell v1,如果你安装了 powsershell 7,这里也能看到

CMD 控制台

因为需要 chcp 65001 这个指令在终端启动前预设,所以使用 webstorm 的环境配置是没有用的,另外 cmd 也比较古老,所以没有预设文件,只能在注册表中修改,若没发现Autorun,则新建一个,key=Autorun,value=chcp 65001

注意 `chcp 65001`  中间是空格不是 `=` 

powsershell V1/V7 共用一个预设

powsershell 有预设配置,使用 everything 搜索 profile.ps1,记得别配错位置了

配置内容

[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
$PSDefaultParameterValues['Out-File:Encoding'] = 'utf8'
# 这里是 webstorm 支持tab 命令行提醒的,powsershell 7 中可用
Import-Module PSReadLine
Set-PSReadLineOption -PredictionSource HistoryAndPlugin
Set-PSReadLineKeyHandler -Key Tab -Function MenuComplete

自动提示

中文输出

<think>嗯,用户遇到了WebStorm 2020中HTML文件中文乱码的问题。这个问题很常见,但解决起来需要分情况处理。用户可能已经尝试过一些方法但没完全解决,所以需要系统性的解决方案。 从引用内容来看,乱码通常由三个原因导致:文件编码不一致、编辑器编码设置错误、缺少HTML meta声明。用户是2020版本,但解决方法应该和较新版本类似。 先考虑最简单的解决方案:检查文件编码。用户可能用其他编辑器创建过文件,导致编码不是UTF-8。需要让用户先确认右下角状态栏的编码显示,如果是GBK或其他编码,需要统一转换为UTF-8。 接着是编辑器设置问题。WebStorm有时会错误识别编码,特别是当文件没有BOM头时。需要指导用户通过File Encoding菜单强制指定UTF-8并转换。这里要注意Reload和Convert的区别——用户如果选错会导致乱码更严重。 然后是HTML文件本身的meta声明缺失问题。即使用户设置了UTF-8编码,如果HTML里没有<meta charset="UTF-8">,浏览器也可能识别错误。需要提醒用户检查这个基础设置。 用户可能还遇到更棘手的情况:旧文件已损坏的乱码。这时只能建议用户备份后尝试用十六进制编辑器修复,或者忍痛重写中文部分。不过这种情况应该不多见。 最后要强调设置默认编码的重要性,避免新文件再出问题。全局设置和项目设置都要检查,特别是新项目容易继承错误设置。 用户应该是前端开发者,这类问题会影响工作效率,所以回复要清晰分步骤,避免技术术语堆砌。重点突出“先确认编码类型→再转换→最后检查声明”这个逻辑链。</think>以下是解决WebStorm 2020中HTML文件中文乱码的系统性解决方案,请按步骤操作: --- ### **一、确认文件编码** 1. **查看当前编码** 打开HTML文件 → 观察右下角状态栏编码显示(如`GBK`, `UTF-8`, `Windows-1252`等) *若显示非`UTF-8`,直接跳转步骤二* 2. **检查HTML声明** 确保文件头部包含编码声明: ```html <meta charset="UTF-8"> ``` *缺少此声明会导致浏览器解析错误[^3]* --- ### **二、转换文件编码** > **关键操作**:需区分**旧文件**和**新建文件** 1. **旧文件乱码修复** - 右下角点击当前编码(如`GBK`) → 选择 **`UTF-8`** → 弹出选项选 **`Convert`** *(不可选`Reload`,否则会破坏原有内容[^2])* - 若转换后仍乱码: ```markdown a. 复制所有代码 → 删除原文件 → 新建同名HTML文件 b. 粘贴代码 → 保存时确认编码为`UTF-8` c. 手动重写残留乱码中文部分[^1] ``` 2. **新文件设置默认编码** - 进入设置:`File → Settings → Editor → File Encodings` - 修改以下三项为 **`UTF-8`**: ```markdown - Global Encoding: UTF-8 - Project Encoding: UTF-8 - Default encoding for properties files: UTF-8 ``` ✅ 勾选 `Transparent native-to-ascii conversion` - 点击`OK`保存 --- ### **三、验证与调试** 1. **浏览器测试** 右键HTML文件 → `Open in Browser` → 检查中文显示 *若仍乱码,按`F12`打开开发者工具 → 查看`<head>`是否加载`<meta charset="UTF-8">`* 2. **清除缓存干扰** 浏览器中按 `Ctrl+F5` 强制刷新,避免缓存旧编码 --- ### **四、特殊情况处理** - **外部资源乱码**: 若引用的CSS/JS文件含中文,需同步将其转为`UTF-8`(方法同步骤二) - **模板引擎问题**: 如Thymeleaf需添加:`<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />` - **控制台乱码**: 修改运行配置:`Run → Edit Configurations → 在VM options添加` ```ini -Dfile.encoding=UTF-8 ``` > **根本原因**:编辑器、文件本身、浏览器解析三者的编码不一致[^3]。统一为`UTF-8`即可根治。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

森叶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值