Skip to content

带文件树、支持多Tab的monaco-editor,轻量、灵活、可控

Notifications You must be signed in to change notification settings

SEXTEDDY/monaco-with-tree

 
 

Repository files navigation

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>

问题记录

  • 使用vue-cli官方脚手架生成的代码,但是当代码中有 props: {xxx: {type: Array}} 时会报错:token.type.endsWith is not a function错误?需要手动将babel-eslint版本从10.x降为8.x即可解决;

开发与发布

npm i
npm run dev
npm run build

About

带文件树、支持多Tab的monaco-editor,轻量、灵活、可控

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 81.7%
  • JavaScript 13.4%
  • HTML 4.9%