WebStorm vs Visual Studio

Хочу поделиться с сообществом открытой недавно для самого себя новой IDE от JetBrains—WebStorm, оказавшейся просто превосходной, и сравнить ее с Visual Studio в плане редактирования Javascript.

Disclaimer: пост в основном рассчитан на тех разработчиков, которые работают в стеке .Net и обычно не в курсе того, что есть другие IDE, намного более подходящие для некоторых задач, чем Visual Studio.


Статья будет короткой, скорее рекламной. Disclaimer—я никакого отношения к JetBrains не имею, но IDE действительно очень хороша; и многим она сильно облегчит жизнь. Ссылка на виновника--вуаля.

Обзор

Подробно описывать все ее достоинства я не собираюсь, благо можно найти их по ссылке.

Основная цель—web-разработка: редактирование css, html, javascript.

Она очень легкая и быстрая. Инсталлятор занимает всего 67 мегабайт, установка—за секунды, при открытии потребляет около 27 мегабайт памяти; при открытии файла jQuery 1.4.1 стала потреблять 80 мегабайт.

Она кроссплатформенная. Что тут еще скажешь?

Она платная, но есть пробный период в 45 дней, стоит 69 долларов для личного использования. Я думаю, что WebStorm стоит того.

Моя основная среда разработки—Misrosoft Visual Studio + Resharper. Так вот, WebStorm для javascript умеет делать все то же, что Reshaprer под Visual Studio для C#, только быстрее. Ну, почти все то же.
В качестве примера я проведу сравнение редактора javascript в Visual Studio и WebStorm.

Visual Studio vs WebStorm

Базовое редактирование текста

Visual Studio безумно плохо справляется с основной задачей IDE—базовым редактированием кода. Она не умеет сворачивать функции, классы, по умолчанию не выводит вертикальных indent lines, не указывает пару при наведении на одну из скобок.

Сравните WebStorm:


И VisualStudio:

Code Completion, error search

В Visual Studio 2010 есть неплохой Intellisense, но он работает с большими временными задержками, и большую часть синтаксических ошибок не находит, так что все равно приходится пользоваться jsLint.

WebStorm почти мгновенно находит синтаксические ошибки и использование необъявленных переменных или функций (учитывая и другие файлы в директории).

В WebStorm есть code completion, но, правда, почему-то только после того, как вы набираете точку. Это один из немногих недостатков, которые я заметил. Надеюсь, он будет поправлен с предстоящим выходом новой версии. И он, как оказалось, не критичен.

Code navigation

В WebStorm есть удобный code navigation, аналогичный Resharperовскому: при зажатой кнопке ctrl и щелчке левой кнопкой мыши. В Visual Studio ничего похожего нет.

WebStorm умеет переходить к параметрам функции, объявлениям переменных в теле функции, объявлениям переменных в функции-конструкторе, когда вы находитесь в одной из функций прототипа, и даже больше.

Пример (он бессмысленнен, поскольку сокращен; а вообще это плагин к jQuery для перевода через 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.                 return false;
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.  

Так вот, при навигации к translateUrl в методе handleClick (строчка 9) WebStorm отправит нас к объекту TranslationManager.prototype.defaults (хотя в этом методе используется сформированный на строчке 20 другой объект). По-моему, это просто отлично!

Find usages

Умеет искать использования по проекту. Если в примере выше искать использования по функции конструктору, то выведет вот что:



Visual Studio, как водится, не умеет.

Refactoring

Умеет переименовывать переменные так, чтобы имя менялось во всех использованиях.

Visual Studio… и так понятно.

Code Structure

Есть окно для структуры класса. Например, вот:



Visual Studio… на лопатках, вроде. Что бы Scott Gu не писал когда-то в своем блоге, что у VS 2010 лучший редактор javascript.

Side Panels

Я не научился заставлять боковые панельки в WebStorm выезжать/скрываться автоматически, как в Visual Studio, это их недостаток. Но и с открытыми можно прожить.

Некоторые другие аспекты

Поскольку WebStorm рассчитана на совместное использование с какой-то основной IDE, то умеет просто открывать готовые папки с файлами. К сожалению, в открытых папках появляются служебные подпапки вида .idea, что может доставить неудобство при работе с системой контроля версий. Но ведь всегда можно добавить исключение, верно?

Code completion в WebStorm browser-specific, то есть указывает, какие dom-методы поддерживаются какими браузерами.

На сайте JetBrains указано, что можно подключить документацию для популярных библиотек типа jQuery. Но я не пытался, поскольку все методы для объекта jQuery WebStorm и так видит, если файл jQuery расположен в директории с редактируемым файлом.

Заключение

Web Storm определенно намного превосходит Visual Studio в качестве редактора яваскрипта. Равно как и css, и html (это рекомендуется проверить самим).

P.S.

К сожалению, я не работал ни в Aptana studio, ни в Emacs + js2. Если у кого-то есть опыт сравнения с этими или какими-либо другими продуктами, добро пожаловать в комментарии.