Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

什么是Monaco Editor？

微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。

官方文档：Monaco Editor

也可以在它提供的Playground玩一会：Monaco Editor

Github地址：monaco-editor/samples at main · microsoft/monaco-editor · GitHub

Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

开始使用

本文采用的是webpack编译，所以以下都是基于webpack来说明。

基本功能，首先，我们需要安装monaco-editor和monaco-editor-webpack-plugin，并且版本要对应，不然会报错：Module parse failed: Unexpected token (30:15)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

npm install monaco-editor@0.30.0 -S

npm install monaco-editor-webpack-plugin@6.0.0 -D

创建一个子组件并引入monaco-editor

在父组件中使用

最后启动项目实现的效果

Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

最终的实现效果里我发现的功能有：

代码提示
代码高亮
右键有菜单

Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

代码搜索

Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

其他配置

代码提示

根据上面的步骤引入调用后，是有代码提示的，效果如下：

Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

重点来了！！！！

我在 vue.config.js 里配置了以下代码：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
   configureWebpack: {
      plugins: [
         new MonacoWebpackPlugin()
      ]
   }
};

代码提示一下子多了起来。 Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

示例

完成以上的使用和配置后，接下来就可以实现一个在线编辑器了

还要配置下 vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
    configureWebpack: {
        plugins: [
            new MonacoWebpackPlugin({ languages: ['javascript', 'typescript', 'html', 'css', 'json'] })
        ]
    }
};