Zhengrenzhe

(°∀°)ノ 老打杂了

用户工具

站点工具


前端:monaco-editor:monaco-editor指南-安装

monaco-editor指南-安装

monaco-editor(后文简称monaco)源自VS Code,它是目前地球上最先进的在线代码编辑器,如果只用到一些开箱即用的功能,那与平常使用的JavaScript第三方库没什么区别。但想要在其上做一些复杂的定制开发,相对来说就麻烦一些。之后的文章会探讨在monaco上做定制开发的一些方法。

安装

这部分没什么可多说的,就是平常Web开发的那一套了,为了给后续文章一些环境的上下文,这里列出我的monaco安装配置,使用的技术有TypeScript,SCSS,Webpack。

monaco本身自带有样式及字体,所以即使你不写额外的样式,Webpack也需要包含处理样式及字体的loader,这是我的webpack配置:

const { resolve } = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

const dist = resolve(__dirname, "dist");

module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "[name].[hash].js",
        path: dist,
    },
    resolve: {
        extensions: [".ts", ".js", ".scss"],
    },
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.scss$/i,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            localsConvention: "camelCaseOnly",
                            modules: {
                                localIdentName:
                                    "[path][name]__[local]--[hash:base64:5]",
                            },
                            importLoaders: 2,
                        },
                    },
                    "sass-loader",
                ],
            },
            {
                test: /\.(png|jpe?g|gif|woff2?|ttf)$/,
                use: "file-loader",
            },
        ],
    },
    devServer: {
        port: 3000,
        contentBase: dist,
        hot: true,
    },
    plugins: [
        new MonacoWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: resolve(__dirname, "src/index.html"),
        }),
    ],
};

有一点需要额外说一下,Webpack配置里使用了MonacoWebpackPlugin,它用于帮你打包monaco的language web worker。monaco默认支持TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML。加载了这些worker,在网页上就能有类似于VS Code的语法检查、补全效果,不论你的编辑器是不是要支持这些语言,都推荐使用它。

创建编辑器实例

通过editor.create创建一个编辑器实例,我们可以写一个函数,用于创建编辑器实例。

import { editor } from "monaco-editor";

function createEditor(ele: HTMLElement) {
    const editorInstance = editor.create(ele, {
        automaticLayout: true,
        language: "typescript",
    });
}

export { createEditor };

现在就有了一个在线的typescript编辑器了,得益于前面使用了MonacoWebpackPlugin,创建编辑器时monaco会自动根据配置的语言(通过language字段)加载对应web worker。现在的编辑器已经与VS Code没什么区别了。

同时我们还配置了automaticLayout为true,确保monaco可以根据根结点,也就是参数ele的尺寸变化自动重新布局,这点非常方便,否则就需要手动完成重新布局过程。

目前为止,我们已经有了一个开箱即用的TypeScript编辑器了,接着可以进一步开发了。

前端/monaco-editor/monaco-editor指南-安装.txt · 最后更改: 2020/03/21 12:12 由 zhengrenzhe