无法多次格式化代码

[Zhao-Michael]

https://stackblitz.com/edit/vitejs-vite-rlhxhf?file=src%2Fcomponents%2FEditor.vue、

上面Demo 运行后，多点几次format 按钮，查看控制台有报错

[imguolao]

你代码里给 editorRef 重复赋值了。

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { VueMonacoEditor } from '@guolao/vue-monaco-editor';
import * as monaco from 'monaco-editor';

const content = ref('var i    = 100;');
const editorRef = shallowRef<monaco.editor.IStandaloneCodeEditor>();

// monaco editor 实例
const handleMount = (editor: monaco.editor.IStandaloneCodeEditor | undefined) =>
  (editorRef.value = editor);

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

<template>
  <button @click="formatCode()">Format</button>
  <div style="height: 800px">
    <vue-monaco-editor
<!-- vue component ref -->
      ref="editorRef"
      v-model:value="content"
      language="javascript"
      @mount="handleMount"
    />
  </div>
</template>