Pull to refresh

WebStorm vs Visual Studio

Website development
Хочу поделиться с сообществом открытой недавно для самого себя новой 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. TranslationManager = function (controlsToTranslate, settings) {
  2. this.settings = settings;
  3. this.controlsToTranslate = controlsToTranslate;
  4. };
  5. TranslationManager.prototype = {
  6. handleClick: function() {
  7. var url = this.settings.translateUrl;
  8. return false;
  9. },
  10. defaults: {
  11. translateUrl: 'http://api.microsofttranslator.com/V2/Ajax.svc/TranslateArray',
  12. requestTimeoutTime: 1000 //in milliseconds
  13. }
  14. };
  15. $.fn.translate = function (options) {
  16. var settings = $.extend({}, TranslationManager.prototype.defaults, options);
  17. var translationManager = new TranslationManager(this, settings);
  18. };


Так вот, при навигации к 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. Если у кого-то есть опыт сравнения с этими или какими-либо другими продуктами, добро пожаловать в комментарии.
Tags:JetBrainsWebStormVisual Studioweb-разработкаjavascriptcsshtml
Hubs: Website development
Total votes 36: ↑21 and ↓15 +6
Views20K

Popular right now

Программист Power BI Senior
from 80,000 to 125,000 ₽ТатнефтьКазаньRemote job
HTML-верстальщик
from 60,000 ₽Sborka ProjectRemote job
Frontend Developer (JS/jQuery/CSS/Webasyst)
from 100,000 ₽WebasystМоскваRemote job
Web-программист
to 150,000 ₽Уфимский НТЦУфа
HTML-верстальщик (Junior/Middle)
from 30,000 to 40,000 ₽Media WorksRemote job