前言
本文主要记录了用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;
}
}
`);
定义文件中的注释会成为代码提示的一部分,所以请写明该部分的功能