前端集成 Monaco (VSCode) 编辑器

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

monaco 支持的语言

支持智能感知、校验语法的语言

TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML

支持基础语法着色的语言

XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C

安装

npm install monaco-editor

在 node_modules/monaco-editor 目录中：

• 目录 esm: ESM 版本 (兼容于 webpack )
• 目录 dev: AMD 版本, 代码没被最小化
• 目录 min: AMD 版本, 代码被最小化
• 目录 min-maps: 代码最小化的 source maps
• 文件 monaco.d.ts: 这是api 接口的详细定义 。
  推荐开发使用 dev 目录, 生产环境中使用 min 目录。

集成

AMD 版本的集成

直接上一个最基本的HTML页面集成 monaco editor，更多的例子可以参考官方例子 monaco-editor-samples。

ESM 版本使用 webpack 插件的集成

使用 "Monaco Editor Loader Plugin" 插件的方式集成

这个是最简单集成的方式，通过配置这个插件就可以选择editor 的语言和其他特性。了解更多可以访问插件官方链接 Monaco Editor Loader Plugin。

index.js

import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
  value: [
    'function x() {',
    '\tconsole.log("Hello world!");',
    '}'
  ].join('\n'),
  language: 'javascript'
});

webpack.config.js

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

module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
         languages:["javascript","json"],
         features:["coreCommands","find"]
     })   
  ]
};

原始webpack方式集成（不使用插件）

完成的例子可以参考官方链接 https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack 或者 https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-small。

index.js

import * as monaco from 'monaco-editor';

// Since packaging is done by you, you need
// to instruct the editor how you named the
// bundles that contain the web workers.
self.MonacoEnvironment = {
  getWorkerUrl: function (moduleId, label) {
    if (label === 'json') {
      return './json.worker.bundle.js';
    }
    if (label === 'css') {
      return './css.worker.bundle.js';
    }
    if (label === 'html') {
      return './html.worker.bundle.js';
    }
    if (label === 'typescript' || label === 'javascript') {
      return './ts.worker.bundle.js';
    }
    return './editor.worker.bundle.js';
  }
}

monaco.editor.create(document.getElementById('container'), {
  value: [
    'function x() {',
    '\tconsole.log("Hello world!");',
    '}'
  ].join('\n'),
  language: 'javascript'
});

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    "app": './index.js',
    // Package each language's worker and give these filenames in `getWorkerUrl`
    "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
    "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
    "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
    "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
    "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
  },
  output: {
    globalObject: 'self',
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }, {
      test: /\.ttf$/,
      use: ['file-loader']
    }]
  }
};

集成 monaco 用于实现 json代码格式化的例子

百度搜索关键字“json 格式化”一堆网站，提供的功能原始粗糙，一句话都是为了流量广告。作为码农难易忍受，又加之这次特殊疫情出不了们，自己挽起袖子干起来。
本来准备集成 codeMirror，但是codeMirror 实在是太丑了，凑巧在 leecode 刷题时候，发现他们代码编辑器又好看体验又好，仔细一研究发现用 monaco editor 集成的。看样子monaco 还是很受码农欢迎的，再加上vscode 也是基于monaco ，monaco 形象在我的心中顿时伟大起来。闲话少说狠戳链接 YOUJSON 观看例子。

初始界面截图如下

启动界面.png

编辑器启动后自动 focus ，光标定在第一行，这个时候可快读通过ctrl+v 粘贴需要格式化的JSON 字符。

粘贴 json 字符到编辑器

粘贴 json 字符时，编辑器会自动格式化到漂亮模式如下图。

粘贴json 字符.png

如果想手动格式化json，请单击“格式化 Shift+ Alt +F” 按钮。实现代码如下：

 monacoInstance.getAction('editor.action.formatDocument').run();

monacoInstance 是编辑器实例

自动化校验

json 编辑器怎么可以没有自动校验功能（monaco 自动加持），让我们删除一个逗号试试。

错误提示.png

红色的波浪线+hover 提示+ 右侧颜色导航 ，是否有种熟悉的味道?

折叠大json

遇到变态的又长又粗的json 怎么办，youjson 折叠可以降服他们。

折叠大json.png

点击“折叠”按钮折叠json，慢慢展开着看是否很爽？实现代码如下：

    function toggleFold() {
        if (monacoInstance.folded) {
            monacoInstance.getAction('editor.unfoldAll').run();
            monacoInstance.focus();
        } else {
            monacoInstance.getAction('editor.foldAll').run().then(function () {
                monacoInstance.setSelection(new monaco.Range(1, 1, 1, 1));
                monacoInstance.focus();
                monacoInstance.getAction('editor.unfold').run();
            });
        }
        monacoInstance.setScrollTop(0);
        monacoInstance.folded = !monacoInstance.folded;
    }

感谢

感谢您翻到这儿，你是个很有耐心、爱学习的人。