I have been using VSCode for quite a long time and while it's very good, I'm missing intellisense and features that seem to be ES6-only:
I cannot ctrl+click to go to definition
I cannot have a preview of the definition
Here is what I am using:
ES5
Angular JS
All my files are wrapped into a closure, like:
(function() {
angular.module('foo').factory('bar', ['dep1', function(dep1) {
dep1.stuff();
}]);
})();
With that in mind, is it possible to have "goto definition" and other nice VSCode stuff working ? If so, how ?
What can I do to be able to simply click ctrl+click on dep1 and have VSCode open the file where dep1 is defined ?
What I can recommend is that you try to install John Papa's extension for Visual Studio Code for Angular 1.x. It is installed directly through VSCode. You can check some examples of how it works here. It will offer you code completion and it will automate a lot of tasks you frequently do in Angular, such as creating services, controllers, directives...
Btw John Papa is the author of the Angular Style guide and his way of coding could be called "best-practice" in the world of Angular development.
The best way to get intellisense for javascript/typescript is to install typings.
I find that this extension is good with installing typings: https://marketplace.visualstudio.com/items?itemName=benjaminromano.typings-installer
Once you have that installed, you can then launch it (F1 > Typings Installer: Typings > angular) and install the dt~angular typings. from there you should start getting intellisense, go to definition and possibly error checking.
Code should then pick this up (if not just reload the editor). You should then start getting intellisense. If you want to tweak it more, I would suggest looking into jsconfig.json files: https://code.visualstudio.com/docs/languages/jsconfig
You can get general purpose typing information pulled by enabling Synthetic Default Imports in Visual Studio Code.
It lets you get Intellisense either from TypeScript type definitions or by inferenced type information from the JSDoc of many popular repositories.
Here is a tutorial for how to get things set up.
I'm working with .js files. It is a medium sized angular project. I want to goto a definition (a method on a service that i injected on the controller). It doesn't work - nothing happens when i hit F12 or ctrl+click. Even though this works in SublimeText i can't get it to work here. Perhaps the feature is not implemented.
So i check out John Papa's series on VSC
http://johnpapa.net/getting-started-with-visual-studio-code/
And i notice that there is a feature to search for a symbol in "all files". This would solve my problem. It's not as great as goto (with F12) but i can still navigate relatively quickly to the symbol without knowing the name of the file it was declared in.
When i type it, i get nothing. I hit ctrl+p and type # followed by a few letters. I get 'No symbols matching' nomatter what i type. It won't search my folder for some reason?
I do have one error:
and it refers to missing 'angular' element. That element is ofcourse defined in another file and i fail to see how this would break the functionality.
Using version 0.10.1
You need to install typings for angular to get IntelliSense.
First install tsd:
npm install tsd -g
Next inside your project install angular typing
tsd install angular -rs
(s parameter will create tsd.json).
Alternatively install it from VSC itself
Click on angular word and choose Download type definition angular.d.ts
Edit:
"Open symbol by name" works now only for C# and TypeScript. code.visualstudio.com/Docs/editor/editingevolved
According to this post intellisense should also be working on the new VS 2015, but so far I only get intellisense for the angular object and not for the dependencies or my custom modules.
Here's what I did:
Added the angular.intellisense.js to the global javascript references at C:\Program Files (x86)\Microsoft Visual Studio 14.0\JavaScript\References
Restarted VS2015
And then nothing, it just showed exclamation marks whenever I tried to use intellisense on a $http object.
I also added the file to the same place as my angular.js but it still didn't work. The question that I have in this case is, where should I place the file? on the angular public folder with only my angular.js, or on my dev angular folder where all the files downloaded from bower are.
I also tried addind it directly into the tools/options/text editor/javascriptr/intellisense/reference menu, on the Implicit(Web) reference group, but it still didn't work.
On my project I have the following folder structure inside the src folder:
wwwroot
app (my angular site stuff)
controllers
services
views
lib (js dependencies, only the .min.js file of each library)
angular
angular-route
....
_references.js (the visual studio js references file, contains reference to the files inside the app and lib folders)
Libraries (contains the full libraries as downloaded by bower)
angular
angular-route
...
As a side note, I don't have a /scripts folder and therefore no /scripts/_references.js file
.
This was not working for me in Visual Studio 2015 RTM in a web project, but I solved the problem.
This project was not created with Visual Studio and does not have a _references.js file anywhere. So I think this will work in any situation.
I removed all other intellisense resources from within the VS UI to make sure what I did was what fixed it.
Go to https://www.angularjs.org and pull up the download dialog box.
Copy the Uncompressed CDN url. Today that happens to be https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js
In Visual Studio 2015 RTM, go to Tools, Options, Text Editor, Javascript, Intellisense, References. Choose the appropriate Reference Group; for most web project this is Implicit (Web). Paste the url at the bottom text box and click the Add button. Don't dismiss the dialog box yet.
Under Text Editor, Javascript, Intellisense, General, make sure the check box is checked for Download remote references.
Click the OK button.
(optional) If you want intellisense for the angular providers that you create (not part of the angular framework), add _references.js to the root of your project. Don't bother making a Scripts folder. Right click on it and choose auto-sync, then choose update. Go into it and remove any js files created by a build process. If you don't, they can be so large they will break intellisense. Be prepared for a ~5-10 second delay the first time you use intellisense, as it has to load all these references from your project.
You may need to disable intellisense in Resharper for javascript if it interferes with the native intellisense.
Restart Visual Studio. It will not work until you do this. Also, I'm paranoid about closing all other instances other than this instance first, so these settings "stick". So I suggest you do that before restarting this instance.
As #Balthasar pointed out (and in case you are using Resharper) you will need to enable intellisense from Visual Studio for it to work:
Resharper -> options -> environment -> intellisense -> general, select 'Custom Intellisense' and for Javascript you can select Visual studio. Alternatively you can use the 'Visual Studio' statement completion (second option)
i've just realized that the automatic order that _reference.js file uses (first my files then the framework's files) prevented intellinsense to work on other files that weren't the app.js file
this is how it now my _references.js looks like:
/// <autosync enabled="false" />
/// <reference path="angular.js" />
/// <reference path="angular-resource.js" />
/// <reference path="angular-ui-router.min.js" />
/// <reference path="jquery-2.1.4.js" />
/// <reference path="materialize/materialize.js" />
/// <reference path="../App/App.js" />
/// <reference path="../App/Controllers/productsController.js" />
/// <reference path="../App/Controllers/productsEditController.js" />
/// <reference path="../App/Controllers/valuesController.js" />
/// <reference path="../common/common.services.js" />
/// <reference path="../common/productsResource.js" />
/// <reference path="../common/valuesResource.js" />
I had a similar issue and it turned out Resharper was blocking all the nice JavaScript intellisense I had setup in my _references.js file.
Visual Studio intellisense for AngularJS is extremely sentimental (a nice way of saying that it's most likely poorly developed).
So, even if everything is well configured with the _references.js file, and you get intellisense for other libraries like jQUERY, you will most probably not get it for AngularJS.
For example, in VS 2015 community, the below directive will not show intellisense for the $http angular object, although everything works fine with the code:
In the image below, I add an empty array to the module (which means that the module will get created, and if another with the same name exists, it get overwritten), and intellisense starts working:
Here is a snippet of the code for you to test yourself (try and add the empty array here):
(function () {
'use strict';
angular
.module('intellisence.sucks.directives')
.directive('footer', footer);
footer.$inject = ['$http'];
function footer($http) {
$http.
var directive = {
link: link,
restrict: 'EA'
};
return directive;
function link(scope, element, attrs) {
}
}
})();
PS: If you click on any folder on you project in the Solution Explorer and press Ctrl+Alt+A to add a new item, you get suggestion to add a AngularJs Directive, and If you do it, the Directive will be like the one I just showed you, without the empty array on the module declaration, so intellisence won't work with it. It won't work with the example that Microsoft gives to the users... Only works on the module creation, your first file and doesn't work from now on.
I had the same issue. When I added angular, VS 2015 (RTM) modified my _references.js; basically it removed some of my lines in the file. When I added a reference for angula in my _references.js as below
/// <reference path="lib/angular/angular.js" />
I got my intellisense for Angular 1.4.3 in VS 2015!
Follow this article to add more comprehensive intellisense to VS.
http://blogs.msdn.com/b/visualstudio/archive/2015/02/05/using-angularjs-in-visual-studio-2013.aspx
Download the angular.intellisense.js file and place it in the Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\References folder
i had this issue.
The visual studio IDE will scan any js files referenced in the HTML files and use them if neccesary (for the intellisense etc).
My problem was i was referencing Angularjs using the CDN/http:// addresses and thus Visual studio did not have any information on angular.
Try downloading the angularjs js file directly and include in your project and reference in your index.html, rebuild (just in case) and try again and hopefully it should work.
Hope i helped.
I have this issue for RTM ..apart from angular object and in a hello world complexity senario ($http and all custom objects dont work) .. Followed the _references setups . My only suspicsion is I upgraded from RC to RTM (no fresh install) have created a issue on Git [link]github.com/jmbledsoe/angularjs-visualstudio-intellisense/issues/… ..Grabbing a VHD Win 10 image and going to try that once the d/l finishes :( –
UPDATE
Ok with a bit of help here is teh answer .... The Intellisense engine never sees the module named "sportsStore" being created, since it is created in the app.html file in a script block:
<script>
angular.module("sportsStore", ["customFilters","cart"]);
</script>
The VS Intellisense engine is "executing" the code in your project in order to discover how to do code completion. It's using the _references.js file as its starting point and executing each reference from that file, in order. Since VS Intellisense never executes a line of code that creates the AngularJS module named "sportsStore", it doesn't know how to do code completion.
Move the JavaScript code above into its own JS file (let's call it "app.js") and include a reference to it in _references.js. Make sure the "app.js" reference is immediately after the "angular.js" reference, since you need it to create the module before the other script files configure it. :D
Just create an _references.js file in a folder named 'Scripts' (naming convention) at the root of your project. Update it with your necessary javascript files and you should be able to get intellisense. Here's a link on why such a thing was needed: http://madskristensen.net/post/the-story-behind-_referencesjs
None of the above work for me. Mine is Visual Studio 2017 - Professional
Yet I got it working using my solution here -->
You have to reference the source by an enclosed /// <reference path="yourpath"/> even the source is in the same folder where you code is.
Do NOT USE minified source. All your source has to be non-minified.
If you store your path stmts in _reference.js file, make sure that file is at the same dir where your code file is.
Although I can put the reference stmt inside my code file, I chose to use a separate file "_reference.js" to store it.
You can put this with your code :
/// <reference path="../_assets/JS-Main/angular-1.3.13.js" />
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
Or you can enter this line into your _reference.js file
/// <reference path="../_assets/JS-Main/angular-1.3.13.js" />
After you have done all the above, you should be able to see the angular intellisense.
You can do the same thing for others' intellisense like jQuery, Anytime, _underscore, etc... just keep adding path statements into the _reference.js file and you can also copy that _reference.js file to other websites if they have the same dir struct. Good luck!
This question already has answers here:
intellisense and code complete for DefinitelyTyped (TypeScript type definitions) on WebStorm IDE
(3 answers)
Closed 7 years ago.
I am just starting out with TypeScript and trying to add it to an existing AngularJS project.
I have 'excluded' the bower directory where angular is installed and downloaded the definitelyTyped definitions for angular in the preferences window.
Angular code completion is working, but typescript is giving me an error TS2304 wherever I code 'angular.'.
What have I missed?
To fix the error, you need to copy the downloaded definitelyTyped TypeScript stubs from ~/Library/Caches/WebStorm9/extLibs folder to your project directory and reference them in your .ts file using /// <reference path> comments, like
/// <reference path="path/to/angular.d.ts" />
Just to make things clear:
When you download Typescript stubs via Preferences/Languages & Frameworks/Javascript/libraries, they are placed into ~/Library/Caches/WebStorm9/extLibs.
It's perfectly fine for Webstorm - it doesn't require placing library files directly in the project folder. Also, Webstorm itself doesn't need ///reference comments to be able to resolve types - type hinting/navigation/completion works even if the types are not explicitly referenced. But the tsc compiler does need the d.ts files being placed somewhere in the project directory and referenced via ///reference comment.
So, to get downloaded stubs available to typescript compiler, you need to copy/move them to you project directory (and probably rename to more human readable names :)) and add comments (can be done using 'Generate reference path comment' intention (hit Alt+Enter on a reference to generate a comment)).
We plan to provide an option to download files directly to the project folder (instead of system/extLibs/ ) in the future versions
probably need to add a reference to the .d.ts in the particular .ts file having the problem, something like:
/// <reference path="../typings/angular.d.ts"/>
downloaded the definitelyTyped definitions for angular in the preferences window.
The intent of downloading the stubs like that is to provide intellisense for JavaScript code not TypeScript code. For TypeScript code you should download and reference the .d.ts directly in your TypeScript code.
I wonder.. what exactly I should do to make WebStrom (or IntelliJ IDEA) resolve my 'angular' variable.
I follows this guy but that maybe deprecated already.
On my vendor.d.ts:
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/angularjs/angular.d.ts" />
My package json:
{
"name": "angular_ts",
"version": "0.1.0",
"description": "",
"repository": {},
"dependencies": {
"grunt": "~0.4.5",
"grunt-ts": "~3.0.0"
}
}
My issue on that screenshot ('angular' is not resolved.. can not go to definition of it, as a result - multiple implementations of 'module'):
So, what exactly I should do to make 'angular' resolved in .ts file in WebStorm?
UPDATE:
I do not have yet angularjs sources in my project. But one of the options where it redirects me is "node_modules/grunt-ts/tasks/inerfaces.d.ts" file. Even if I exclude 'node_modules' folder from my project.
You have to do a few things to get this to work correctly. I don't know what that tutorial told you to do, but it's not the WebStorm usual way of doing it.
Firstly, you need to make WebStorm ignore all the AngularJS source files in your project. This is why you're getting the multiple implementations warning.
Open your "project" side panel that displays the file tree.
Find where you put your angular.min.js source files, and right click the file.
Select "Mark as Plain Text". WebStorm will now ignore that file from intellisense for JavaScript.
You have to now add AngularJS to your list of External Libraries for that project.
Click "File / Settings"
Expand the "Languages & Frameworks" node
Expand the "JavaScript" node
Select the "Libraries" section.
This is where you install third-party TS files for libraries. Select the "angularjs-DefinitelyTyped" library, but this doesn't come with WebStorm. You have to download and install it.
Click the "Download..." button.
Change the dropdown on the dialog from "Official libraries" to "TypeScrypt community stubs".
Find "angularjs", select it and click "Download and Install".
That's basically what I do. The key is to exclude the JS files in your project that will interfere with intellisense.
When you install external libraries to a WebStorm project via the settings. It doesn't actually add those files to the project. They are only added to the intellisense space used by the IDE.
Ok.
Since I did not have yet angularjs sources (yet) in my project.
And one of the options where it redirects me is "node_modules/grunt-ts/tasks/inerfaces.d.ts" file. Even if I exclude 'node_modules' folder from my project.
My solution is to remove node_modules from the Project Structure -> Libraries there was reference to 'node_modules' (also)..
But it is basically the same principle as Mathew suggested.
(Hope that will not break another stuff in the project)