大概在5年前，曾分享过一篇《ACE Editor在线代码编辑器简介及使用引导》，恰巧最近我们产品上又有用到Ace Editor，看了下博客，没曾想，在五年后的今天，还有相当一部分人通过搜索引擎搜到这篇文章。不过在这次使用中，也发现了诸多不爽，主要有：不支持es6的import导入（需要二次封装）；自带模块加载器和webpack打包的项目不太好结合等。所幸的是，在github上找到了现成的二次封装版本https://github.com/vue-bulma/brace（刚好我们在用Vue）。

不过今天主角并不是Ace Editor，在这个开源项目遍地开花的年代，“巨硬”不但收购了GitHub，还不断在GitHub上开源新项目，而这个名为Monaco Editor的开源项目，就是前几年新推出的VSCode的核心代码抽取出来的web版，简单尝试了下，完全能覆盖Ace Editor带给我们的功能。

项目地址：https://github.com/Microsoft/monaco-editor

安装使用非常简单，只用

npm install monaco-editor

随后在需要的地方（官方例子）

import monaco from 'monaco-editor'

monaco.editor.create(document.getElementById("container"), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: "javascript"
});

其中language指定语言，value指定显示值，更多功能建议参考官方文档

文档地址：https://microsoft.github.io/monaco-editor/

简单尝试了下，效果非常赞，几乎和本地版VSCode无异，有需要的童鞋可以尝试一下。