Reputation: 15553
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?
Upvotes: 6
Views: 8189
Reputation: 470
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.
Upvotes: 0
Reputation: 437
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
Upvotes: 3
Reputation: 104
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.
Upvotes: 6
Reputation: 4877
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
);
Upvotes: 6