作者:huineisuan111184 | 来源:互联网 | 2023-10-16 17:27
monaco-editor是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与VisualStudioCode功能几乎相同。在项目中可能会用带代码编
monaco-editor 是微软出的一条开源web在线编辑器
支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同。
在项目中可能会用带代码编辑功能,或者展示代码。对于习惯使用vsCode的开发者来说使用monaco-editor是非常不错的选择。
安装依赖
cnpm install monaco-editor --save
cnpm install monaco-editor-webpack-plugin --save-dev
修改webpack.base.conf.js配置文件,如图:

const MOnacoWebpackPlugin= require('monaco-editor-webpack-plugin');
...
module.exports = {
...
plugins: [
...
new MonacoWebpackPlugin()
]
};
editor组件
引用editor组件
效果图如下:


