WebStorm vs Visual Studio
I want to share with the community recently discovered for myself a new IDE from JetBrains — WebStorm, which turned out to be simply excellent, and compare it with Visual Studio in terms of Javascript editing.
Disclaimer: The post is mainly designed for those developers who work on 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 to many it will make life much easier. Link to the culprit-- voila .
')
I don’t intend to describe in detail all of its merits, the benefit can be found on the link.
The main goal is web development: editing css, html, javascript.
It is very light and fast. The installer is only 67 megabytes, installation — in seconds, when opened consumes about 27 megabytes of memory; when you open the jQuery 1.4.1 file began to consume 80 megabytes.
It 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 is able to do everything the same as Reshaprer under Visual Studio for C #, only faster. Well, almost everything is the same.
As an example, I will compare the javascript editor in Visual Studio and WebStorm.
Visual Studio does a terrible job of the IDE’s main task — basic code editing. It cannot collapse functions, classes, does not display vertical indent lines by default, does not indicate a pair when hovering over one of the brackets.
Compare WebStorm:
And VisualStudio:
There is a good Intellisense in Visual Studio 2010, but it works with long time delays, and most of the syntax errors are not found, so you still have to use jsLint.
WebStorm almost instantly finds syntax errors and the use of undeclared variables or functions (including other files in the directory).
WebStorm has code completion, but, for some reason, only after you type a period. This is one of the few flaws that I have noticed. I hope it will be corrected with the upcoming release of the new version. And he, as it turned out, is not critical.
In WebStorm there is a convenient code navigation, similar to Resharperovsky: when the ctrl button is held down and the left mouse button is clicked. There is nothing like this in Visual Studio.
WebStorm can navigate to function parameters, variable declarations in the function body, variable declarations in a constructor function when you are in one of the prototype functions, and even more.
An example (it is meaningless because it is shortened; in general, it is a plugin for jQuery for translation via Bing):
So, when navigating to the 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!
Able to look for use on the project. If, in the example above, we look for usage by function of the constructor, then we will output this:
Visual Studio, as usual, can not.
Able to rename variables so that the name changes in all uses.
Visual Studio ... that's understandable.
There is a window for the class structure. For example, here:
Visual Studio ... on the blades, sort of. Whatever Scott Gu once wrote in his blog that VS 2010 has the best javascript editor.
I have not learned to force the side panels in WebStorm to exit / hide automatically, as in Visual Studio, this is their disadvantage. But with open can live.
Since WebStorm is designed to be shared with some kind of primary IDE, it can simply open ready-made folders with files. Unfortunately, in the open folders there are service subfolders like .idea, which can cause inconvenience when working with the version control system. But you can always add an exception, right?
Code completion in WebStorm browser-specific, that is, indicates which dom methods are supported by which browsers.
The JetBrains website indicates that you can include documentation for popular jQuery type libraries. But I did not try, because all the methods for the jQuery WebStorm object already see if the jQuery file is located in the directory with the editable file.
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).
Unfortunately, I did not work in Aptana studio, nor in Emacs + js2. If someone has the experience of comparing with these or any other products, welcome to the comments.
Disclaimer: The post is mainly designed for those developers who work on 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 to many it will make life much easier. Link to the culprit-- voila .
')
Overview
I don’t intend to describe in detail all of its merits, the benefit can be found on the link.
The main goal is web development: editing css, html, javascript.
It is very light and fast. The installer is only 67 megabytes, installation — in seconds, when opened consumes about 27 megabytes of memory; when you open the jQuery 1.4.1 file began to consume 80 megabytes.
It 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 is able to do everything the same as Reshaprer under Visual Studio for C #, only faster. Well, almost everything is the same.
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 terrible job of the IDE’s main task — basic code editing. It cannot collapse functions, classes, does not display vertical indent lines by default, does not indicate a pair when hovering over one of the brackets.
Compare WebStorm:
And VisualStudio:
Code Completion, error search
There is a good Intellisense in Visual Studio 2010, but it works with long time delays, and most of the syntax errors are not found, so you still have to use jsLint.
WebStorm almost instantly finds syntax errors and the use of undeclared variables or functions (including other files in the directory).
WebStorm has code completion, but, for some reason, only after you type a period. This is one of the few flaws that I have noticed. I hope it will be corrected with the upcoming release of the new version. And he, as it turned out, is not critical.
Code navigation
In WebStorm there is a convenient code navigation, similar to Resharperovsky: when the ctrl button is held down and the left mouse button is clicked. There is nothing like this in Visual Studio.
WebStorm can navigate to function parameters, variable declarations in the function body, variable declarations in a constructor function when you are in one of the prototype functions, and even more.
An example (it is meaningless because it is shortened; in general, it is a plugin for jQuery for translation via Bing):
TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;TranslationManager = function ( controlsToTranslate , settings ) { this . settings = settings ; this . controlsToTranslate = controlsToTranslate ; } ; TranslationManager. prototype = { handleClick : function ( ) { var url = this . settings . translateUrl ; return false ; } , defaults : { translateUrl : 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray' , requestTimeoutTime : 1000 //in milliseconds } } ; $. fn . translate = function ( options ) { var settings = $. extend ( { } , TranslationManager. prototype . defaults , options ) ; var translationManager = new TranslationManager ( this , settings ) ; } ;
So, when navigating to the 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 look for use on the project. If, in the example above, we look for usage by function of the constructor, then we will output this:
Visual Studio, as usual, can not.
Refactoring
Able to rename variables so that the name changes in all uses.
Visual Studio ... that's understandable.
Code Structure
There is a window for the class structure. For example, here:
Visual Studio ... on the blades, sort of. Whatever Scott Gu once wrote in his blog that VS 2010 has the best javascript editor.
Side panels
I have not learned to force the side panels in WebStorm to exit / hide automatically, as in Visual Studio, this is their disadvantage. But with open can live.
Some other aspects
Since WebStorm is designed to be shared with some kind of primary IDE, it can simply open ready-made folders with files. Unfortunately, in the open folders there are service subfolders like .idea, which can cause inconvenience when working with the version control system. But you can always add an exception, right?
Code completion in WebStorm browser-specific, that is, indicates which dom methods are supported by which browsers.
The JetBrains website indicates that you can include documentation for popular jQuery type libraries. But I did not try, because all the methods for the jQuery WebStorm object already see if the jQuery file is located in the directory with the editable 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 Aptana studio, nor in Emacs + js2. If someone has the experience of comparing with these or any other products, welcome to the comments.
Source: https://habr.com/ru/post/107799/
All Articles