本文将介绍如何在 Vue3 使用 Monaco。

创建 vue3 项目

通过以下命令创建项目，根据提示一步一步创建即可。

npm create vue@latest

除了 Typescript 其他全默认即可。

安装项目依赖

Monaco 开源项目很多，这个项目更新很活跃，用法和 react 也比较类似。

npm i @guolao/vue-monaco-editor

创建组件并初始化

创建 Editor 组件，这里 Width、Height 根据需要进行设置，如果不设置默认大小只有 5px。

<template>
  <vue-monaco-editor
    width="100vw"
    height="100vh"
    v-model:value="code"
    theme="vs-dark"
    :options="MONACO_EDITOR_OPTIONS"
    @mount="handleMount"
  />
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
const MONACO_EDITOR_OPTIONS = {
  automaticLayout: true,
  formatOnType: true,
  formatOnPaste: true
}

const code = ref('// some code...')
const editorRef = shallowRef()
const handleMount = (editor) => (editorRef.value = editor)

// your action
function formatCode() {
  editorRef.value?.getAction('editor.action.formatDocument').run()
}
</script>

总结

启动项目很顺利，没啥坑。代码传到资源中了，有需要可以下载。