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.
Related
I'm using WebStorm 2022.2 (Build #WS-222.3345.108). In an empty new project, I've added the ethers.js project as a custom third-party library. I've added the following HTML file to the project:
<!DOCTYPE html><html lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
/** #type {Contract} */
let contract;
/** #type {ContractTransaction} */
let tx = contract.myMethod();
tx.wait();
</script>
<script src="index.js"></script>
</head>
<body></body></html>
In the embedded script, WebStorm does correctly provide the code-completion facilities for the variables whose types are annotated by the JSDoc; also, all of their corresponding fields and methods are correctly presented by the code-completion, colored appropriately, and Ctrl-Clicking the tokens guides to the declaration points (most of which being in .ts files); even the ContractTransaction, that is a TypeScript interface, a TypeScript concept that JavaScript lacks, works like a charm.
WebStorm does a great job in the HTML file, but when the identical code is put in an external JavaScript file (as in the second <script> tag with the src attribute in the HTML above), WebStorm ignores the TypeScript declarations altogether!
The aforementioned ignorance (ignoring the TypeScript declarations) in the index.js file, causes the following issues:
WebStorm believes the annotated type of Contract (at line 1) is declared in the contracts\lib\index.js file; ignoring the corresponding TypeScript declaration causes WebStorm to not to perceive that the class has an "index signature", which allows its objects to calmly expose any unforeseen properties; thus, it argues at line 4:Unresolved function or method myMethod()
WebStorm complains about the ContractTransaction type annotation at line 3, arguing: Unresolved variable or type 'ContractTransaction' (while it correctly spotted the corresponding declaration in the HTML file!)
Weirdly enough, WebStorm correctly recognizes the declaration of the wait() method at line 5; while in the previous entry, WebStorm argued it couldn't have found the type of ContractTransaction!! (only correctly & uninterestingly for our case, complains that Promise returned from wait is ignored)
So, how to force the WebStorm to utilize the relative TypeScript insights (denoted by the JSDoc type annotations) in an external JavaScript file (to have it consider the TypeScript insights, just like what it did on the HTML file)?
If you're getting weird/incorrect type completions, that might be because WebStorm is downloading type definitions itself to a different directory, which is sometimes the wrong version of the package.
You can disable this by opening the IDE's registry (ctrl+alt+/), and disabling typescript.external.type.definitions. This should force WebStorm to only uses the type definitions from the package that you've actually installed.
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
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 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 am crippled without auto-completion, and when I declare a function that takes 'objects' as arguments instead of the actual types, of course auto-completion cannot work.
Is there some way to do this? I suspect the answer is 'no' - in which case, how do you manage without auto-completion?
Microsoft is working on better code completion in Visual Studio using special, annotated JavaScript source files. This should work great for libraries that are used heavily by lots of programmers.
You can take a look at an annotated version of JQuery here:
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc2.js
The documentation for the attr function e.g. looks like this:
attr: function( name, value, type ) {
/// <summary>
/// Set a single property to a computed value, on all matched elements.
/// Instead of a value, a function is provided, that computes the value.
/// Part of DOM/Attributes
/// </summary>
/// <returns type="jQuery" />
/// <param name="name" type="String">
/// The name of the property to set.
/// </param>
/// <param name="value" type="Function">
/// A function returning the value to set.
/// </param>
..
}
Writing all this XML in your own JavaScript files may however be somewhat overkill.
Well, Visual Studio and Aptana give not pretty advanced Intellisense options but as programming with javascript, the intellisense level they are currently providing is enough for me. Maybe you should check out Aptana Studio. It has free version as well.
Edit :
The best JavaScript editor I know is Aptana for sure. Because it comes with a lot of support for different JavaScript libraries as well. You should download Hotfix update for Visual Studio to have the convenience of jQuery Intellisense but this option works pretty well in Aptana as with other libraries like Prototype,ExtJs, Microsoft, etc.
I have been developing Javascript applications for 5 years now, I have used aptana, visual studio etcetera. I will say that the best tool for the job is IntelliJ. The auto-complete is very rich and intelligent. I also love the Go To Declaration feature, syntax coloring. Syntax check, It feels like using resharper in Javascript.