Adding JavaScript type hints for VSCode/Monaco Intellisence
Is there a way to hint to VSCode/Monaco's intellisense the types of variables.
I have some code like this
var loc = window.location;
var gl = context1.getContext("webgl");
var ctx = context2.getContext("2d");
I see that VSCode knows that loc is a URL
But it doesn't know what gl is
Nor does it know what ctx is
Which makes sense, having a function return different types based on its input is a somewhat unusual case.
But it does have type data for WebGLRenderingContext
and it knows CanvasRenderingContext2D
Is there a way to for me to tell vscode/monaco that gl is an instance of WebGLRenderingContext and that ctx is an instance of CanvasRenderingContext2D without having to switch to typescript? Maybe by adding some kind of comment?
I need the solution to work in monaco (which at least in my tests shows all the same completions) because this is for a WebGL tutorial site, not actually for VSCode but I'm hoping the solution is the same.
javascript intellisense visual-studio-code monaco-editor
asked Sep 26 '16 at 3:46
gman
46.1k17110198
add a comment |
Is there a way to hint to VSCode/Monaco's intellisense the types of variables.
I have some code like this
var loc = window.location;
var gl = context1.getContext("webgl");
var ctx = context2.getContext("2d");
I see that VSCode knows that loc is a URL
But it doesn't know what gl is
Nor does it know what ctx is
Which makes sense, having a function return different types based on its input is a somewhat unusual case.
But it does have type data for WebGLRenderingContext
and it knows CanvasRenderingContext2D
Is there a way to for me to tell vscode/monaco that gl is an instance of WebGLRenderingContext and that ctx is an instance of CanvasRenderingContext2D without having to switch to typescript? Maybe by adding some kind of comment?
I need the solution to work in monaco (which at least in my tests shows all the same completions) because this is for a WebGL tutorial site, not actually for VSCode but I'm hoping the solution is the same.
javascript intellisense visual-studio-code monaco-editor
asked Sep 26 '16 at 3:46
gman
46.1k17110198
1
JSDoc works in Monaco since version 0.90. See stackoverflow.com/a/45181853/2102158.
– Jon N
Jul 19 '17 at 5:46
add a comment |
Is there a way to hint to VSCode/Monaco's intellisense the types of variables.
I have some code like this
var loc = window.location;
var gl = context1.getContext("webgl");
var ctx = context2.getContext("2d");
I see that VSCode knows that loc is a URL
But it doesn't know what gl is
Nor does it know what ctx is
Which makes sense, having a function return different types based on its input is a somewhat unusual case.
But it does have type data for WebGLRenderingContext
and it knows CanvasRenderingContext2D
Is there a way to for me to tell vscode/monaco that gl is an instance of WebGLRenderingContext and that ctx is an instance of CanvasRenderingContext2D without having to switch to typescript? Maybe by adding some kind of comment?
I need the solution to work in monaco (which at least in my tests shows all the same completions) because this is for a WebGL tutorial site, not actually for VSCode but I'm hoping the solution is the same.
javascript intellisense visual-studio-code monaco-editor
asked Sep 26 '16 at 3:46
gman
46.1k17110198
Is there a way to hint to VSCode/Monaco's intellisense the types of variables.
I have some code like this
var loc = window.location;
var gl = context1.getContext("webgl");
var ctx = context2.getContext("2d");
I see that VSCode knows that loc is a URL
But it doesn't know what gl is
Nor does it know what ctx is
Which makes sense, having a function return different types based on its input is a somewhat unusual case.
But it does have type data for WebGLRenderingContext
and it knows CanvasRenderingContext2D
Is there a way to for me to tell vscode/monaco that gl is an instance of WebGLRenderingContext and that ctx is an instance of CanvasRenderingContext2D without having to switch to typescript? Maybe by adding some kind of comment?
I need the solution to work in monaco (which at least in my tests shows all the same completions) because this is for a WebGL tutorial site, not actually for VSCode but I'm hoping the solution is the same.
javascript intellisense visual-studio-code monaco-editor
javascript intellisense visual-studio-code monaco-editor
asked Sep 26 '16 at 3:46
gman
46.1k17110198
asked Sep 26 '16 at 3:46
gman
46.1k17110198
edited Sep 26 '16 at 3:51
asked Sep 26 '16 at 3:46
gman
46.1k17110198
asked Sep 26 '16 at 3:46
gman
46.1k17110198
asked Sep 26 '16 at 3:46
gman
46.1k17110198
46.1k17110198
1
JSDoc works in Monaco since version 0.90. See stackoverflow.com/a/45181853/2102158.
– Jon N
Jul 19 '17 at 5:46
add a comment |
1
JSDoc works in Monaco since version 0.90. See stackoverflow.com/a/45181853/2102158.
– Jon N
Jul 19 '17 at 5:46
1
1
JSDoc works in Monaco since version 0.90. See stackoverflow.com/a/45181853/2102158.
– Jon N
Jul 19 '17 at 5:46
JSDoc works in Monaco since version 0.90. See stackoverflow.com/a/45181853/2102158.
– Jon N
Jul 19 '17 at 5:46
add a comment |
3 Answers
3
active
oldest
votes
Update: As of 0.9.0 of Monaco these type annotations now work
Is see that JSDoc style type annotations work in VSCode though they don't appear to work in Monaco.
var loc = window.location;
/** @type {WebGLRenderingContext} */
var gl = context1.getContext("webgl");
/** @type {CanvasRenderingContext2D} */
var ctx = context2.getContext("2d");
answered Sep 26 '16 at 3:58
gman
46.1k17110198
This technique doesn't appear to work for imported types. e.g.,var Foo = require("foo"); /** @type {Foo} */ var foo;In this example,Foois a type that VSCode recognizes and has full intellisense on. If instead you dovar Foo = require("foo"); var foo = new Foo();everything works. Any pro-tips to make this work correctly with imported types?
– Micah Zoltu
Mar 3 '17 at 20:22
@MicahZoltu I had a similar issue annotating types from the Express library. I found how to make this work and posted an additional answer on this question. stackoverflow.com/a/48752318/1359579
– DannyMeister
Feb 12 at 17:39
add a comment |
As Micah pointed out in a comment on the accepted answer, there can still be issues with external modules. Simply doing a require of the module will already enable jsdoc type annotations to work if the library defines a global object from which you can reference the types. Otherwise, you can mimic this by importing everything and mapping it to your own name.
import * as Foo from 'foo'
/** @type {Foo.Foo} */
var foo;
https://github.com/Microsoft/TypeScript/issues/8237#issuecomment-213047062
answered Feb 12 at 17:37
DannyMeister
7141715
add a comment |
If you are willing to use Typescript, you can do this:
var gl : WebGLRenderingContext;
answered Jan 11 '17 at 4:25
Doug
4,79184066
Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
– gman
Jan 12 '17 at 4:06
@gman Well typescript is pretty similar to javascript. much of it is very similar to javascript, very easy to convert over
– kinger6621
Feb 25 at 22:29
1
@kinger6621 Nope, it's no easy: once that you are in TypeScript everything is "typed", and you must do follow with that.
– 0zkr PM
Sep 23 at 3:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39694407%2fadding-javascript-type-hints-for-vscode-monaco-intellisence%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Update: As of 0.9.0 of Monaco these type annotations now work
Is see that JSDoc style type annotations work in VSCode though they don't appear to work in Monaco.
var loc = window.location;
/** @type {WebGLRenderingContext} */
var gl = context1.getContext("webgl");
/** @type {CanvasRenderingContext2D} */
var ctx = context2.getContext("2d");
answered Sep 26 '16 at 3:58
gman
46.1k17110198
This technique doesn't appear to work for imported types. e.g.,var Foo = require("foo"); /** @type {Foo} */ var foo;In this example,Foois a type that VSCode recognizes and has full intellisense on. If instead you dovar Foo = require("foo"); var foo = new Foo();everything works. Any pro-tips to make this work correctly with imported types?
– Micah Zoltu
Mar 3 '17 at 20:22
@MicahZoltu I had a similar issue annotating types from the Express library. I found how to make this work and posted an additional answer on this question. stackoverflow.com/a/48752318/1359579
– DannyMeister
Feb 12 at 17:39
add a comment |
Update: As of 0.9.0 of Monaco these type annotations now work
Is see that JSDoc style type annotations work in VSCode though they don't appear to work in Monaco.
var loc = window.location;
/** @type {WebGLRenderingContext} */
var gl = context1.getContext("webgl");
/** @type {CanvasRenderingContext2D} */
var ctx = context2.getContext("2d");
answered Sep 26 '16 at 3:58
gman
46.1k17110198
This technique doesn't appear to work for imported types. e.g.,var Foo = require("foo"); /** @type {Foo} */ var foo;In this example,Foois a type that VSCode recognizes and has full intellisense on. If instead you dovar Foo = require("foo"); var foo = new Foo();everything works. Any pro-tips to make this work correctly with imported types?
– Micah Zoltu
Mar 3 '17 at 20:22
@MicahZoltu I had a similar issue annotating types from the Express library. I found how to make this work and posted an additional answer on this question. stackoverflow.com/a/48752318/1359579
– DannyMeister
Feb 12 at 17:39
add a comment |
Update: As of 0.9.0 of Monaco these type annotations now work
Is see that JSDoc style type annotations work in VSCode though they don't appear to work in Monaco.
var loc = window.location;
/** @type {WebGLRenderingContext} */
var gl = context1.getContext("webgl");
/** @type {CanvasRenderingContext2D} */
var ctx = context2.getContext("2d");
answered Sep 26 '16 at 3:58
gman
46.1k17110198
Update: As of 0.9.0 of Monaco these type annotations now work
Is see that JSDoc style type annotations work in VSCode though they don't appear to work in Monaco.
var loc = window.location;
/** @type {WebGLRenderingContext} */
var gl = context1.getContext("webgl");
/** @type {CanvasRenderingContext2D} */
var ctx = context2.getContext("2d");
answered Sep 26 '16 at 3:58
gman
46.1k17110198
edited Jan 27 at 12:13
answered Sep 26 '16 at 3:58
gman
46.1k17110198
answered Sep 26 '16 at 3:58
gman
46.1k17110198
answered Sep 26 '16 at 3:58
gman
46.1k17110198
46.1k17110198
This technique doesn't appear to work for imported types. e.g.,var Foo = require("foo"); /** @type {Foo} */ var foo;In this example,Foois a type that VSCode recognizes and has full intellisense on. If instead you dovar Foo = require("foo"); var foo = new Foo();everything works. Any pro-tips to make this work correctly with imported types?
– Micah Zoltu
Mar 3 '17 at 20:22
@MicahZoltu I had a similar issue annotating types from the Express library. I found how to make this work and posted an additional answer on this question. stackoverflow.com/a/48752318/1359579
– DannyMeister
Feb 12 at 17:39
add a comment |
This technique doesn't appear to work for imported types. e.g.,var Foo = require("foo"); /** @type {Foo} */ var foo;In this example,Foois a type that VSCode recognizes and has full intellisense on. If instead you dovar Foo = require("foo"); var foo = new Foo();everything works. Any pro-tips to make this work correctly with imported types?
– Micah Zoltu
Mar 3 '17 at 20:22
@MicahZoltu I had a similar issue annotating types from the Express library. I found how to make this work and posted an additional answer on this question. stackoverflow.com/a/48752318/1359579
– DannyMeister
Feb 12 at 17:39
This technique doesn't appear to work for imported types. e.g.,
var Foo = require("foo"); /** @type {Foo} */ var foo; In this example, Foo is a type that VSCode recognizes and has full intellisense on. If instead you do var Foo = require("foo"); var foo = new Foo(); everything works. Any pro-tips to make this work correctly with imported types?– Micah Zoltu
Mar 3 '17 at 20:22
This technique doesn't appear to work for imported types. e.g.,
var Foo = require("foo"); /** @type {Foo} */ var foo; In this example, Foo is a type that VSCode recognizes and has full intellisense on. If instead you do var Foo = require("foo"); var foo = new Foo(); everything works. Any pro-tips to make this work correctly with imported types?– Micah Zoltu
Mar 3 '17 at 20:22
@MicahZoltu I had a similar issue annotating types from the Express library. I found how to make this work and posted an additional answer on this question. stackoverflow.com/a/48752318/1359579
– DannyMeister
Feb 12 at 17:39
@MicahZoltu I had a similar issue annotating types from the Express library. I found how to make this work and posted an additional answer on this question. stackoverflow.com/a/48752318/1359579
– DannyMeister
Feb 12 at 17:39
add a comment |
As Micah pointed out in a comment on the accepted answer, there can still be issues with external modules. Simply doing a require of the module will already enable jsdoc type annotations to work if the library defines a global object from which you can reference the types. Otherwise, you can mimic this by importing everything and mapping it to your own name.
import * as Foo from 'foo'
/** @type {Foo.Foo} */
var foo;
https://github.com/Microsoft/TypeScript/issues/8237#issuecomment-213047062
answered Feb 12 at 17:37
DannyMeister
7141715
add a comment |
As Micah pointed out in a comment on the accepted answer, there can still be issues with external modules. Simply doing a require of the module will already enable jsdoc type annotations to work if the library defines a global object from which you can reference the types. Otherwise, you can mimic this by importing everything and mapping it to your own name.
import * as Foo from 'foo'
/** @type {Foo.Foo} */
var foo;
https://github.com/Microsoft/TypeScript/issues/8237#issuecomment-213047062
answered Feb 12 at 17:37
DannyMeister
7141715
add a comment |
As Micah pointed out in a comment on the accepted answer, there can still be issues with external modules. Simply doing a require of the module will already enable jsdoc type annotations to work if the library defines a global object from which you can reference the types. Otherwise, you can mimic this by importing everything and mapping it to your own name.
import * as Foo from 'foo'
/** @type {Foo.Foo} */
var foo;
https://github.com/Microsoft/TypeScript/issues/8237#issuecomment-213047062
answered Feb 12 at 17:37
DannyMeister
7141715
As Micah pointed out in a comment on the accepted answer, there can still be issues with external modules. Simply doing a require of the module will already enable jsdoc type annotations to work if the library defines a global object from which you can reference the types. Otherwise, you can mimic this by importing everything and mapping it to your own name.
import * as Foo from 'foo'
/** @type {Foo.Foo} */
var foo;
https://github.com/Microsoft/TypeScript/issues/8237#issuecomment-213047062
answered Feb 12 at 17:37
DannyMeister
7141715
answered Feb 12 at 17:37
DannyMeister
7141715
answered Feb 12 at 17:37
DannyMeister
7141715
answered Feb 12 at 17:37
DannyMeister
7141715
7141715
add a comment |
add a comment |
If you are willing to use Typescript, you can do this:
var gl : WebGLRenderingContext;
answered Jan 11 '17 at 4:25
Doug
4,79184066
Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
– gman
Jan 12 '17 at 4:06
@gman Well typescript is pretty similar to javascript. much of it is very similar to javascript, very easy to convert over
– kinger6621
Feb 25 at 22:29
1
@kinger6621 Nope, it's no easy: once that you are in TypeScript everything is "typed", and you must do follow with that.
– 0zkr PM
Sep 23 at 3:21
add a comment |
If you are willing to use Typescript, you can do this:
var gl : WebGLRenderingContext;
answered Jan 11 '17 at 4:25
Doug
4,79184066
Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
– gman
Jan 12 '17 at 4:06
@gman Well typescript is pretty similar to javascript. much of it is very similar to javascript, very easy to convert over
– kinger6621
Feb 25 at 22:29
1
@kinger6621 Nope, it's no easy: once that you are in TypeScript everything is "typed", and you must do follow with that.
– 0zkr PM
Sep 23 at 3:21
add a comment |
If you are willing to use Typescript, you can do this:
var gl : WebGLRenderingContext;
answered Jan 11 '17 at 4:25
Doug
4,79184066
If you are willing to use Typescript, you can do this:
var gl : WebGLRenderingContext;
answered Jan 11 '17 at 4:25
Doug
4,79184066
answered Jan 11 '17 at 4:25
Doug
4,79184066
answered Jan 11 '17 at 4:25
Doug
4,79184066
answered Jan 11 '17 at 4:25
Doug
4,79184066
4,79184066
Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
– gman
Jan 12 '17 at 4:06
@gman Well typescript is pretty similar to javascript. much of it is very similar to javascript, very easy to convert over
– kinger6621
Feb 25 at 22:29
1
@kinger6621 Nope, it's no easy: once that you are in TypeScript everything is "typed", and you must do follow with that.
– 0zkr PM
Sep 23 at 3:21
add a comment |
Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
– gman
Jan 12 '17 at 4:06
@gman Well typescript is pretty similar to javascript. much of it is very similar to javascript, very easy to convert over
– kinger6621
Feb 25 at 22:29
1
@kinger6621 Nope, it's no easy: once that you are in TypeScript everything is "typed", and you must do follow with that.
– 0zkr PM
Sep 23 at 3:21
Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
– gman
Jan 12 '17 at 4:06
Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
– gman
Jan 12 '17 at 4:06
@gman Well typescript is pretty similar to javascript. much of it is very similar to javascript, very easy to convert over
– kinger6621
Feb 25 at 22:29
@gman Well typescript is pretty similar to javascript. much of it is very similar to javascript, very easy to convert over
– kinger6621
Feb 25 at 22:29
1
1
@kinger6621 Nope, it's no easy: once that you are in TypeScript everything is "typed", and you must do follow with that.
– 0zkr PM
Sep 23 at 3:21
@kinger6621 Nope, it's no easy: once that you are in TypeScript everything is "typed", and you must do follow with that.
– 0zkr PM
Sep 23 at 3:21
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39694407%2fadding-javascript-type-hints-for-vscode-monaco-intellisence%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
JSDoc works in Monaco since version 0.90. See stackoverflow.com/a/45181853/2102158.
– Jon N
Jul 19 '17 at 5:46