How to have intellisense only show 'clean' Javascript?

[jhurdlow]

I have Monaco working with Javascript content on my page, but it's editing JS that is run in the context of a scripting environment that runs on a server (embedded in a .NET project, but it could as well be NodeJS code). So all the browser-specific JS stuff is not there. I don't want things like alert() and screenX, etc... showing in the intellisense since they are not applicable, only 'pure' javascript (+ whatever else I add). Is there a configuration setting to fix this (short of writing my own provider)?

[RoboPhred]

You can do this by disabling the built-in type definition library, then including one of the alternates that typescript provides.

Disabling the built-in library is done by passing noLib to setCompilerOptions:
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ noLib: true });

Once noLib is set, you wont have any typings whatsoever, including javascript primitives. Let's fix that.

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

At the moment, it seems that all extra libs must be registered before the editor is created. Additionally, you cannot remove or change an added lib, even if you use the disposable that addExtraLib returns. This is probably related to https://github.com/Microsoft/monaco-typescript/issues/7

You can play around with this method in the Playground

[jwulf]

I tried this with the editor in TypeScript mode.

This has no effect:

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

This turns off all intellisense and no adding of facts changes that:

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ noLib: true });

[NiloCK]

Similar boat to jwulf here.

javascriptDefaults.setCompilerOptions({noLib: true});

has no effect at all, but

typescriptDefaults.setCompilerOptions({noLib: true});

kills intellisense altogether, including preventing me from adding my own d.ts files via addExtraLib().

After setting typescriptDefaults to noLib: true, I get the following error spit to the console with every keystroke:

columnNumber : 147282
fileName : "http://localhost:3000/vs/editor/editor.main.js"
lineNumber : 31
message : "Could not find file: 'inmemory://model/1'."
name : "Error"
stack : "i@http://localhost:3000/vs/language/typescript/lib/typescriptServices.js:65:21354\nl@http://localhost:3000/vs/language/typescript/lib/typescriptServices.js:65:24515\nd</e.prototype.getSyntacticDiagnostics@http://localhost:3000/vs/language/typescript/src/worker.js:9:2069\nm</e.prototype.fmr@http://localhost:3000/vs/base/worker/workerMain.js#typescript:7:149471\nh</t.prototype._handleMessage@http://localhost:3000/vs/base/worker/workerMain.js#typescript:7:110467\nhandleMessage@http://localhost:3000/vs/base/worker/workerMain.js#typescript:7:110106\nc</e.prototype._handleMessage@http://localhost:3000/vs/base/worker/workerMain.js#typescript:7:108181\nc</e.prototype.handleMessage@http://localhost:3000/vs/base/worker/workerMain.js#typescript:7:107769\nh</t.prototype.onmessage@http://localhost:3000/vs/base/worker/workerMain.js#typescript:7:110172\nn/</</self.onmessage@http://localhost:3000/vs/base/worker/workerMain.js#typescript:7:150794\n"

Any suggestions? I'm working on a programming environment for middle schoolers (Turtle drawing!), and it's pretty distracting to have so much superfluous noise coming at them when they work in the editor. I want intellisense only on my defined Turtle class...

[NiloCK]

To anyone who comes across this thread in the same boat that I was in yesterday, try

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

before adding your extra definitions via addExtraLib().

Cheers

[RoboPhred]

Keep in mind that typescript and javascript modes act with independent settings. In addition, parts of the typescript language attempt to check the file extension you use for your model to determine what language it uses.

You can use typescript mode to process javascript, just remember to set the extension to .js when creating the model, and to allowNonTsExtensions as you discovered.
The extension is particularly important, I recommend creating a new model for your code rather than relying on the built in editor object functions, as that way you can control the name (and virtual file path) to ensure ts is running in the correct mode. Its been a while since I worked on this, but I recall an issue where the non-extension model created by default caused typescript to choose the wrong language mode despite what you try to set the actual language to.

Also keep in mind that the javascript and typescript languages run independently, despite being two instances of the same thing. Calling addExtraLib for one will not make it take effect in the other.

As a general guideline, we got our solution working very well by keeping everything in typescript mode, creating models by hand with the appropriate file name extensions, and allowing non-ts extensions.

[Inventsable]

Hi all. I'm trying to use Monaco for an environment specific to scripting within Adobe applications, and I'm hitting this same issue -- I have no need for any HTML and don't want it to be in the autocompletion. I'm unsure of what I'm doing wrong here:

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

I've tried multiple variations of the above, scaling up to 2018, but I'm completely unable to isolate HTML without also killing certain Array methods. Without specifying noLib, I get Array.prototype methods:

If I specify noLib, even if I include every other object in the target's typescript full file, I instantly lose Array methods:

Would love a solution to this or pointers about what I'm doing wrong

[yln99517]

Hi,
NoLib options the correct one. You can see right answer here #1001

[Inventsable]

Looks like exactly the same problem. Thanks for the link!