Skip to content

DTStack/monaco-editor-i18n-plugin

Repository files navigation

monaco-editor-i18n-plugin

NPM Status

English | 简体中文

The purpose of this plugin is to set the language when using monaco-editor. The main implementation idea is to achieve language switching by overriding the monaco-editor/esm/vs/nls.js.

Install

npm install monaco-editor-i18n-plugin -D

Usage

dt-zh-hans

The used src/locale/dt-zh-hans.json is lite based on vscode-loc/i18n/zh-hans.

const MonacoEditorI18nPlugin = require('monaco-editor-i18n-plugin');

const plugin = [
    ...,
    {
        key: 'WebpackPlugin',
        action: 'add',
        opts: {
            name: 'MonacoEditorI18nPlugin',
            fn: () => {
                return new MonacoEditorI18nPlugin();
            },
        },
    }
]
  • webpack.config.js
const MonacoEditorI18nPlugin = require('monaco-editor-i18n-plugin');

module.exports = {
    ...,
    plugins: [new MonacoEditorI18nPlugin()],
    ...,
};

or

new MonacoEditorI18nPlugin({
    locale: "dt-zh-hans",
});

Simplified Chinese

The used src/locale/zh-hans.json is from vscode-loc/i18n/zh-hans

new MonacoEditorI18nPlugin({
    locale: "zh-hans",
});

custom languages

If you want to use another language or if the src/locale/dt-zh-hans.json doesn't meet your requirements, you can get another's JSON file from vscode-loc/i18n.

new MonacoEditorI18nPlugin({
    customLocalePath: path.join(__dirname, "./zh-hant.json"), // Traditional Chinese
});

Notice

  • The currently verified versions of monaco-editor are 0.30.1 and 0.31.1.
  • The version of vscode-loc is 1.63.3.
  • If custom language doesn't work, it may be due to a mismatch between the versions of the two packages. The JSON file structure in later versions of vscode-loc has changed, so please verify it by yourself.