WebStorm vs Visual Studio

I want to share with the community the recently opened for myself new JetBrains — WebStorm IDE, which turned out to be just excellent, and compare it with Visual Studio in terms of Javascript editing.

Disclaimer: The post is mainly aimed at developers who work in the .Net stack and are usually not aware that there are other IDEs that are much more suitable for some tasks than Visual Studio.


The article will be short, rather advertising. Disclaimer — I have nothing to do with JetBrains, but the IDE is really very good; and for many it will greatly facilitate life. The reference to the culprit is voila .

Overview

I’m not going to describe all its advantages in detail, since you can find them here.

The main goal is web development: editing css, html, javascript.

She is very light and fast. The installer takes only 67 megabytes, installation — in seconds, when opened, it consumes about 27 megabytes of memory; when you open the jQuery 1.4.1 file, it began to consume 80 megabytes.

She is cross-platform. What else can you say?

It is paid, but there is a trial period of 45 days, it costs 69 dollars for personal use. I think WebStorm is worth it.

My main development environment is Misrosoft Visual Studio + Resharper. So, WebStorm for javascript can do everything the same as Reshaprer under Visual Studio for C #, only faster. Well, pretty much the same thing.
As an example, I will compare the javascript editor in Visual Studio and WebStorm.

Visual Studio vs WebStorm

Basic text editing

Visual Studio does a terribly poor job at the core task of the IDE — basic code editing. It does not know how to collapse functions, classes, by default it does not display vertical indent lines, does not indicate a pair when hovering over one of the brackets.

Compare WebStorm: And VisualStudio:

Code Completion, error search

Visual Studio 2010 has a good Intellisense, but it works with large time delays, and it does not find most of the syntax errors, so you still have to use jsLint.

WebStorm almost instantly finds syntax errors and the use of undeclared variables or functions (taking into account other files in the directory).

There is code completion in WebStorm, but for some reason, for some reason, only after you type a point. This is one of the few shortcomings that I have noticed. I hope it will be fixed with the upcoming release of the new version. And he, as it turned out, is not critical.

Code navigation

WebStorm has a convenient code navigation similar to Resharper: with the ctrl button held down and left-clicking. There is nothing similar in Visual Studio.

WebStorm can go to function parameters, variable declarations in the function body, variable declarations in the constructor function when you are in one of the prototype functions, and even more.

Example (it makes no sense, because it is shortened; in general, it is a jQuery plugin for translating via Bing):

1.  
2. TranslationManager = function (controlsToTranslate, settings) {
3.     this.settings = settings;
4.     this.controlsToTranslate = controlsToTranslate;
5. };
6.  
7. TranslationManager.prototype = {
8.         handleClick: function() {
9.                 var url = this.settings.translateUrl;
10.                 returnfalse;
11.         },
12.        
13.         defaults: {
14.                 translateUrl: 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray',
15.                 requestTimeoutTime: 1000 //in milliseconds
16.         }
17. };
18.  
19. $.fn.translate = function (options) {
20.         var settings = $.extend({}, TranslationManager.prototype.defaults, options);
21.         var translationManager = new TranslationManager(this, settings);
22. };
23.  

So, when navigating to translateUrl in the handleClick method (line 9), WebStorm will send us to the TranslationManager.prototype.defaults object (although this method uses another object formed on line 20). In my opinion, this is just great!

Find usages

Able to seek use for the project. If in the example above to search for the use of the constructor function, then this is the output: Visual Studio, as usual, does not know how.

Refactoring

Able to rename variables so that the name changes in all uses.

Visual Studio ... and so it is clear.

Code structure

There is a window for the class structure. For example, here: Visual Studio ... on the shoulder blades, sort of. Whatever Scott Gu once wrote on his blog, VS 2010 has the best javascript editor.

Side panels

I did not learn how to make side panels in WebStorm pop out / hide automatically, as in Visual Studio, this is their drawback. But you can live with the open.

Some other aspects

Since WebStorm is designed for sharing with some basic IDE, it can just open ready-made folders with files. Unfortunately, service subfolders of the .idea type appear in open folders, which can be inconvenient when working with the version control system. But you can always add an exception, right?

Code completion in WebStorm is browser-specific, that is, it indicates which dom methods are supported by which browsers.

The JetBrains website indicates that documentation can be included for popular libraries like jQuery. But I did not try, since all methods for the jQuery WebStorm object are already visible if the jQuery file is located in the directory with the edited file.

Conclusion

Web Storm is definitely far superior to Visual Studio as a javascript editor. As well as css and html (it is recommended to check it yourself).

PS

Unfortunately, I did not work in either Aptana studio or Emacs + js2. If anyone has experience comparing with these or any other products, welcome to comment.