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
Related
I am working on a little project with AngularJS (1.6.5) in WebStorm. The problem here is that WebStorm is not recognizing any globals AngularJS defines. I have AngularJS installed and the right #types. I also defined AngularJS as an External library and I also made sure that AngularJS is not excluded by WebStorm. Yet WebStorm is still giving me errors.
Example:
logConfig.$inject = ["$logProvider", "$compileProvider"];
function logConfig($logProvider: ng.ILogProvider, $compileProvider: ng.ICompileProvider) {
// $logProvider.debugEnabled(false); //TODO add this in production
// $compileProvider.debugInfoEnabled(false); //TODO add this in production
// Disable comment and class directives. Boosts the performance
$compileProvider.commentDirectivesEnabled(false);
$compileProvider.cssClassDirectivesEnabled(false);
}
The code above gets the following error in WebStorm: Unresolved variable $inject. (the $inject has a red color and the message is given when I hover over it)
Am I missing something?
Update
I may have found the problem. WebStorm doesn't reconsize AngularJS even though it is in my Node_modules, I have the correct typings (#types/angular) and I have registered as an exteral library (file-->settings-->languages & frameworks-->JavaScript-->Libraries).
When I type import * as ng from "an|", and hit "ctrl + space" WebStorm doesn't give me any hints about the angular library. I am guessing these issues are connected.
Anyone knows if there is an other option to make WebStorm reconsize AngularJS?
I found a solution for the problem:
Like Ekaterina Prigara said, somehow my TSLint was disabled. I needed to re-enable it via Settings | Languages & Frameworks | TypeScript | TSLint. After I re-enabled it I restarted my WebStorm and got the error: Error: Initialization error (typescript). Cannot read property 'createHash' of undefined. I then removed my node_modules folder and reinstalled it via npm install. After that everything was working again.
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 have done the following:
Installed both the AngularJS and NodeJS Plugins in Phpstorm
Downloaded the latest stable release of Angular (1.4.8)
Added angular.js to the project
Added angular.js to the list of libraries in Phpstorm
Directives in my HTML will autocomplete fine (e.g. ng-modal), but trying to do something like Module.fact does not autocomplete to factory. Here is my code:
var appModule = angular.module("appModule", ['ngRoute']);
appModule.fac //This is me typing factory, but auto complete doesn't help
I am running PhpStorm 10.0.2. I have tried using different versions of PhpStorm and I have also tried using Angular 1.5 (the beta version) with the same result. Also, I am new to angular, but my code is working. Thank you!
*I have already reviewed these links and SO posts:
https://www.jetbrains.com/webstorm/help/using-angularjs.html
https://www.jetbrains.com/webstorm/help/configuring-javascript-libraries.html
Why do AngularJS directives (attributes, etc.) show up as "invalid" in WebStorm 8?
Getting angularJS autcomplete in Webstorm/PHPStorm
The angular variable is a global one and when you have to many declarations of the same global variable PhpStorm/WebStorm can not handle auto-completion.
It's important to verify that only 1 declaration for angular is being discovered by PhpStorm. This doesn't have anything to do with your actually JavaScript project, but where PhpStorm looks for declarations.
If you hold down ctrl and mouse over the world angular. It should show it highlighted to be clickable, and a tooltip showing where it is declared.
If the tooltip says there are multiple definitions of the identifier, then it can not do autocomplete correctly. This is true for most JS variables in Php/WebStorm not just this angular variable.
You have a couple of ways to fix this:
1) Force type declaration with JsDoc to TypeScript
/**
* #var {angular.IAngularStatic} myAngular
*/
var myAngular = angular;
This will declare the variable myAngular using the TypeScript definition. There is less likely to be conflict with any already scanned JS source files that also declare angular. It's an easy fix, but adds unnecessary source code to your project.
2) Disable JavaScript source files by excluding them
If you are using node_modules or bower_components then you need to include some of the JS files from those folders, but not unnecessary duplicates. You won't need any Angular JS files since you've already installed the TypeScript definitions (which work better for auto-completion). In the Project Files panel in PhpStorm find the Angular packages, right click on those folders and "Exclude" those folders. You can also do this via project settings in "Files / Settings / Directories"
3) Ignore bundled output files for JavaScript
This is the most common issue I find with PhpStorm/WebStorm. PhpStorm will also scan minified JavaScript files you've packaged into your webroot/js folder. For example; If you use grunt to uglify your JavaScript code into app.min.js and inside that file is Angular and your project code. PhpStorm will scan this and create duplicate declarations of everything it finds.
Find all those duplicate *.js files in your project, right mouse click on the files and select "Mark as Plain Text" from the menu. This will tell the editor to completely ignore the file from all intellisense scanning.
So to summarize. If you control click on a declaration to go to source, and PhpStorm does not go immediately, but instead prompts you select from multiple declarations, then you have duplicates in your project and you need to narrow the scope. Once that is done everything else should work as expected.
f you prefer to use a CDN, place the cursor over the highlight library name, hit Alt+Enter, and Download Library. This will set up a local library in WebStorm’s cache (not in your project) so WebStorm can access AngularJS methods, directives, etc for autocompletion and documentation lookup.
I opened up angular code in VSCode. At first it didn't recognize angular, so used the light-bulb to add:
/// <reference path="../../typings/angularjs/angular.d.ts"/>
But it still doesn't recognize angular and now I get an error saying that it can't find angular.d.ts.
It looks like the problem was that VSCode failed to download the file and create the directories. I googled angular.d.ts and found it on GitHub - DefinitelyTyped
I created "typings/angularj/" folders and added the file and now intellisense is working for angular :)
You don't need to add anything to your file, VS Code will add angular.d.ts to the typings folder. VSCode doesn't require the /// tag to be included in all your files, you might even confuse the editor doing this.
If you don't see the "typings" folder with the angular intellisense file you will not get intellisense and you need to repeat the light-bulb step.
I started using Typescript with Webstorm today and I am getting real crazy understanding what's going on. Imagine a project using tsd loading definition types on typings/. For background, angular defines an angular module aliased to ng and then there is other d.ts files appending more modules into angular (and technically ng).
When I require for example the router I get:
In fact, if you go to angular-route.d.ts (from DefinitelyTyped) you can see the same:
The d.ts files are technically correct because tsc compiles them giving it those definition files.
On the other hand, Webstorm allows you to load libraries (typescript stubs from DefinitelyTyped). If I go there and I download the angular ones (which are 100% the same as the one I have on typings/) I get:
Same error but at least I don't get the red wiggle in the solution explorer. Still, it doesn't give me any intellisense when writing ng.route.<ctrl+space>, it just turn blue when I finish writing it (in fact, I can cmd+click and go to the definition).
Who's failing here? The typescript plugin? It is weird that it fails using typings/ and somehow work with Webstorm's libraries menu (using the same file).
Who's failing here? The typescript plugin?
Yes. You need to use the Webstorm beta channel to get support for TypeScript 1.4 union Types at the moment.