摩纳哥编辑器反应自动完成不起作用

Question

我有一个名为 tf.d.ts 的文件，其中包含打字稿中的所有定义，我想将其作为自动完成材料添加到摩纳哥编辑器中。无论我尝试什么，它仍然无法正常工作。自动完成不起作用。

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import Editor from "@monaco-editor/react";
import * as me from "monaco-editor"

function TensorFlowEditor({ tfjsLib }) {
  const editorRef = useRef(null);

  async function handleEditorDidMount(editor, monaco) {
    editorRef.current = editor;
    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: true,
      noSyntaxValidation: false,
    });

    // compiler options
    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.ES2015,
      allowNonTsExtensions: true,
    });
    monaco.languages.typescript.javascriptDefaults.addExtraLib(tfjsLib, "ts:filename/tfjs.d.ts");
    console.log(monaco.languages.typescript.javascriptDefaults.addExtraLib.toString())
  }

  function runCode() {
    const tf = require('@tensorflow/tfjs');
    console.log(eval(editorRef.current.getValue()))

  }
  let defaultCode = `
  
// Define a model for linear regression.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Generate some synthetic data for training.
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// Train the model using the data.
model.fit(xs, ys, {epochs: 10}).then(() => {
  // Use the model to do inference on a data point the model hasn't seen before:
  model.predict(tf.tensor2d([5], [1, 1])).print();
  // Open the browser devtools to see the output
});

  `
  return (
    <>
      <button onClick={runCode}>Run Code</button>
      <Editor
        height="90vh"
        defaultLanguage="javascript"
        defaultValue={defaultCode}
        theme="vs-dark"
        onMount={handleEditorDidMount}
      />
    </>
  );
}
export default TensorFlowEditor

export async function getStaticProps() {
  var fs = require("fs")
  var path = require("path")
  const currentDir = path.join(process.cwd(), 'public');
  const fileContents = fs.readFileSync(currentDir + '/tf.d.ts', 'utf8');
  return {
    props: {
      tfjsLib: fileContents
    }
  }
}

我希望自动完成能够工作。我试图更改为 typescriptDefault，我试图在 typescript 和 javascript 之间更改语言，我尝试没有最后一个路径参数。文件被正确读取，我检查了 console.log，我尝试使用标签 useLib=false, true.

Answer 1

我遇到了完全相同的问题。我不是 100% 确定为什么这不像文档所说的那样工作，而是使用

addExtraLib

方法，而不是使用

createModel

方法对我有用。

monaco.editor.createModel(`declare const myname: () => "garrett"`, 'typescript', monaco.Uri.parse('./types.d.ts'))

使用这种方法，我能够让 Intellisense 注册我的类型并提供自动完成功能。我发现在 Monaco 中查看文件时，类型会起作用，所以我沿着使用

types.d.ts

文件作为默认路径初始化编辑器的路径，然后切换到我的主文件。不过，这感觉真的很糟糕。

我还应该提到我正在使用https://github.com/react-monaco-editor/react-monaco-editor

对于遇到此问题的任何人来说，另一个潜在的有用的东西。在我的情况下，我正在努力让全局类型与 Jest/test 文件和 Monaco 一起工作，并且在安装后使用

createModal

方法后，我能够获得自动完成和建议。下面的反应示例。

import Editor from '@monaco-editor/react'

const MyEditor = () => {

  const handleEditorWillMount = (editor, monaco: Monaco) => {
    monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true)

    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: true,
      noSyntaxValidation: false,
    })

    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.ES2016,
      allowNonTsExtensions: true,
      allowJs: true,
      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
      module: monaco.languages.typescript.ModuleKind.ESNext
    })

    // THIS IS WHAT GOT AUTO COMPLETION WORKING FOR ME
    // In my actual file, I replace the first argument with the `@types/jest` declaration file
    monaco.editor.createModel('declare const myname: () => "garrett"', 'typescript', monaco.Uri.parse('./types.d.ts'))
  }

  return (
   <Editor
     defaultLanguage="typescript"
     defaultValue={file}
     onChange={(value) => handleFileInput(fileName, value ?? '')}
     path={fileName}
     theme="vs-dark"
     options={{
       minimap: {
         enabled: false,
       },
     }}
     className="h-100"
     onMount={handleEditorWillMount}/>
  )
}