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.
Related
Is there a way for WebStorm to "see" the methods in my HTML and link them with their respective component class?
Details
I usually write my component controller in one file and the component template (html) in another file.
When I do this, methods that are only used in the template are marked as "unused" by WebStorm, and they throw a warning.
For example, in the component ctrl I have a handleViewChange() method.
In the template file I have vm.handleViewChange();
WebStorm warns me that handleViewChange is an unused method even though I have used it in the template.
Please note: I am aware that I can suppress the warn for this particular statement. I would rather WebStorm recognized the method is actually used.
Particularly relevant with refactor-happy colleagues (or refactor-happy future me).
Edit #1
I have already enabled the AngularJS library in Webstorm settings, but it does not fix this particular issues.
Downloading angular TypeScript community stubs per suggestion at this post doesn't enable AngularJS support for your project.
You need to have angular.js file (debug version, uncompressed!) in your project (either in your project directory or configured as JavaScript library) - normally it's enough to get Angular directives/methods recognized. See http://blog.jetbrains.com/webstorm/2014/03/angularjs-workflow-in-webstorm/, 'Include angular.js in Your Project' section.
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.
Recently I was facing an issue coding React app on Visual Studio code. Because of this issue, whenever I wrote JSX inside the render function of the React Component and saved it, it would go messed up (I mean indentation would get messy). See the pic:
This error was also showing error like:
1. Unclosed regular expression
How to solve this?
If you are using jshint plugin, remove it and install ESLint plugin.
It is a good replacement for jshint in reactJS work.
I tried several options like creating a .eslintrc file or .jshintrc file.
But it turned out that in my Visual Studio Code IDE, there was third party extensions(eslint/jslint/tslint/beautify/jsformatter etc) that were causing a big mess in my JSX code.
I had to go to the extensions and disable all the extension which could hinder in the natural process of linting and code cleaning of React framework.
(These extensions are really great. But disabling them helped me in solving this issue of mine, no offense to anyone.)
If you are facing the same issue and the issue persists event after adding a .jshintrc with content:
{
"esversion": 6
}
then consider disabling the third party extensions.
Hope my answer helped.
the extension that did it for me was...
jshint
dbaeumer.jshint
Dirk Baeumer
as #abhay-shiro says, disabling a few extensions will usually resolve the issue.
I had the same problem, but it was "beautify" extension which was causing the error, I uninstalled it and installed prettier. It fixed the problem.
I solved this issue by disabling show syntax errors checkbox in visual studio 2015.
Tools -> options - > text editor -> javascript -> intelliSense -> general -> show syntax errors(disable)
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.
I have setup Webstorm to recognise and compile my coffeescript files.
I have installed the AngularJS plugin and can successfully write my controllers etc in plain old javascript.
When I try to write my angular related code in CoffeeScript however I do not get any IDE support: code-completion, intellisense etc.
As a sign that all is not well, the angular variable itself is not recognised, as shown in the image below.
Question: How do I enable support for AngularJS in CoffeeScript files?
Thanks
To fix the specific problem Unresolved variable or type angular you need to make sure the angular javascript libraries have been Enabled (see image below).
You do this via the WebStorm settings:
File -> Settings -> Javascript -> Libraries
Here is the relevant help section: Configuring JavaScript Libraries
With webstorm 10 you are going to go to the preferences window and from there select Languages & Frameworks > JavaScript > Libraries. Then click the download button, select TypeScript community stubs from the dropdown at the top of the list, find angular and click download and install.
If you are using jshint be sure to go to the jshint settings find the Predefined option and add angular:true to suppress warnings.
In WebStorm v.11
go to "Settings" -> "Plugins" -> "Browse repositories".
Search and install "Angular Templates".
Profit
Settings screenshot