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

相关推荐
热爱生活的五柒44 分钟前
vscode左边打开文件后会覆盖上一个打开的文件,有什么不覆盖的方法
ide·vscode·编辑器
精英的英1 小时前
【工具开发】适用于交叉编译环境的QT qmake项目转换vscode项目插件
人工智能·vscode·qt·开源软件
嵌入式小能手1 小时前
飞凌嵌入式ElfBoard-Vim编辑器之Vim常用操作命令
linux·编辑器·vim
假装我不帅10 小时前
wsl+vscode开发.net项目
ide·vscode·.net
小蕾Java11 小时前
【VSCode】Visual Studio Code 2025安装包及安装教程 (附所有版本下载)
ide·vscode·编辑器
达子66612 小时前
用Vscode编译正点原子ESP32例程报错:ninja: error: loading ‘build.ninja‘: 系统找不到指定的文件
ide·vscode·编辑器
非凡ghost13 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
热爱生活的五柒13 小时前
vscode如何链接远程服务器里面的docker里面的目录
服务器·vscode·docker
OK_boom15 小时前
visual studio 打开设计时刻抛出异常“未能加载文件或程序集...”的另一解决方法
ide·visual studio
小蕾Java15 小时前
【VSCode】Visual Studio Code 2024安装包及安装教程 (附所有版本下载)
ide·vscode·编辑器