如何在 Vue 项目中使用 Monaco Editor

Monaco Editor 是一款开源的在线代码编辑器。它是 VSCode 的浏览器版本，随着近年 VSCode 大热，Monaco Editor 也随之走红。它的使用也很简单，但按照其官方文档操作，在现代化框架如 Vue 中使用，会遇到一些问题；本文即根据踩过些坑，介绍一种在 Vue 项目中完好使用 Monaco Editor 可行的方案。

存在问题方案

按照其官方文档介绍，需要两部操作：1. 编写逻辑代码，2. Webpack 配置；具体操作可以参见 monaco-editor#option-2-using-plain-webpack。但在实际使用中，要么不能正常完美使用（如编写没有代码提示），要么会报错，官方也未给出解决方案；具体信息如下（也可以参见 Github Issues：Error: Unexpected usage (integration with vue)，Uncaught Error: Unexpected usage #1690）：

Error: Unexpected usage at EditorSimpleWorker.push../node_modules/monacoeditor/esm/vs/editor/common/services/editorSimpleWorker.js.EditorSimpleWorker.loadForeignModule ...

更合适的方案

使用 monaco-editor-webpack-plugin Webpack 插件，即可完美规避如上问题，具体可以参见如下代码：

安装插件

yarn add monaco-editor-webpack-plugin --dev
# Or
npm i monaco-editor-webpack-plugin --save-dev

vue.config.js

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

module.exports = {
  // ......
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
        languages: ['javascript', 'css', 'html', 'typescript', 'json']
      })
    ]
  }
}

index.js

import * as monaco from 'monaco-editor'
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'

editor = monaco.editor.create(dom, {
  fontSize: '14px',
  language: 'html',
  folding: true,
  foldingStrategy: 'indentation', // 代码可分小段折叠  
  automaticLayout: true, // 自适应布局  
  overviewRulerBorder: false, // 不要滚动条的边框  
  scrollBeyondLastLine: false, // 取消代码后面一大段空白  
  minimap: {
    // 不要小地图  
    enabled: false
  }
})