Monaco-with-tree NPM

monaco-with-tree

带文件树、支持多Tab的monaco-editor，轻量、灵活、可控，基于以下开源组件轻量封装而来：

推荐在多文件展示和多文件diff场景使用，提供基本的多文件编辑场景，有高级诉求的场景可以直接fork代码进行二次修改。

使用方法

<style lang="scss">
.test-demo {
    height: 90vh;
}
</style>
<template>
    <div class="test-demo">
        <monaco-with-tree
            :files="files"
            :default-open-files="defaultOpenFiles"
            :get-file-content="getFileContent"
        />
    </div>
</template>
<script>
    import MonacoWithTree from 'monaco-with-tree';
    export default {
        components: {
            MonacoWithTree,
        },
        data() {
            return {
                files: ['package.json',  'README.md', 'index.js', 'src/test.js', 'src/index.js', 'public/index.html'],
                defaultOpenFiles: ['package.json'],
            }
        },
        methods: {
            getFileContent(filePath) {
                return [`${filePath}-left`, `${filePath}-right`];
            },
        },
    }
</script>

如果NPM方式加载有问题也可以直接使用script引入（注意不要与amd类似冲突）：

<script src="/assets/MonacoWithTree.umd.min.js"></script>

vue文件：

<template>
    <div class="luyou-code-review-wrapper">
        <monaco-with-tree
            v-if="files.length"
            ref="monacoWithTree"
            :files="files"
            :default-open-files="defaultOpenFiles"
            :get-file-content="getFileContent"
        />
    </div>
</template>
<script>
    export default {
        components: {
            MonacoWithTree: window.MonacoWithTree.default,
        },
    }
</script>