VSCode插件开发环境中文配置全攻略-VSCode-PHP中文网

插件开发时汉化后界面仍是英文，因extension development host不自动同步宿主locale配置，需在宿主settings.json中显式设"locale":"zh-cn"并透传；插件内字符串须用vscode.l10n.t()走nls流程；webview需加lang="zh-cn"及中文字体栈，node.js进程需full-icu支持utf-8。

vscode插件开发环境中文配置全攻略

VSCode插件开发时，为什么汉化后界面仍是英文？

因为插件开发环境（Extension Development Host）默认继承宿主 VS Code 的 locale 设置，但**它不自动同步你主窗口的 locale 配置**。即使你在主 VS Code 中已成功汉化，新开的 Extension Development Host 窗口仍读取默认英文 locale，导致菜单、调试面板、命令提示全是英文。

常见错误现象：Ctrl+Shift+P 输入 Configure Display Language 后选了 zh-cn，重启开发窗口却没生效；或者直接在扩展开发窗口里点“重新加载窗口”，结果还是英文。

必须在 宿主 VS Code（即你日常用的那个）的 settings.json 中显式写入 "locale": "zh-cn"
然后通过 npm run watch 或 F5 启动插件调试时，VS Code 会把该配置透传给 Extension Development Host 窗口
验证方式：打开 Extension Development Host 窗口后，看顶部菜单栏（文件、编辑、视图…）是否为中文 —— 这是唯一可靠判断点

如何让插件代码里的字符串支持多语言（i18n）？

VSCode 官方插件开发规范要求所有用户可见文本必须走国际化流程，不能硬编码中文或英文。否则发布到 Marketplace 后，不同 locale 用户看到的都是同一套文字，体验断裂。

核心机制是 vscode-nls 工具链，不是简单改 package.json 里的 displayName。

运行 npx vscode-nls@latest develop 生成 nls.metadata.json 和 package.nls.json 模板
在源码中用 vscode.l10n.t('Save file') 替代 'Save file'，函数名必须是 t，参数必须是字符串字面量（不能拼接）
构建时需在 webpack.config.js 或 package.json 的 scripts 中加入 nls:build 步骤，否则 package.nls.json 不会被打包进 .vsix
测试多语言效果：启动 Extension Development Host 后，在命令面板执行 Developer: Switch Language，选 zh-cn 再重载窗口

调试插件时中文乱码或显示方块字怎么办？

这不是字体问题，而是 Node.js 运行时未正确识别系统 locale 导致的编码 fallback 失败。尤其在 Windows 上，插件进程常以 CP1252 启动，遇到 UTF-8 中文就崩。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

根本解法不是改 VS Code 设置，而是控制插件进程的启动环境。

在 launch.json 的 configurations 中添加环境变量："env": {"NODE_OPTIONS": "--icu-data-dir=./node_modules/full-icu"}
安装 full-icu：npm install full-icu --save-dev，它提供完整 ICU 数据，绕过系统 locale 依赖
确保 package.json 的 main 入口文件顶部有 require('full-icu');（注意顺序：必须在任何 vscode API 调用前）
避免在插件中使用 fs.readFileSync(path, 'utf8') 读取含中文的 JSON/MD 文件 —— 改用 fs.readFileSync(path, 'utf8').replace(/\r\n/g, '\n') 显式处理换行符，Windows 下 CR-LF 可能触发解析异常

插件 UI 组件（Webview）里中文渲染异常

Webview 是独立沙箱，不受 VS Code 主窗口 locale 控制。即使整个编辑器是中文，Webview 默认仍按 en-us 渲染，且 CSS font-family 若没兜底，中文会 fallback 到系统默认等宽字体，显得拥挤或错位。

关键不是加字体，而是声明语言和字体链。

在 Webview HTML 的标签上加属性：lang="zh-cn"
CSS 中显式定义中文字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei";
禁用 Webview 的默认样式干扰：webview.options = { enableScripts: true, allowScripts: true, allowForms: true };，但不要设 enableFindWidget: true，它在中文下搜索高亮易错位
如果用了 Monaco Editor 嵌入 Webview，必须手动调用 monaco.editor.setTheme('vs-dark') 并设置 language: 'zh'（注意：这是 Monaco 的语言 ID，非 locale）

插件开发中的中文支持，本质是三重隔离：宿主 locale 透传、Node.js 运行时编码控制、Webview 独立渲染上下文。漏掉任何一层，都会出现“看起来配好了，但某处还是英文/乱码”的情况。最常被忽略的是 Webview 的 lang 属性和字体栈 —— 它不报错，只默默渲染得很难看。