vue3使用monaco编辑器(VSCode网页版)

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 中需要添加的配置,在这篇文章中找到了

核心代码

依赖安装

xml 复制代码
  "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

javascript 复制代码
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

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

组件源码

html 复制代码
<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

html 复制代码
<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>

效果展示

编辑JavaScript代码

实践说明

在运行过程中会提示这个文件大小超过500KB,不过不影响运行

源码下载

monaco使用demo

相关推荐
tan180°4 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
万千思绪8 小时前
【PyCharm 2025.1.2配置debug】
ide·python·pycharm
我在看世界10 小时前
家里vscode连公司内网vscede
vscode·ssh
不想迷路的小男孩12 小时前
Android Studio 中Palette跟Component Tree面板消失怎么恢复正常
android·ide·android studio
AlickLbc13 小时前
在phpstudy环境下配置搭建XDEBUG配合PHPSTORM的调试环境
ide·phpstorm
悠悠小茉莉13 小时前
Win11 安装 Visual Studio(保姆教程 - 更新至2025.07)
c++·ide·vscode·python·visualstudio·visual studio
SZ17011023113 小时前
华为云 银河麒麟 vscode远程连接
ide·vscode·华为云
yanjiee14 小时前
需要scl来指定编译器的clangd+cmake在vscode/cursor开发环境下的配置
ide·vscode·编辑器
Waltt_Qiope18 小时前
关于使用cursor tunnel链接vscode(避免1006 issue的做法)
ide·vscode·issue
Charlene Fung19 小时前
vs code远程自动登录服务器,无需手动输入密码的终极方案(windows版)
运维·服务器·vscode·ssh