用monaco editor打造在线代码编辑器

前言

本文主要记录了用monaco开发一个在线代码编辑器，全程使用webpack和ES6语言。并对一些在开发中遇到的细节问题做了解答：如何在webpack环境下将界面语言设置成中文（官方只提供了AMD模块架构下设置中文的例子）；如何在代码编辑器中添加针对某个代码库的API提示（该功能适合开发一个代码库产品的在线开发者平台）

安装

npm install -D monaco-editor  

引用

import * as monaco from 'monaco-editor';  

配置

webpack配置

//设置worker文件输出路径
entry: {  
        "app": './index.js',
        "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: {
    //设置全局变量self
        globalObject: 'self',
        filename: '[name].editor.js',
        path: path.resolve(__dirname, 'editor-dist'),
    }

代码配置

self.MonacoEnvironment = {  
    getWorkerUrl: function (moduleId, label) {
        if (label === 'json') {
            return './json.worker.editor.js';
        }
        if (label === 'css') {
            return './css.worker.editor.js';
        }
        if (label === 'html') {
            return './html.worker.editor.js';
        }
        if (label === 'typescript' || label === 'javascript') {
            return './ts.worker.editor.js';
        }
        return './editor.worker.editor.js';
    }
}

现在就可以正常使用Monaco editor了，下面我们开始处理界面汉化问题

安装monaco-editor-locales-plugin

npm instal -D monaco-editor-locales-plugin  

weback配置

//引入插件
const MonacoLocalesPlugin = require('monaco-editor-locales-plugin');  

new MonacoLocalesPlugin({  
            //设置支持的语言
            languages: ["es","zh-cn"],
            //默认语言
            defaultLanguage: "zh-cn",
            //打印不匹配的文本
            logUnmatched: false,
            //自定义文本翻译
            mapLanguages: {"zh-cn": {"Peek References": "查找引用", "Go to Symbol...": "跳到变量位置", "Command Palette": "命令面板"}}
        })

到此，编辑器界面汉化成功。然后我们要引入一个代码库的提示支持。

代码提示

所谓代码提示，就是在编辑器中写代码时会有对应的提示和自动补全功能。默认的monaco-editor支持各种语言基本的提示和补全，但是对于某个特定的代码库，比如公司自己研发的javascript产品，就需要一个单独的typescript定义文件（如index.d.ts）。

生成代码提示的.d.ts文件

如果你的代码库本身就是用typescript编写的，那么您可以跳过这一步，因为您的代码本身就自带定义文件 如果你使用ES6或者普通的javascript，可以使用jsdoc注释转d.ts的工具。 本文使用的是tsd-jsdoc这个工具，它可以将你为jsdoc写的文档注释，编辑成.d.ts。前提是代码中jsdoc注释符合规范。

代码配置

生成定义文件后，需要在代码中引入该文件的内容

monaco.languages.typescript.javascriptDefaults.addExtraLib(`  
declare namespace App{  
    /**
 * 服务配置对象
 */
declare class ServiceConfig {  
    /**
     * 远程服务器
     * @type {string}
     */
    static server: string;
    /**
     * Rest Api 版本号
     * @type {string}
     */
    static version: string;
    /**
     * 获取token接口
     * @type {string}
     */
    static token: string;
    /**
     * 查询工程接口
     * @type {string}
     */
    static findProject: string;
}
}
`);

定义文件中的注释会成为代码提示的一部分，所以请写明该部分的功能