How I can enable intellsense in VS Code for custom .js files? This site talks that JavaScript IntellSense already working, but if you want to get more information about code completion you can use
IntelliSense based on type inference
IntelliSense based on JSDoc
IntelliSense based on TypeScript Declaration Files
I don't need more information. Just want to see some suggestions. For example I wrote some function in file a.js. How can i enable intellsense (references to a.js) when I'am working in b.js file.
I used to add /// <reference path="ScriptFile1.js" /> on top of the .js file and it works, I also used to drag and drop the file from the solution explorer to the js file creates this reference line, but It is not working on my current VS version anymore.
More about it here: https://msdn.microsoft.com/en-us/library/bb385682.aspx
Reference Directives
A reference directive enables Visual Studio to
establish a relationship between the script you are currently editing
and other scripts.
The reference directive lets you include a script
file in the scripting context of the current script file. This enables
IntelliSense to reference externally defined functions, types, and
fields as you code. You create a reference directive in the form of an
XML comment.
The directive must be declared earlier in the file than
any script.
A reference directive can include a disk-based script
reference, an assembly-based script reference, a service-based script
reference, or a page-based script reference.
The following example
shows examples of using disk-based reference directives. In the first
example, the language service looks for the file in the same folder
that contains the project file (for example, .jsproj).
/// <reference path="ScriptFile1.js" />
/// <reference path="Scripts/ScriptFile2.js"/>
/// <reference path="../ScriptFile3.js" />
/// <reference path="~/Scripts/ScriptFile4.js" />
Also this article is worth reading for some other ideas: https://madskristensen.net/post/the-story-behind-_referencesjs
Related
I'm trying to get Visual Studio Code 0.3.0 to recognize my JavaScript libraries. However, intellisense is complaining. Here's a repro:
Open Visual Studio Code
File > Open Folder (select a freshly created empty folder)
Add a file mytest.js to that folder
Download jquery-2.1.4.js (full/uncompressed) to that folder (appears in the side bar)
Enter this in mytest.js:
var x = jQuery('body');
Result: squiggly green lines under jQuery. Note that jQuery is just an example, I've had the same issue with libraries such as KnockoutJS and QUnit, etc.
I've tried adding a triple-slash reference like so:
/// <reference path="jquery-2.1.4.js" />
Heck, it even autocompleted the path for me. I've tried varying the path a bit, e.g. a ./ at the start, but the result is thus far invariably:
Hovering jQuery gives a popup saying:
Cannot find name 'jQuery'.
any
Still squiggly green lines. I hate squiggly lines though. How can I get rid of them?
You Need To Refefence the jQuery TypeScript Definition File.
You need a 'typings' folder in the root of your app or site. Within the 'typings' folder you need a jquery.d.ts file.
Your reference to the file should be similar to the following depending upon where the file reference is located in relation to the typings/jquery.d.ts file and folder:
/// <reference path="../../typings/jquery/jquery.d.ts"/>
Here's a TypeScript Definitions File reference for Node.js:
/// <reference path="typings/node/node.d.ts"/>
The easiest way to accomplish this is to click on the green squiggly in VSCode then click the light bulb and select Add /// reference to 'XYZ.d.ts'. This will automatically add everything you need.
In a comment above the Definitely Typed web site was referenced if you want or need to do this manually.
I don't know about VS Code, but regular Visual Studio often complains when you try to access "global" variables like this. I find that this pattern helps me to both avoid these warnings and keep my code more modular:
(function($) {
var x = $('body');
})(jQuery);
This has the added advantages of keeping your declared variables (x, e.g.) scoped within the file instead of globally, and allowing you to safely use short names (e.g. $) for your libraries internally, while avoiding naming conflicts. It also opens up an easy migration path if you end up needing to use requireJS or something like that for dependency loading.
Hopefully it will also get rid of your green squigglies?
I am trying to document a javascript function in Visual Studio 2013. The particular function has a parameter of type jQuery, but IntelliSense is not picking up on the type, even though I have the vsdoc.js file referenced earlier in the file. Here is my code:
Early in file
/// <reference path="path_to_vsdoc/jquery-1.10.2-vsdoc.js" />
Later
/// <param name="dep" type="jQuery">The dependent element as a jQuery selector.</param>
function myfunction(dep) { ... }
When I type dep. VS gives me a message "IntelliSense was unable to determine an accurate completion list for this expression. The provided list contains all identifiers in the file. What I'm wondering is whether I can use types defined in my referenced files (i.e. jquery-1.10.2-vsdoc.js). "jQuery" is used as a type in the vsdoc file.
Thanks for the help!
Edit:
Turns out I'm silly and you have to put your function documentation inside the function.
I will start by first asking 2 questions so If anyone knows it doesn't have to read this long post:
But how do I suppress enormous list of undesired items in IntelliSense list for a custom JavaScript file (be it .js or .ts - typescript with compilation)?
How can I fine control what I would need? _references.js seems like a good starting point (for global reference)
Can anybody explain how .validate-vsdoc.js and .intellisense.js and ///
When I watched Mads Kristensen's video Visual Studio: C# class Intellisense in JavaScript/TypeScript
I noticed that Mads' Intellisense for his "data" JavaScript variable shows a nice, short list of objects, functions and properties relating to the current context.
I use defaults from VS 2013 MVC project.
Mine shows a much longer list making Intellisense almost useless:
In my _references.js I have this (which Mats I suppose have as well)
/// <autosync enabled="true" />
/// <reference path="modernizr-2.6.2.js" />
/// <reference path="jquery-1.10.2.js" />
/// <reference path="bootstrap.js" />
/// <reference path="respond.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="rads.js" />
/// <reference path="../models/accountviewmodels.cs.js" />
In my JavaScript IntelliSense References section for Implicit (Web) Reference Group
I have defaults:
libhelp.js
sitetypesWeb.js
domWeb.js
underscorefilter.js
showPlainComments.js
~/Script/_references.js
All files (except _references.js) are located in this folder (nothing significant about them):
C:\Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\References\
As you can see from the second image I am getting some method IntelliSense from these files:
Dhtml.js
EcmaScript.js
ecma.js
But where do these properties and methods come from:
$1, $2, ..., $10
ABORT_ERR, ALIASED_LINE_WIDTH_RANGE, ....
When searching the Internet I found Google closure-compiler's file: webgl.js which contains many of these upper cased properties.
I know that JavaScript IntelliSense article talks about how JavaScripts IntelliSense lists the objects, functions, properties, and parameters that are available based on your current context and Extending JavaScript IntelliSense article talks about extending IntelliSense further.
But how do I suppress enormous list of undesired items in IntelliSense list for a custom JavaScript file (be it .js or .ts - typescript with compilation)?
How can I fine control what I would need? _references.js seems like a good starting point (for global reference)
Can anybody explain how .validate-vsdoc.js and .intellisense.js and ///
I am MAD when I see Mads is doing good :)
Thanks,
Rad
I guess this has something to do with the ReSharper extension and its IntelliSense settings which override Visual Studio's IntelliSense settings.
dhtml.js, for example, is an internal ReSharper file where all standard browser objects and properties are declared. At lest the top X properties/methods in your IntelliSense dropdown dialog are picked up from this file.
Do you have ReSharper installed by any chance? If so try the following steps
Disable javascript intellisense in the ReSharper options dialog.
Explicitly enable Visual Studio's javascript intellisense. (ReSharper would have disabled this option by default).
Restart Visual Studio.
You should now have concise and compact intellisense hint lists.
To improve your intellisense experience, open solution explorer and add a new js file '_reference.js' to the scripts folder. Open this file (with VS), right click anywhere and enable the autosync option.
I moved the jQuery in my project over to Microsoft's CDN yesterday so finally have jQuery intellisense back. Yay! However, I apparently need to include the following in all my .js files:
//These references should enable intellisense within this file
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js" />
///<reference path="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js" />
I would prefer to have a single js file which contains the above references such that I have a single, unchanging reference in all my js files like so:
//These references should enable intellisense within this file
///<reference path="/shared/js/stdafx.js" />
The idea is that stdafx.js would be the file containing the jQuery references. Then I have only one place to update the versions or add additional references. I gave it a quick go, but it didn't seem to work. Can anyone figure out a way to make this happen?
Actually the above common reference did work in the end. I didn't realize how quirky VS was in regards to js intellisense. Funny enough it kicked in after compiling the project.
I did try Ctrl-Shift-J which refreshes the JavaScript as well. It takes a few seconds for it to kick in so give it a chance. Another tip I read was dragging the common.js file into the editor of the .js file I wanted to add the common reference to. This sanity check ensured I had the correct path (it did). It added a relative path (../shared/stdafx.js) but I was able to use an absolute path (/shared/js/stdafx.js) which means I can modify the VS .js template for new js files.
So I would suggest anyone who comes across this question to persevere, refresh the JavaScript, compile, even close and reopen VS as it will hopefully kick in for you eventually.
For anyone still wanting jQuery intellisense in their .js files (and why wouldn't you) you need to 'reference' the correct jQuery VSDOC file, that MS created for Visual Studio intellisense:
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2-vsdoc.js" />
To test it, type:
$(
You should see full intellisense with PARAMETERS, as well as members. If you only see a single list of members, it's not working.
I have a JavaScript class that I have made and put it into its own .js file. When I reference the the file from a web page and create an instance of that class there is no intellisense telling me the methods\variables available, it just show constructor as the only method. But when I copy the class and past it straight into the web page the intellisense works just fine.
Does any one know what the problem might be?
You need to add reference on the top of your javascript file:
/// <reference path="yourJSfile.js" />
And then you have to refresh intellisense:
Menu Edit -> intellisense -> update jscript intellisense