如何使用 Javascript 删除 Monaco Editor 的自动完成功能？答案

【问题标题】：How to remove autocompletions for Monaco Editor using Javascript?如何使用 Javascript 删除 Monaco Editor 的自动完成功能？
【发布时间】：2021-09-10 19:35:02
【问题描述】：

我在我的应用程序中嵌入了 Monaco 编辑器，我有一些 javascript 文件不应该显示“Web”环境的完成（想想 Node.js 或类似的）我希望只为函数和类显示完成页面上定义的。

如何从 javascript 模式中删除所有“Web”自动完成？

【问题讨论】：

标签： monaco-editor

【解决方案1】：

这是一个很好的问题。这个 Github 问题涵盖了相同的主题：https://github.com/Microsoft/monaco-editor/issues/61。

据此，禁用内置库是通过将 noLib 传递给 setCompilerOptions 来完成的：

monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ noLib: true, allowNonTsExtensions: true });

您可以使用 addExtraLib 添加额外的类型，它挂在 javascriptDefaults 之外。 Typescript 提供了一些 d.ts 文件，这些文件提供了 ES5 和 ES6 的基础知识，而没有浏览器的繁琐。下载其中一个并找到一种方法将其包含在您的项目中。您需要将其作为字符串传递。

var coreDefsName = 'lib.es5.d.ts';

// Import the text of your chosen def file.  This will depend on your bundler.
var coreDefs = getResourceString('./' + coreDefsName);

// Register the additional library.
monaco.languages.typescript.javascriptDefaults.addExtraLib(
coreDefs,
coreDefsName
);

【讨论】：

当我设置这个时，它给了我Could not find file: 'inmemory://model/1
这工作：setCompilerOptions({ noLib: true, allowNonTsExtensions: true})
getResourceString 未定义。

【解决方案2】：

除了noLibs，还有另一种方式。您还可以使用 libs 定义您想要的默认库，而无需删除 all 的默认库。例如，您可能仍然需要 ES6 库。

monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
  target: monaco.languages.typescript.ScriptTarget.ES2015,
  lib: ["es6"]
});

来自 CompilerOptions 部分的 Typescript 文档：

注意：

如果未指定 --lib，则注入默认的库列表。这注入的默认库是：对于 --target ES5: DOM,ES5,ScriptHost 对于 --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

您可能想要做的是省略 DOM 库。

确保使用 typescriptDefaults 表示 typescript 语言，使用 typescript.javascriptDefaults 表示 javascript 语言。我认为它们基本上与摩纳哥相当。这让我绊倒了一段时间。

【讨论】：

这不再有效。当设置了这样的选项时，根本不会显示完成项。只有“正在加载...”条目会永久保留。
lib: ["es6"] 仍然包括我的 DOM 定义，但将其更改为 lib: ['es2015'] 工作 typescriptlang.org/tsconfig/#lib

【解决方案3】：

如果你使用这个库在 React JS 中使用它： https://www.npmjs.com/package/@monaco-editor/

从“@monaco-editor/react”导入编辑器

然后你可以写下以下几点来改变编辑的行为：

<Editor
  height="90vh"
  defaultLanguage="javascript"
  defaultValue={code}
  options={{
    quickSuggestions: {
      other: false,
      comments: false,
      strings: false
    },
    parameterHints: {
      enabled: false
    },
    suggestOnTriggerCharacters: false,
    acceptSuggestionOnEnter: "off",
    tabCompletion: "off",
    wordBasedSuggestions: false
  }}
/>

要查看可能的选项列表，请查看IStandaloneEditorConstructionOptions

【讨论】：