vite使用monaco-editor怎么汉化，vue react怎么设置monaco-editor中文 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

前言

在此之前我已经检索了一番。

不是webpack的插件就是一年前的vite插件，并且还只是兼容monaco-editor 0.24.0

现在最新的monaco-editor都已经到0.34.0了

我在npm仓库找到了这个插件 vite-plugin-monaco-editor-nls 虽然有点老，在新版本也不能用。

但是毕竟支持vite，所以在原作者基础上修复了一下，现在已经支持最新版的monaco

至于具体怎么修复的，下次再开一篇文章详谈吧。

插件使用 & 同步官方语言包

具体安装方法文章里就不写了。

readme里面写的很清楚，安装一下包、配置一下vite.config.ts就行了

这里我想说一下怎么保持和vscode语言包同步更新。毕竟那个是一年前的插件，自带的语言包也是一年前的

在现在使用的话，汉化程度是非常低的

可以看到很多大多数地方的汉化都已经失效了

这里我的解决方案是把官方语言包拿过来

由于npm仓库中没有找到已经发布的中文语言包，所以就自行在npm仓库中发布一个自己组织名下的包

随时保持和官方同步即可

如果能发布私有的包更好，避免影响到别人了

同时我修复完该插件之后也加入了使用外置语言包的功能，所以只要我们保持语言包同步官方就行

export default defineConfig({
    plugins: [
        MonacoEditorNlsPlugin({
            locale: Languages.zh_hans,
            // 设置了自定义语言包的话，会优先使用自定义的语言包
            localeData: zh_CN.contents
        }),
    ],
});

发布自己语言包到npm仓库

在github上找到 vscode-loc 官方提供的中文语言包

然后在 package.json 中将 name 字段加上自己组织的前缀

然后就是登录npm然后发布即可。

注意：如果使用的了淘宝源或者其他非官方源的此时需要切换回来才能够登录得上

使用 npx nrm use npm 切回官方源

然后输入 npm publich --access public 就可以成功发布了

如果你是付费账户的话还可以发布私有的包

你应该使用命令 npm publish，该命令默认就是发布私有的包

下面使用的话就是正常的安装流程了 npm i @xxx/xxx

最终效果

最新的语言包可以实现完全汉化