如何在 @monaco-editor/react 中单击按钮来格式化代码

问题描述 投票:0回答:1

当用户单击

show code
按钮时如何格式化摩纳哥编辑器内的代码?我已经尝试过
formatOnPaste: true
但当您以编程方式更新代码(使用 useState)时它似乎不起作用

这里是演示(请务必单击

show code
按钮)

import Editor from "@monaco-editor/react";
import { useState } from "react";


export default function App() {
  const [code, setCode] = useState("");

  const handleShowCodeClick = () => {
    const newCode = "const consoleText = (text) => {console.log(text)}";
    setCode(newCode);
  };
  
  return (
    <div>
      <Editor
        value={code}
        height="500px"
        theme="vs-dark"
        options={{
          formatOnPase: true
        }}
        language="javascript"
        onChange={(newCode) => setCode(newCode as string)}
      />
      <button onClick={handleShowCodeClick}>Show code</button>
    </div>
  );
}

实际结果:

const consoleText = (text) => {console.log(text)}

预期结果:

const consoleText = (text) => {
  console.log(text)
}
javascript reactjs monaco-editor
1个回答
0
投票

分享此内容,以防有人正在使用

monaco-editor/react
并希望使用按钮格式化编辑器内容。

我使用这样的方法很幸运:

  const handleEditorDidMount = (editor, monaco) => {
    monacoRef.current = editor;

    setTimeout(() => {
      monacoRef.current.hb.get('editor.action.formatDocument').b();
    }, 1000);
  };
  <Editor
    // props
    onMount={handleEditorDidMount}
  />

我使用此方法将

ref
传递给具有按钮的不同组件;然后以同样的方式调用该函数。

© www.soinside.com 2019 - 2024. All rights reserved.