vlambda博客
学习文章列表

哈喽，大家好，我是开源君，一个资深的互联网玩家，致力于为大家分享各领域优质开源项目。

想必大家都用过 LeetCode 刷过一些算法题吧，它提供了一个编辑器供我们编写代码，然后运行来验证代码正不正确。

开源君今天介绍的项目 monaco-editor 是像 LeetCode 一样把编辑器集成到我们的项目中。它可以进行语法检查，代码提示补全等我们平时用的功能，很强大。

项目介绍

这个项目由 VSCode 提供支持，说白了就是我们可以把 VSCode 编辑器集成到项目中。这个编辑器支持多种主流语言，包含了我们常用的 python，Java，JavaScript，C/C++ 等。使用它和我们平时使用的 VSCode 编辑器没什么很大的区别。

项目支持多种编码主题，我们可以根据自己的喜好来选择。

除外，它可以像 git 提交一样进行代码比较，很酷有没有。

最为强大的是，我们还可以定义自己的语法规则。

return {
  keywords: [
    'abstract', 'continue', 'for', 'new', 'switch', 'assert', 'goto', 'do',
    'if', 'private', 'this', 'break', 'protected', 'throw', 'else', 'public',
    'enum', 'return', 'catch', 'try', 'interface', 'static', 'class',
    'finally', 'const', 'super', 'while', 'true', 'false'
  ],
}

安装使用

• 安装

npm install monaco-editor
npm install monaco-editor-webpack-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 = {
 entry: './index.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'app.js'
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
   },
   {
    test: /\.ttf$/,
    use: ['file-loader']
   }
  ]
 },
 plugins: [new MonacoWebpackPlugin()]
};