monaco editor + vue的配置

Posted 2020-09-30 二三事

monaco editor是vscode的御用编辑器。

功能非常强大，使用方便轻巧，对js\\ts等等语言支持都良好，能方便的扩展以支持其他语言或者自定义的特性。

夸了这么多，这里只说它一个问题:

 

这货和vue不兼容。

 

解决这个问题很简单，使用vue-monaco-editor即可，可以通过npm安装。

npm install vue-monaco-editor --save-dev

现在问题又来了

 

这货文档有问题的，如下：

 

这里写了默认的srcPath是""，也就是本地的意思

并没有。

srcPath默认是null，所以请自己在标签上加上  srcPath=""

然后呢，需要让本地的monaco能被访问到，webpack加入下面的配置：

const CopyWebpackPlugin = require(\'copy-webpack-plugin\');
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: \'node_modules/monaco-editor/min/vs\',
        to: \'vs\',
      }
    ])
  ]
};

 

vue-monaco-editor解决monaco引用的思路是:

如果window.monaco已经注册，则不做任何事

如果没有，就以<script>形式引用monaco editor。