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

Question

I'm embedding the Monaco Editor in my App, I have some javascript files that should not show completions for "Web" environments (think Node.js or similar) I would like to have completions appear for only the functions and classes that are defined on the page.

How do I remove all the "Web" autocompletions from the javascript mode?

Answer 1

This is a great question. This Github issue covers the same topic: https://github.com/Microsoft/monaco-editor/issues/61 .

According to that, disabling the built-in library is done by passing noLib to setCompilerOptions:

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

You can add additional typings by using addExtraLib, which hangs off of the javascriptDefaults. Typescript provides some d.ts files that provide the basics for ES5 and ES6, without the browser cruft. Download one of them and find a way to include it in your project. You will need to pass it in as a string.

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
);

Answer 2

There is another way other than noLibs . You can also use libs to define the default libs you want without removing all of the default libs. For example, you may still want the ES6 lib.

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

From the Typescript docs in the CompilerOptions section:

Note:

If --lib is not specified a default list of libraries are injected. The default libraries injected are: For --target ES5: DOM,ES5,ScriptHost For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

What you probably want to do is omit the DOM library.

Make sure you use typescriptDefaults for the typescript language and typescript.javascriptDefaults for the javascript language. I think they are basically equivalent with Monaco. This had tripped me up for a while.

Answer 3

If you are using it in React JS using this library: https://www.npmjs.com/package/@monaco-editor/

import Editor from "@monaco-editor/react"

Then you can write down below points to make changes in the Editor's behaviours:

<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
  }}
/>

To see the list of possible options please check IStandaloneEditorConstructionOptions

Answer 4

for those that need to disable default libs and provide their libs, you could disable default libs by noLib option

monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
  target: monaco.languages.typescript.ScriptTarget.ES2015,
  noLib: true, 
  allowNonTsExtensions: true,
  checkJs: true,
  strict: true,
  allowJs: true,
});

then go here to download lib that you prefer, reduce file and keep what you want then export file content as a const sring

export const es5String = `interface Array<T> {
/**
 * Returns the value of the first element in the array where predicate is true, and undefined
 * otherwise.
 * @param predicate find calls predicate once for each element of the array, in ascending
 * order, until it finds one where predicate returns true. If such an element is found, find
 * immediately returns that element value. Otherwise, find returns undefined.
 * @param thisArg If provided, it will be used as the this value for each invocation of
 * predicate. If it is not provided, undefined is used instead.
 */
find<S extends T>(predicate: (this: void, value: T, index: number, obj: T[]) => value is S, thisArg?: any): S | undefined;
find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;
.......
.......

finally import that string and use it as custom extra lib, something like this

import { es5String } from "./es5Custom.core"

monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
  target: monaco.languages.typescript.ScriptTarget.ES2015,
  noLib: true, 
  allowNonTsExtensions: true,
  checkJs: true,
  strict: true,
  allowJs: true,
});

monaco.languages.typescript.javascriptDefaults.addExtraLib(
  es5String,
  "filename/es5.d.ts"
);

you could add your custom libs also.