monaco-editor/react 中导入包的自动完成和方法描述

Question

我正在尝试使用 @monaco-editor/react 将浏览器内 IDE 添加到 React 应用程序。在代码编辑器中，我希望用户能够导入 Playwright，并且我希望自动完成和语法突出显示对于各种 Playwright 功能和类型都是正确的。无论我如何尝试，我都无法让它发挥作用。我什至无法让编辑器元素不将 Playwright 的导入标记为错误。

在此代码片段中，

codeTemplate

只是编辑器的一组占位符代码，

../../frameworkType/playwright.d.ts

是一个包含安装 playwright-core 时的类型文件的文件。

import Editor, { EditorProps } from "@monaco-editor/react";
import { Box } from "@mui/material";
import { useRef } from "react"
import { codeTemplate } from "../../constants/constants";

// eslint-disable-next-line import/no-webpack-loader-syntax
const playwrightTypings = require("!!raw-loader?esModule=false!../../frameworkTypes/playwright.d.ts");


export const CodeEditor = ({ ...props }: EditorProps) => {
    const monacoRef = useRef(null);

    const types = [
        { name: "playwright", types: playwrightTypings },
    ];

    const handleEditorWillMount = (monaco: any) => {
        types.forEach(module => {
            monaco.languages.typescript.javascriptDefaults.addExtraLib(
                `declare module "${module.name}" {
                    ${module.types}
                }`
            )
        });
    };

    const handleEditorDidMount = (editor: any, monaco: any) => {
        monacoRef.current = editor;
    };
    
    return (
        <Box display="flex">
            <Editor
                height="45vh"
                width="100%"
                language="typescript"
                theme="vs-dark"
                defaultValue={codeTemplate}
                beforeMount={handleEditorWillMount}
                onMount={handleEditorDidMount}
                {...props}
            />
        </Box>
    );
}

任何建议将不胜感激。这几天我一直在用头撞它。

我已经根据这两个资源构建了我尝试的解决方案，但没有运气。

安装软件包并在摩纳哥编辑器上获得自动补全功能

https://blog.checklyhq.com/customizing-monaco/

Answer 1

您的代码中有错误。

在线

monaco.languages.typescript.javascriptDefaults.addExtraLib()

替换

javascriptDefaults

上的

typescriptDefaults

。