I'm trying to setup intellisense for jQuery. I have jquery files in another project which is not included into current solution. In my mygrid.js file I define:
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js" />
I see that VS makes request for http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2-vsdoc.js
but intellisense doesn't work. I tried:
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2-vsdoc.js" />
No result as well. I get it working if I copy jquery-1.8.2-vsdoc.js near mygrid.js, include it into project and add
///<reference path="/jquery-1.8.2-vsdoc.js" />
But I don't like such an approach. It forces me to copy junk stuff into every project.
As far as I can tell it's not possible to reference remote javascript files. In fact, all absolute paths in reference directives are ignored according to http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx
If you use the libraries regularly you could save them in a central location on your local machine so that you only have to download them once, then add them to the global javascript intellisense scope as outlined in the 'Smarter JavaScript references' section of http://www.hanselman.com/blog/FeaturesNOONENOTICEDInVisualStudio11ExpressBetaForWeb.aspx.
To summarize, go to Tools | Options | Text Editor | Languages | JavaScript | References, or you just hit Ctrl-Q to bring up the search feature, then type 'references' and click on the 'Text Editor -> JavaScript -> IntelliSense -> References' option. Click the '...' button and browse to the file you want to add, select it and then add it.
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?
What's the best way to disable JavaScript minification in CodeKit? All those *-ck.js files it creates are making a mess of our repository's submodules.
Note that adding a rule to .gitignore doesn't work because its rules aren't inherited by submodules.
In CodeKit Preferences select Languages / JavaScript to edit the default settings for JavaScript handling. (These can be overridden for each file in a project.)
Change the setting for the second processing step (labelled "Then:") from "Concatenate + minifiy" to "Concatenate imported files". For any script file already in the project check whether it already has individual settings which still differ from this new default.
In this case, "*-ck.js"-files should only be created in case a source file imports another for concatenation but not for ordinary script files.
Alternatively you might specify a different output path for the generated ck-Files in CodeKit Preferences / JavaScript / Output Paths in order not to let the generated files clutter the source directory.
I believe the menu has been updated, but the answer from immo still stands. Under Javascript Language settings you can click a dropdown for output style and change it from minified to non-minified.
One workaround is to set the output path to something like codekit-ignore in Preferences > JavaScript > Output Paths, relative to the project's root folder.
Then add /codekit-ignore to .gitignore.
Easy to cleanup and feels better than find . -iregex '.*-ck\.js' -delete.
In the preferences see 'Skipped Items' under 'General' and add *.js to the list.
There are several ways to stop javascript minification in Code Kit but the easiest and simplest way to do so is simple to navigate to the javascript file you wish not to minify in the file view, and configure your Javascript Options to the right hand side.
This method provides benefits such as JSHint & JSLint without the minification and can be configured on a site by site, file by file basis giving you greater control.
Let me know if you have any further issues, i'd be happy to help.
I am trying to create a custom Dojo widget this is how my file structure looks:
customwidget
|
+--nls
| |
| +--en
| |
| +--CustomWidget.js (My localization code)
+--CustomWidget.js (My actual custom widget code)
Now in my code I am writing:
dojo.requireLocalization("customwidget", "CustomWidget", "en");
And to get this localization I write:
dojo.i18n.getLocalization('timeago', "Timeago", "en")
There are quite a few lines of code in my widget and it works with the localization in customwidget > nls > en. But the problem is in my Google Chrome's console following error shows up:
GET http://******/******/******/customwidget/nls/CustomWidget.js 404 (Not Found)
Why does Dojo need the localization code file inside "customwidget > nls" also? Despite the error in console my code runs actually without any problem.
I was going through the Globalization Guidelines, and it says that instead of writing dojo.requireLocalization("my.app", "bar", "zh-cn"); we should use dojo.requireLocalization("my.app", "bar");. Same is the case with dojo.i18n.getLocalization. Why?
For your first question, I'm not entirely certain why it still makes the request (IMO it shouldn't) but dojo is trying to get the default language bundle. It's good practice to have a default bundle at the root of the nls folder, so that something is displayed when a user with an unsupported language browses the page.
For the second question - you should be allowing dojo to choose the correct language bundle, surely if you specify it yourself you'll end up replicating a lot of code deciding which language to use and passing that around.
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