今天给小伙伴们分享一款超强大基于VSCode的web版代码编辑器Monaco Editor。

monaco-editor 微软开源的基于vs浏览器端代码编辑器，star高达21.3K+。支持代码提示、智能建议等功能。

什么是Monaco Editor

微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中衍生出来的一个web编辑器，很大一部分代码都是共用的。monaco和VSCode在编辑代码，交互以及UI上几乎一模一样，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于Electron，可以说是VS Code的web版本。

安装

$ npm i monaco-editor -S

使用插件

// HTML
<div id="monaco"></div>

// JS
import * as monaco from 'monaco-editor';
const monacoInstance = monaco.editor.create(document.getElementById("monaco"),{
  value:`console.log("hello,world")`,
  language:"javascript"
})
monacoInstance.dispose();//使用完成销毁实例

快速集成

官网提供嵌入编辑器最基本的HTML页面示例，建议感兴趣的同学可以直接下载下来查看相关示例代码。

https://github.com/Microsoft/monaco-editor-samples/

git clone https://github.com/Microsoft/monaco-editor-samples.git
cd monaco-editor-samples
npm install
npm run simpleserver

另外还提供了Vue版本编辑器。

https://github.com/matt-oconnell/vue-monaco-editor

# 文档及示例
https://microsoft.github.io/monaco-editor/

# 仓库地址
https://github.com/Microsoft/monaco-editor

ok，就分享到这里。感兴趣的小伙伴们可以去看下哈~