如何自动格式化代码

[UvDream]

求教,这个编辑器如何在初始化的时候格式化代码,而且我发现我这个右键格式化好像也不行是咋肥事,json格式的 我初始化格式代码是这样的

 editorDidMount={(editor) => {
          
                editor.getAction('editor.action.formatDocument').run();
              }}

发现没用

[jaywcjlove]

/**
 * an event emitted when the editor has been mounted (similar to `componentDidMount` of React)
 */
editorDidMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: IMonacoEditor) => void;

getAction 方法存在？

@UvDream

[UvDream]

不存在,我看官方的那个这样格式化的,后来发现不存在,哈哈

[jaywcjlove]

@UvDream 应该是用 monaco 这个回调参数的吧

[NIBUSHIYIGEREN]

同问 该怎么格式化代码呢

[jaywcjlove]

@zhoujiaxu2014 https://github.com/microsoft/monaco-editor/issues/2664#issuecomment-922093401

<MonacoEditor
  language="json"
  value={`{"scope":"/build","moduleGenTarget":"commonjs"}`}
  editorDidMount={(editor, monaco) => {
    // 不起作用，这可能需要通过 ref 获取到 editor 对象执行 格式化
+    editor.getAction('editor.action.formatDocument').run();
  }}
  options={{
+    "formatOnPaste": true,
+    "formatOnType": true
  }}
/>  

@UvDream @zhoujiaxu2014

[dc-orz]

const monaco = useMonaco();
  useEffect(() => {
    if (monaco) {
      monaco.editor.addCommand({
        id: 'editor.action.formatDocument',
        run: () => undefined,
      });
    }
  }, [monaco]);

It works with React 18.0

[xiaopujun]

const monaco = useMonaco();
  useEffect(() => {
    if (monaco) {
      monaco.editor.addCommand({
        id: 'editor.action.formatDocument',
        run: () => undefined,
      });
    }
  }, [monaco]);

It works with React 18.0

This is great. It solves my problem perfectly.