首先使用npm或者其他包管理工具安装依赖插件:
bash
npm install monaco-editor --save
npm install monaco-editor-nls --save
npm install monaco-editor-webpack-plugin --save
npm install monaco-editor-esm-webpack-plugin --save-dev
如果右键菜单汉化一部分失败,首先去项目下看node_modules/monaco-editor-nls/locale/zh-hans中搜vs/editor/contrib/format/看一下是否有路径有brower字段,再去对应的node_modules/monaco-editor/esm/vs/editor/contrib/format/formatActions看是否有brower文件夹
- 如果有:那么安装monaco-editor-nls最新版本
- 没有:安装monaco-editor-nls2.0版本
bash
npm install monaco-editor-nls@^2.0.0 --save
webpack.config.js 添加配置:
javascript
const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
module.exports = {
configureWebpack: {
module: {
rules: [{
test: /\.js/,
enforce: 'pre',
include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
use: MonacoWebpackPlugin.loader
}]
},
plugins: [
new MonacoWebpackPlugin()
]
}
}
此处需要引入monaco-editor-esm-webpack-plugin,引入monaco-editor-webpack-plugin无法汉化成功 设置语言包
javascript
// 汉化 monaco
import { setLocaleData } from "monaco-editor-nls"
import zh_CN from "monaco-editor-nls/locale/zh-hans.json"
setLocaleData(zh_CN)
//先汉化语言,再加载monaco才能汉化成功,使用import方式无法汉化
//需要使用require方式引入monaco-editor
//import * as monaco from 'monaco-editor'
const monaco = require("monaco-editor/esm/vs/editor/editor.api");
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import languages from "./language";