当前位置：首页 > news >正文

vue3使用monaco编辑器（VSCode网页版）

news 2025/7/15 15:46:12

vue3使用monaco编辑器（VSCode网页版）

- 文章说明
- 参考文章
- 核心代码
- 效果展示
- 实践说明
- 源码下载

文章说明

一直在找网页版的编辑器，网页版的VSCode功能很强大，这个monaco就是VSCode样式的编辑器，功能很强大，可以直接使用；它的版本有变更，导致可能vue3使用会报一些小错误，我这里书写一个示例，来简单使用该组件，主要解决 babel.cosfig.js 和 vue.config.js 内缺少配置导致的报错

参考文章

Vue3 集成Monaco Editor编辑器
使用的demo代码是从这里复制过来的，不同的是，这里稍微补充了一下vue3相关的配置，不然会运行报错

Vue3中使用Monaco Editor代码编辑器
这篇文章中提到了 vue.config.js 的配置

vue报错之“ Static class blocks are not enabled. Please add `@babel/plugin-transform-class-static-block”
最后一个 babel.config.js 中需要添加的配置，在这篇文章中找到了

核心代码

依赖安装

  "dependencies": {"core-js": "^3.8.3","monaco-editor": "^0.52.0","monaco-editor-webpack-plugin": "^7.1.0","vue": "^3.2.13"},

vue.config.js

const {defineConfig} = require('@vue/cli-service')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,publicPath: './',configureWebpack: {plugins: [new MonacoWebpackPlugin()]}
})

babel.config.js

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: ["@babel/plugin-transform-private-methods", "@babel/plugin-transform-class-static-block"],
}

组件源码

<script setup>
import * as monaco from 'monaco-editor';
import {onMounted, onUnmounted, ref} from 'vue'const editorContainer = ref();
const editor = ref();onMounted(() => {if (editorContainer.value) {editor.value = monaco.editor.create(editorContainer.value, {value: "",language: 'javascript',theme: 'vs-dark',codeLens: true,folding: true,snippetSuggestions: 'inline',tabCompletion: 'on',foldingStrategy: 'auto',smoothScrolling: true,});editor.value.onDidChangeModelContent(() => {console.log('编辑器内容变更')})}
});onUnmounted(() => {if (editor.value) {editor.value.dispose();}
});
</script><template><div ref="editorContainer" class="container"></div>
</template><style scoped>
.container {width: 100%;height: 100%;
}
</style>

App.vue

<script setup>
import Editor from "@/Editor.vue";
</script><template><div style="width: 100vw; height: 100vh"><Editor/></div>
</template><style>
* {margin: 0;padding: 0;box-sizing: border-box;
}
</style>