Что лучше: webstorm или код Visual Studio

Обновлено: 05.07.2024

Начав свой первый проект JavaScript в 2015 году, я использовал JetBrains WebStorm, интегрированную среду разработки (IDE) для разработки JavaScript. Я уже привык к IDE JetBrains, так как раньше работал с Android Studio, основанной на IntelliJ IDEA. Кроме того, я получил лицензию WebStorm от своей компании и поэтому могу использовать ее без каких-либо ограничений.

По мере того, как Visual Studio Code становился все более популярным, я использовал его для своих дальнейших веб-проектов. Мне он очень понравился, потому что он был намного быстрее, с широкими возможностями настройки и бесплатным, так что я мог использовать его и для своих личных проектов.

В моем текущем проекте я встретил разработчика, который был очень озадачен тем, что я использую редактор, а не IDE для разработки больших бизнес-приложений. Во-первых, я не особо прислушивался к его опасениям, но между тем я его понимаю.

В этом сообщении блога я хочу рассказать вам, почему сейчас для разработки я в основном использую WebStorm, а не VS Code.

Преамбула

Это очень актуальная тема, и я знаю, что она вызовет споры. В следующей статье я расскажу о своем опыте использования WebStorm в большом приложении Angular, которое в основном было разработано в VS Code.

Проверка кода

WebStorm обеспечивает надежный, быстрый и гибкий статический анализ кода. Этот анализ выявляет языковые ошибки и ошибки времени выполнения, предлагает исправления и улучшения. Он также индексирует весь ваш проект и может, например, обнаружить все неиспользуемые методы, переменные и многое другое.

Вы также можете обнаружить неиспользуемые методы в методах JavaScript с помощью VS Code и ESLint с помощью правил no-unused-vars и no-unreachable. Но если вы, например, используете проект TypeScript (например, Angular), VS Code не обнаруживает неиспользуемые общедоступные методы. Посмотрите на этот простой пример:

Код VS

Вебсторм

Это может оказать огромное влияние на качество кода большой базы кода Angular, которая в основном была разработана с использованием VS Code.

Чтобы увидеть разницу, откройте свой проект, разработанный в VS Code с помощью WebStorm, и запустите проверку кода. Именно это убедило меня в том, что использование WebStorm приводит к более чистому коду.

Встроенные тесты кармы

WebStorm имеет встроенный инструмент запуска тестов, который мне очень нравится. Таким образом, вы можете запускать тесты прямо из IDE и даже отлаживать их там.

Выполняя тесты jasmine и Karma в WebStorm, я могу легко перейти к неудавшемуся тестовому коду и повторно запустить только этот конкретный тест. На следующем изображении показан такой тестовый запуск:

Мой рабочий процесс модульного тестирования Angular в VS Code обычно заключается в том, чтобы пометить блок описания или теста с помощью f (например, fdescribe ), который указывает Karma запускать только этот определенный тестовый блок. В качестве альтернативы я использую karma-jasmine-html-reporter, где вы также можете настроить запуск только определенных тестов, щелкнув их на странице HTML.

В настоящее время также разрабатывается адаптер VS Code Karma Test Adapter, который должен предоставлять аналогичную встроенную функцию проверки кармы для VS Code.

Неиспользованные промисы

Не дожидаться промисов может быть очень сложно, если вы ожидаете, что последующий код будет выполняться только после того, как промис будет разрешен. WebStorm показывает, есть ли неразрешенные промисы (в данном случае для приложения TypeScript):

Вебсторм

В настоящее время у VS Code нет возможности показать эту информацию:

Код VS

Контроль исходного кода/интеграция с Git

VS Code по умолчанию имеет довольно простую интеграцию с git. Вы можете использовать расширения, такие как GitLens, или дополнительные инструменты, такие как Sourcetree, если вам нравится использовать графический интерфейс для сложной работы с git.

WebStorm предоставляет все функции для сложной работы с git прямо из коробки. Вы можете фиксировать файлы, просматривать изменения и разрешать конфликты с помощью визуального инструмента сравнения/объединения прямо в IDE.

Местная история

VS Code не сохраняет локальную историю ваших изменений, но вы можете использовать такие расширения, как локальная история.

WebStorm автоматически отслеживает все изменения, которые вы вносите в свои файлы, и поэтому защищает вас от случайной потери этих изменений. Вы можете просматривать историю файлов и каталогов и делать откаты. Это может быть полезно, если вы, например, случайно сделали git push force и перезаписали свои файлы даже в удаленной ветке.

Отладка

VS Code может отлаживать веб-приложение в Chrome только с помощью расширения Debugger For Chrome, которое затем необходимо настроить для вашего приложения.

При использовании WebStorm у вас уже есть все, что доступно по умолчанию, и, например, для Angular просто нужно нажать «Отладка приложения», и вы можете установить точки останова в редакторе, просмотреть переменные и т. д.

Рефакторинг кода

На мой взгляд, рефакторинг кода намного лучше выполняется с помощью WebStorm.Вы можете переименовать компонент, и он обновит все имена файлов и использование как в HTML, так и в файлах TypeScript. В целом, все IDE JetBrains хорошо известны своими функциями рефакторинга:

Хорошо известной функцией IDE JetBrain является безопасное удаление. Используя эту функциональность, вы можете безопасно удалять файлы из исходного кода во время рефакторинга. Среда IDE сначала выполнит поиск способов использования файлов, и если они будут найдены, вы сможете проверить их и внести необходимые изменения, прежде чем файлы будут удалены.

К сожалению, в настоящее время VS Code не так эффективен.

Интеграция с Angular CLI

WebStorm обеспечивает хорошую интеграцию с Angular CLI благодаря так называемой Angular Schematics:

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

Скорость

VS Code основан на Electron и работает на HTML и JavaScript.

WebStorm разработан на Java и в целом работает медленнее, чем VS Code. Не сказал бы, что он критично медленнее, но разница в скорости заметна.

У VS Code более быстрое время запуска, но если вы работаете над проектом, ваша среда разработки или редактор всегда открыты, и время запуска не играет решающей роли.

Проверки доступности для HTML

WebStorm предоставляет проверки, основанные на рекомендациях Руководства по обеспечению доступности веб-контента (WCAG), которые помогают вам писать более доступный HTML-код.

Цена

VS Code является бесплатным и открытым исходным кодом.

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

Еще один вариант — использовать EAP (программу раннего доступа). Эти предварительные версии включают функции, которые будут добавлены в следующую версию. Эти версии временно доступны до выпуска новой версии программного обеспечения.

Это официальный отказ от ответственности в отношении EAP:

Это ранняя версия продукта. Вы прямо признаете, что эта версия продукта может быть ненадежной, может работать не так, как предполагалось, и может содержать ошибки. Любое использование продукта EAP осуществляется на ваш страх и риск.

Заключение

VS Code больше похож на редактор, чем на IDE, к которой относится WebStorm. WebStorm в своей стандартной установке имеет больше возможностей, чем VS Code в своей стандартной установке без каких-либо дополнительных установленных расширений.

Microsoft создала замечательный продукт с VS Code, который вы, конечно же, можете использовать для более крупных бизнес-приложений. Как правило, я бы предпочел и рекомендовал использовать WebStorm по следующим причинам:

Улучшенные функции анализа кода.
Универсальная интегрированная среда разработки с хорошей базовой функциональностью без необходимости установки множества дополнительных плагинов.
Значительно улучшенные возможности рефакторинга кода

Если вы предпочитаете скорость, предпочитаете использовать программное обеспечение с открытым исходным кодом или просто хотите быстро отредактировать некоторые файлы конфигурации, вам следует выбрать VS Code.

Каков ваш опыт использования VS Code и WebStorm? Дайте мне знать в комментариях, что вы используете для разработки своего приложения!

Мой код VS и настройка WebStorm

На снимках экрана в этой статье показано, как VS Code использует тему Material Dark, а WebStorm использует пользовательский интерфейс Material с темой Material Darker.

Обсуждение (136)

Хорошее сравнение, хотя я не соглашусь с вами в том, что VScode не так хорошо подходит для больших проектов. Я могу делать все, что вы упомянули, чего не хватает в VScode. (Например, запуск тестов кармы в IDE с помощью wallabyJS)

Для меня это сводится к предпочтению между готовыми функциями и созданием собственного набора функций с помощью подключаемых модулей.

Независимый подрядчик через Sentian Cloud Computing Inc и самозанятых (Toptal, AIM Group, прямой и т. д.)

Рефакторинг, поиск/замена, расширение выборки и регрессионное тестирование в среде IDE jetbrains (будь то webstorm или pycharm и т. д.) сломают двери по сравнению с кодом. Но вы должны испытать эти функции на собственном опыте в IDE jetbrains, потому что простое сравнение функции "на странице" с функцией пропускает важные различия, которые имеют огромное влияние на производительность.

Единственными реальными преимуществами кода VS являются время запуска, объем памяти и цена, т.е. мне еще предстоит найти функцию, которую я использую ежедневно и которая действительно лучше, чем продукт jetbrains. Я предполагаю, что большинство из нас запускают свой графический интерфейс раз в несколько недель, поэтому для быстрого редактирования и минимального пользовательского интерфейса я использую vs code или даже vi. Что касается цены: большинство могут позволить себе стоимость качества (т.е. IDE jetbrains), но не хотят из-за какого-то странного представления о том, что лучше бесплатно.Память - самая большая проблема для меня в среде IDE jetbrains, когда графический интерфейс остается открытым в течение нескольких недель, но после использования кода vs в течение 6 месяцев я возвращаюсь к pycharm, поскольку мне просто слишком много не хватает его функций Ferrari, ежедневно. Я сохраню код VS для быстрого редактирования.

Я использую IDE от JetBrains уже много лет, и, на мой взгляд, здесь нет конкурентов.

В основном я работаю над IntelliJ как Java-разработчик. Я также использовал VS Code для задач внешнего интерфейса. Мой опыт показывает, что IntelliJ (или IDE на основе IntelliJ) быстрее с точки зрения поиска, рефакторинга, статического анализа и т. д. из-за того, что он индексирует ваш проект. При открытии нашего монорепозитория в VS Code поиск файлов/символов/методов происходит намного медленнее по сравнению с IntelliJ.

Спасибо за запись! Вот мои мысли.

Несправедливо сравнивать Webstorm и VSCode «из коробки». Оба используют много расширений, и вы всегда устанавливаете больше в обоих (или удаляете некоторые из значений по умолчанию). Если конечным результатом является аналогичная функциональность, то практической разницы нет.

Несмотря на вышеизложенное, Webstorm намного лучше IDE, чем VSCode, когда дело доходит до кодирования по многим причинам, но есть одна важная, которую вы также упомянули: рефакторинг.

Вы не упомянули одну вещь, которая, как мне кажется, является одним из, если не самым большим отличием функций, а именно модальным окном «Найти/Заменить в файлах». Когда он был выпущен пару лет назад, это изменило правила игры. Я просто не могу жить без него. Я никогда не видел такого инструмента. Панель VSCode «Найти/Заменить в файлах» значительно хуже, чем предыдущая панель «Найти/Заменить в файлах» Webstorm, которая сама по себе была великолепной.

В Webstorm вы можете переименовывать папки и файлы, и они будут обновляться на протяжении всего проекта. Вы можете перетаскивать файлы и папки в новые места, и вся ваша кодовая база будет обновлять каждую ссылку на них. В VSCode есть расширение, которое должно это делать, но оно глючит и работает не так, как ожидалось. Одна из его худших ошибок заключается в том, что он изменяет все импортируемые вами node_modules на их полные пути, такие как «../../../node_modules/path/to/the-libs/file.js» в каждом затронутом файле. Это непригодно для использования.

Множество других приятных функций также значительно упрощают кодирование в Webstorm. Затемнение неиспользуемых функций, автоматическое внедрение импорта при вставке, автозаполнение импорта, автоматическое преобразование класса HTML в имя класса React при вставке и множество небольших, но полезных функций, которые превращают работу в Webstorm в удовольствие.

Однако, если честно, в VSCode есть несколько действительно отличных расширений, которых нет в Webstorm.

Самая важная функция — VS Live Share, которая с каждым выпуском становится все лучше и лучше. Тем не менее, я могу использовать его и по-прежнему кодировать в Webstorm. Я размещаю сеанс Live Share, и изменения автоматически обновляются в VSCode, поэтому человек на другом конце видит эти изменения. Он не идеален, потому что вы не можете воспользоваться преимуществами функции «следить за вами», но все равно полезен.

Расширения Git просто лучше. Gitlens и Git History полны замечательных функций, которых нет в Webstorm. Однако я в основном использую Git в командной строке, поэтому не сильно скучаю по ним.

Это может показаться незначительным, но настройка, которую вы можете выполнить для фрейма приложения, намного лучше, чем у Webstorm. Я попытался установить плагин Webstorm Material, и он заставил Webstorm работать как патока, и мне потребовалось немало времени, чтобы выяснить, как полностью удалить его, потому что он оставил после себя всевозможные изменения. Webstorm застрял с цветовой рамкой Darcula. Не критично, но VSCode имеет более целостный взгляд на свои темы.

Присоединяйтесь к сообществу DZone и получите все возможности участника.

Хорошо, хорошо, я знаю, что название спорное, но не начинайте с меня. Я был заперт уже более 9 недель из-за COVID-19, домашнего обучения моих детей, работы на полную ставку (за что я очень благодарен) и попытки не заболеть сердечным заболеванием из-за переедания и питья. слишком. Так что просто беги со мной сюда.

Начнем с того, что это не сеанс ненависти к VS Code. Мне на самом деле очень нравится VS Code. Я думаю, что это отличный инженерный продукт, сообщество и экосистема просто фантастические, время начала такое хорошее (я люблю код), цена идеальна, и — полное раскрытие — в настоящее время я пишу эту часть, используя VS Code! Так что это не хейтерская сессия.

Это также не корпоративная болтовня. Instil является партнером JetBrains по обучению, но мы использовали их материалы для внутренней разработки задолго до этого, и я использовал продукты JetBrains до прихода в Instil. Мы рекомендуем их продукты клиентам и на тренингах, потому что мы на самом деле считаем, что они лучшие и помогают в вашей повседневной работе.Итак, мы не получаем комиссию — вся эта статья — мои собственные мнения, и это всего лишь мнения.

Итак, приступим. Я хотел написать этот пост после завершения недавнего проекта (React, TypeScript, Electron), где я часто работал в паре с коллегой, который использовал VS Code. Это напомнило мне, почему я предпочитаю разработку в WebStorm, JavaScript IDE от JetBrains. Обратите внимание: я не эксперт по VS Code, поэтому может существовать (вероятно, есть) способ сделать все, что делает WebStorm в VS Code, поэтому я начинаю с…

1. Готово к работе

Есть несколько отличных наборов, но мне эта охота не доставляет удовольствия. Много раз приходилось обучать команду, которая на самом деле использует VS Code, и у каждой из них есть разные доступные функции. У меня тоже могут быть некоторые функции в моем VS Code, но я не могу сказать им, какое расширение их включило. У меня также были сценарии, когда я пытался воспроизвести функцию WebStorm, поэтому я устанавливал расширение, и оно работало, может быть, на 75 %. Поэтому я пробую другой, и теперь я получаю конфликт и несколько вариантов меню для одного и того же.

Это не означает, что вы не можете получить VS Code именно так, как вам нужно, а затем поделиться этим с командой. Но это больше работы.

Я слишком занят. Я устанавливаю Вебсторм. Я делаю обновления с помощью Toolbox. Я продолжаю свою работу.

2. Режим столбца

Эта функция очень полезна в WebStorm и других интегрированных средах разработки JetBrains. Удерживайте Shift + Alt и перетащите мышь, чтобы выбрать столбцы, а не строки. UX просто очень приятный. При перетаскивании в конце строк курсор обнимает конец строки, что обычно и требуется.

Alt + щелчок позволяет разместить несколько курсоров в произвольных местах. Дважды нажав и удерживая клавишу Ctrl, вы также можете использовать несколько курсоров со стрелками на клавиатуре. Кроме того, линейная навигация (дом, конец, стрелки, Ctrl + стрелки и т. д.) работает и с несколькими курсорами.

VS Code тоже так делает, но немного более неуклюже. Вы можете использовать один модификатор (Shift + Alt + перетаскивание) для режима столбца, но это не хорошая версия, обнимающая конец строки. Он также расширяется от того места, где в данный момент находится курсор, а не начинается выделение с первого щелчка. Alt + щелчок также выполняет произвольное размещение нескольких курсоров, но вам также нужно сначала включить его. Вы можете выбрать блок, а затем нажать другую клавишу ( Alt + Shift + I ), чтобы поместить курсор в конец строки. Так что, как и многое другое в VS Code, функции могут быть, но они не работают так же хорошо или интуитивно.

3. Быстрые исправления

Alt + Enter — ваш лучший друг в WebStorm. Быстрые исправления отлично справляются с тяжелой работой во время написания кода. Например, я обычно вызываю методы до того, как они существуют, передавая параметры, думая об имени и назначении, а затем быстрый Alt + Enter вызывает быстрое исправление для создания метода или функции. Вы узнаете расположение различных исправлений и можете быстро использовать стрелки и Enter для выбора. Например, для создания метода/функции он является верхним, поэтому быстрая последовательность Alt + Enter , Enter создает мой метод.

Затем сгенерированный шаблон кода позволяет мне быстро просмотреть имена аргументов, прежде чем поместить себя в тело метода. Эти быстрые исправления повсюду — инвертировать if , удалить лишние элементы кода, обновить метод возврата, добавить аргумент в сигнатуру метода, исправить ES Lint, игнорировать директивы и т. д.

Итак, в VS Code есть Ctrl + . для аналогичного функционала. Просто кажется, что он никогда не предлагает столько, а те, которые есть, похоже, не работают. Например, метод generate (по крайней мере, в моей настройке) не добавлял пробелы для разделения сгенерированного метода, не позволял редактировать имена параметров и оставлял курсор на месте вызова.

Кроме того, когда я приступил к созданию примера для номера 5 ниже, я написал некоторый код, а затем попытался использовать помощь для создания функций. Меню не предоставило мне действие для создания функции. Кажется, это работает для методов внутри классов, но не для функций. Очень разочаровывает — как и многие другие мои опыты с VS Code — это почти работает. Это поможет вам пройти 75 % пути.

4. Автоматический импорт и рефакторинг перемещения

Автоимпорт в WebStorm просто работает. Я знаю тип, который мне нужен, я использую его в коде и позволяю IDE выполнять автозаполнение. Это не только автозаполнение, но и автоматический импорт. Если я сначала написал имя (или вставил что-то в файл), то простое нажатие Alt + Enter выведет меня к моим быстрым исправлениям, и я смогу быстро добавить импорт.

Мне также нравится перемещать файлы, просто перетаскивая их, и быть уверенным, что все импортированные данные будут обновлены правильно. Я думаю о том, как я хочу структурировать код, а затем вношу изменения, не беспокоясь об усилиях, поскольку IDE выполняет тяжелую работу. Так и должно быть.

В прошлом я обнаружил, что расширения автоматического импорта VS Code немного ненадежны (хотя при повторном тестировании для этой статьи они кажутся довольно хорошими). Есть некоторые незначительные неудобства, например, когда я перемещаю файлы, открываются все остальные файлы, которые необходимо обновить.

5. Извлечение переменных, констант и методов

Это то, чем я занимаюсь постоянно. Выделение выражения или блока кода и извлечение его как переменной, константы или функции. Для этого есть расширения в VS Code, но WebStorm работает лучше. Мы можем использовать Ctrl + Alt + V для переменных, P для параметров и C для констант, а среда IDE достаточно умна, чтобы видеть несколько вхождений и заменять их все.

Для функций это позволит мне выбрать, где разместить функцию. Это очень полезно для вложенных структур и функций высшего порядка. Например, в тесте я могу вызвать вспомогательную функцию.

Ctrl + Alt + M извлекает выделенный код в метод или функцию. Поскольку мы работаем на TypeScript, это можно поместить в 4 области видимости, внутри стрелочной функции it, в любой из стрелочных функций описания или глобально. WebStorm позволяет мне легко выбирать, где именно.

VS Code предлагается размещать только на уровне модуля.

Также интересно, что я сделал это в VS Code, используя Ctrl + . так как нажатие F1 , которое должно отображать все действия, не предлагало функцию извлечения. Я также обнаружил, что он будет предлагать размещение в различных областях в других частях кода. Вот такое несоответствие меня раздражает. Он также не найдет несколько вхождений.

6. Встраивание

Это обратная сторона медали извлечения переменных, констант и функций. У меня будет что-то с именем, которое не добавляет никакой ценности, и я могу легко встроить его в места, где оно используется, с помощью Ctrl + Alt + N. Я не видел способа сделать это в VS Code.

7. Интеграция с Git

В основном я использую Git из командной строки, но для некоторых операций лучше использовать графический интерфейс. Интеграция с VS Code довольно хороша, но у WebStorm есть отличный UX. Например, получение истории по блоку кода.

8. Проверка кода и предложения

Я считаю, что WebStorm действительно хорошо информирует меня о моем коде, указывая на ситуации, в которых я могу ошибаться или могу написать более чистое решение. Некоторые из этих вещей будут поступать из служб компилятора или ES Lint и VS Code, которые часто могут их предоставить. Других VS Code не предоставляет. Например, здесь я получаю подсказку, что вызываю метод, возвращающий обещание, но не использую await .

Я считаю, что WebStorm регулярно обновляет языки и платформы. Тогда эти подсказки отлично подходят для изучения новых функций и идиом языка или фреймворка. Удобный Alt + Enter применяет быстрое решение для обновления.

9. Найти

Это повсеместная функция редактора. Тем не менее, скорость WebStorm Find in Files очень хороша. Я нажимаю Ctrl + Shift + F, и тогда окно есть. Я начинаю печатать и сразу вижу результаты. Простая фильтрация по типу файла, регистру, регулярному выражению, каталогу и т. д. просто делает эту замечательную функцию для навигации по коду. Окно результатов поиска также имеет все возможности редактирования, поэтому я могу вносить изменения тут же.

В VS Code также есть функция "Найти в файле", но интерфейс далеко не такой гладкий.

10. Все остальное

Есть много мелочей, которые IDE делает лучше. Например, VS Code переместит строку кода вверх или вниз с помощью Alt + Up/Down. WebStorm также делает это с помощью Ctrl + Shift + Up/Down, но также распознает блоки. Таким образом, я могу быстро перемещать функции и классы вверх как единый блок, не выделяя их. Мне нужно только, чтобы курсор находился в строке сигнатуры функции или в первой строке for/while и т. д. Отслеживание отмены/повтора великолепна. Локальная (не Git) история спасает, когда я слишком усердно работаю с командами Git... и многим другим.

Заключение

Я не думаю, что я слишком предвзят. Я я довольно ленив, поэтому мне нужен простой способ делать то, что мне действительно важно, — писать чистый код для создания полезного программного обеспечения для клиентов. WebStorm дает мне это.

В VS Code есть еще много того, что может понравиться, и есть много вещей наравне с WebStorm (и даже лучше). Я с нетерпением жду поста «10 причин, по которым я предпочитаю VS Code WebStorm» — возможно, однажды я напишу его сам.

Кроме того, я не плачу по счетам (точнее, не напрямую), поэтому здесь я не оцениваю соотношение цены и качества. Но как профессиональный разработчик я вижу, что стоимость лицензии окупается за время, необходимое для настройки VS Code.

Наконец, мне все равно, какую IDE вы используете. У меня есть свои предпочтения, но какой бы вы ни выбрали, постарайтесь стать его мастером. Если вам нравится VS Code, изучите сочетания клавиш, объединитесь с другими опытными пользователями, изучите лучшие расширения и поделитесь ими со своей командой.Все это принесет свои плоды в долгосрочной перспективе, и вы будете тратить больше времени на размышления о своем коде и меньше времени на его ввод… и это хорошо.

Опубликовано на DZone с разрешения Имонна Бойла. Смотрите оригинальную статью здесь.

Разработчики Swimm обсуждают инструменты разработки — нередкое явление. И мы предполагаем, что дебаты о выборе лучших инструментов разработки станут частью наших разговоров/обсуждений.

Мы знаем, что у большинства разработчиков есть явные предпочтения в отношении IDE, и это ничем не отличается от нашей команды разработчиков здесь, в Swimm. Но мы знаем, что даже с любимой IDE переключение IDE вовсе не редкость. На практике чаще всего на Swimm выбираются IDE Visual Studio Code (VS Code) и WebStorm.

Плюсы и минусы VS Code и WebStorm

VS Code — бесплатный текстовый редактор с открытым исходным кодом, созданный Microsoft для современных веб-приложений и облачных приложений на любой платформе — Linux, OSX и Windows. Большие преимущества: VS Code настраиваемый, многоязычный, быстрый и легкий, сочетающий в себе современные возможности редактирования и отладки с поддержкой кода и навигацией.

WebStorm – это интуитивно понятная, платная и лицензированная среда разработки JavaScript, созданная JetBrains для интерфейсной разработки и серверного JavaScript. Особенности WebStorm: это всеобъемлющая и интеллектуальная интегрированная среда разработки для удобного запуска, отладки и модульного тестирования приложений Node.js, а также хороший рефакторинг кода и автоматический импорт.

Фактор ценообразования VS Code и WebStorm

Цены могут отпугнуть некоторых разработчиков от использования WebStorm в целом, поскольку для этого требуется ежемесячная или ежегодная абонентская плата после 30-дневного пробного периода.

Благодаря открытому исходному коду VS Code полностью исключает возможность принятия решений. Бесплатно бесплатно.

Другие замечания по VS Code и WebStorm

В WebStorm уже есть большинство готовых функций, тогда как в VS Code вам, вероятно, потребуется установить некоторые расширения вручную, чтобы протестировать средства выполнения, получить расширенные функции для конкретных языков и т. д.
WebStorm предоставляет потрясающие инструменты слияния Git с отличной визуализацией изменений различий Git. Это значительно упрощает слияние сложных изменений и разрешение конфликтов.
WebStorm автоматически отслеживает все изменения файлов, позволяя проверять историю файлов, каталоги и откаты.
И VS Code, и WebStorm быстро форматируют файлы при сохранении, настраиваются и хорошо работают с автозаполнением, отладкой и документацией.

Переход на открытый исходный код с быстрым и легким VS Code

По нашему опыту, пользователи VS Code привержены миру открытого исходного кода. И не зря, если вы поклонник открытого исходного кода.

Среда VS Code с открытым исходным кодом позволяет изменять совместную работу, связь и доступность. Недостатки? Он может содержать ошибки, пропускать функции или иметь несоответствия между языками. Тем не менее многие разработчики, особенно разработчики, не работающие в крупных компаниях, предпочитают открытый исходный код, особенно когда важным фактором является цена.
Производительность — явное преимущество VS Code. Он работает быстро при обычном использовании, имеет быстрое время запуска и быстрое редактирование файлов. Работает на JavaScript и HTML, основой для VS Code является Electron, тогда как WebStorm разработан на Java. Распространенной жалобой является то, что WebStorm работает медленно.
Что касается дизайна пользовательского интерфейса, VS Code очень минималистичен, но пользователи могут настраивать его с помощью готовых тем, чтобы помочь разработчикам сделать так, как они хотят. Напротив, WebStorm наполнен функциями. Пользователи могут настроить скрытие функций, кнопок, меню и ярлыков, но может потребоваться время, чтобы понять и адаптироваться ко всем параметрам.
Кроме того, VS Code очень легкий, что делает его удобным для удаленной разработки, быстрого прототипирования и больших бизнес-приложений. Расширения VS Code добавляют поддержку улучшений GIT, встроенных ошибок и улучшенных комментариев.

Максимальная проверка кода и рефакторинг с помощью WebStorm

Если у вас есть средства для оплаты IDE, у WebStorm есть явные преимущества.

WebStorm обеспечивает статический анализ кода и интеллектуальные подсказки, которые являются большим преимуществом при рефакторинге, с предложениями по исправлениям и улучшениям. Повторяющиеся подсказки по коду способствуют повторному использованию кода и передовым практикам. Подсказки мертвого кода способствуют лучшему стилю, простоте и удобочитаемости кода. Это делает WebStorm хорошим выбором для рефакторинга кода JavaScript/TypeScript, проверки и разработки новых функций.
WebStorm также индексирует весь ваш проект, что, по общему признанию, может быть недостатком, если вы хотите просто открыть IDE и сразу приступить к работе.Но для многих из нас индексы являются преимуществом (и достойным ожидания), потому что они обнаруживают ваши неиспользуемые методы и позволяют вам узнать, не используются ли экспортированные переменные где-либо в вашем проекте для безопасного удаления. Кроме того, вы можете перемещать функции и переменные из одного файла в другой, тогда как VS Code использует только текущий файл. Благодаря интеграции с Angular CLI WebStorm обеспечивает поддержку редактирования шаблонов Angular. Это также помогает с автозавершением кода для переменных, конвейеров и ссылочных переменных шаблона.
И VS Code, и WebStorm позволяют выполнять рефакторинг путем переименования символов и преобразования параметров функций в один объект. Но WebStorm извлекает блок кода в функцию и преобразует блок JSX в компонент React; он надежен и гибок как для языковых ошибок, так и для ошибок времени выполнения.

Интеграция документации в рабочий процесс CI

Поскольку мы уже сообщали, что используем и VS Code, и WebStorm в Swimm, неудивительно, что оба могут интегрировать документацию вместе с кодом с расширениями IDE.

В настоящее время плагины Swimm поддерживают документацию, созданную только в приложении Swimm. В будущем подключаемые модули IDE для Swimm также будут поддерживать создание документации вне приложения.

Итог

В споре о VS Code и WebStorm IDE у большинства из нас есть свое мнение. В этом смысле нет никаких дебатов; у разработчиков есть явные предпочтения.

Ключевым преимуществом WebStorm является то, что это полноценная интегрированная среда разработки, обеспечивающая отличные возможности готовой работы. Его предпочитают те, кто привык к полной IDE или занимается большими проектами рефакторинга. VS Code является фаворитом в сообществе разработчиков ПО с открытым исходным кодом, но требует дополнительных установок для полной функциональности IDE. У Swimm есть подключаемые модули VS Code и WebStorm для улучшения вашей CI, Github и рабочего процесса с помощью нового опыта обмена знаниями для сложной отладки, учебных курсов по коду и простой адаптации.

Для поклонников VIM IDE мы оставляем вас с этим:

В Swimm много чего происходит, и если вы хотите понять, почему все говорят о Continuous Documentation, подпишитесь на бесплатную бета-версию Swimm или закажите демонстрацию и узнайте, как Swimm интегрирует Continuous Documentation в рабочий процесс разработки, чтобы код- связанные документы в вашей CI и IDE всегда актуальны.

Поддержите меня, купив мне кофе, спонсируя или наняв меня, чтобы я сделал для вас красивый веб-сайт!

Некоторое время назад я написал статью, в которой сравнивал VS Code с Atom. Несмотря на то, что с тех пор прошло немало времени, он вполне выдержал испытание временем.

Итак, сегодня мы будем делать что-то похожее в том смысле, что мы будем сравнивать 2 очень популярные среды кодирования. На этот раз это, скорее всего, будут известные вам VS Code и WebStorm — IDE для веб-разработки из семейства IDE от JetBrain. Давайте погрузимся!

Во-первых, давайте узнаем больше о наших настоящих претендентах.

Код VS

В настоящее время VS Code, возможно, является самым популярным редактором кода в мире и среди веб-разработчиков. Он разработан корпорацией Майкрософт совместно с большим сообществом разработчиков открытого исходного кода.

Под капотом он использует Electron (фреймворк для создания настольных приложений с веб-технологиями) и обладает широкими возможностями настройки и расширения.

Веб-шторм

WebStorm — одна из самых известных и продвинутых IDE для JavaScript. Он разработан JetBrains — компанией с многолетним опытом создания мощных IDE для различных языков программирования.

Являясь полноценной IDE, WebStorm предоставляет впечатляющий набор функций и инструментов для веб-разработки с достойной производительностью благодаря поддержке JVM.

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

Хотя VS Code в основном с открытым исходным кодом и, безусловно, на 100 % бесплатен, WebStorm не является ни тем, ни другим. Это стоит 5,90 долларов в месяц или 59 долларов в год для частных лиц и немного больше для организаций. Важно отметить, что стоимость со временем снижается, поэтому, если вы платите за WebStorm 3 года подряд, с этого момента вы сможете платить за него всего 35 долларов США в год.

Теперь это может поставить галочку или даже полностью отбить у многих разработчиков желание даже попробовать WebStorm. Это печальная реальность, в которой мы живем: воспринимаемая ценность программного обеспечения снижается, клиенты не хотят платить, а модель подписки берет верх. Тем не менее, я думаю, что нет ничего плохого в том, чтобы платить за продукт, который обеспечивает надлежащую ценность — и это, безусловно, относится к WebStorm. Поэтому подумайте хотя бы о том, чтобы попробовать WebStorm в течение 30-дневного пробного периода, использовать его и продолжить чтение, прежде чем принимать решение.

Покончив с ценообразованием, мы наконец-то можем поговорить о самих продуктах.Начнем с дизайна.

Дизайн (пользовательский интерфейс/пользовательский интерфейс) VS Code выглядит очень современным, стильным и минималистичным. Но кроме этого, очень трудно говорить об этом. Это связано с тем, что почти каждый аспект пользовательского интерфейса VS Code может быть изменен и настроен пользователем. Доступны тонны готовых к использованию тем, и каждый может создать свою собственную, потратив немного времени и немного подправив ее тут и там. Таким образом, вы не можете сказать, что что-то выглядит не очень хорошо, если вы всегда можете заставить это выглядеть так, как вы хотите.

WebStorm, с другой стороны, представляет собой полноценную IDE и не может позволить себе быть минималистичным. Огромное количество встроенных в него функций может заставить новичков чувствовать себя ошеломленными количеством всех кнопок, меню и ярлыков, в которых время от времени могут потеряться даже более продвинутые пользователи. Конечно, есть варианты скрыть часть беспорядка и немного изменить дизайн, но это не приближается к возможностям настройки VS Code. Но опять же, возможно, этот форм-фактор даже не позволяет.

Теперь сравнение производительности и скорости двух сред может быть интересным, поскольку у нас есть два принципиально разных подхода с разными инфраструктурами для их резервного копирования. Как это работает?

Высоко настраиваемый и расширяемый, но все еще поддерживаемый прожорливым к ресурсам Electron, VS Code находится в интересном положении. Когда-то, когда я сравнил его с Atom — пионером Electron — VS Code показал многообещающие результаты. Само приложение было довольно плавным, работало без каких-либо проблем. Только после добавления нескольких тяжелых расширений я увидел снижение производительности. В основном это верно и по сей день.

С учетом сказанного, WebStorm обладает множеством функций. Это заставляет его чувствовать себя медленным и потреблять много ресурсов вашего устройства. Но поскольку он использует JVM под капотом, он, безусловно, немного быстрее и оптимизирован, чем любое приложение Electron. Именно все эти дополнительные функции замедляют работу IDE.

Теперь большинство этих функций WebStorm можно отключить, но действительно ли это то, что вам нужно? Никакого автодополнения в реальном времени, никакого линтинга, никакого управления Git — на этом этапе вам лучше использовать простой редактор кода, такой как VS Code. Это быстрее, но опять же — только когда вы ограничиваете количество используемых вами расширений. Если бы вы расширили VS Code до уровня, соответствующего возможностям WebStorm, могу поспорить, что производительность будет сравнима, если не хуже, с VS Code.

Итак, я бы сказал, что категория производительности ничья. Это действительно зависит от того, что вы хотите сделать и как вы хотите сделать это с помощью своего инструмента. Хотите простоты и скорости? - перейти с кода VS. Учитывая VS Code, но только с кучей дополнительных расширений? – WebStorm может быть лучшим выбором.

Итак, мы видим, что производительность сильно зависит от набора функций, но как они соотносятся между инструментами?

С точки зрения VS Code, мы можем утверждать, что его главная особенность — расширяемость. Без установки каких-либо расширений все, что вы получаете, — это элегантный пользовательский интерфейс в сочетании с базовым автозаполнением и подсветкой синтаксиса, простым отладчиком и некоторыми инструментами управления Git. Это почти все, что вы получаете «из коробки».

Но я бы сказал, что VS Code без расширений на самом деле не является VS Code. Расширяемость с более чем 10 000 расширений и тем, а также простой способ создания собственного делают VS Code тем, чем он является на самом деле, — потрясающим расширяемым редактором кода.

С другой стороны, в WebStorm почти все встроено. Практически все популярные фреймворки, инструменты и библиотеки JavaScript найдут свое место в WebStorm. Существует небольшой уровень настраиваемости с различными расширениями для разных функций, но он не приближается к размеру рынка расширений VS Code. Тем не менее, некоторые могут предпочесть этот готовый опыт, который вы получаете с WebStorm. Меньше возможностей настройки и отсутствие каких-либо функций означает, что вы можете просто установить программное обеспечение и начать работать.

Помня об этом объективном сравнении, я также хотел бы поделиться с вами некоторыми своими мыслями по этому поводу. Лично я ярый пользователь VS Code. Мне нравится его чистый внешний вид, все эти широкие возможности настройки и особенно все расширения, которые я могу установить в любое время. Любой язык программирования, любой вариант использования, любой сценарий — для этого есть расширение.

Однако бывают случаи, когда VS Code не справляется. Может быть, это из-за моей машины или гигантской конфигурации, но расширение ESLint, например, часто нельзя надежно использовать в режиме "run on type". Такие случаи подтолкнули меня к поиску альтернатив, и так я столкнулся с WebStorm.

На этом конце спектра я действительно наслаждался готовым интерфейсом без необходимости что-либо устанавливать. Только при первом запуске я установил тему Material Design (кстати, она отлично выглядит), и все. Конечно, потребовались некоторые настройки шрифта и отображения пользовательского интерфейса, что потребовало от меня просмотра всех меню, но это было не так уж и плохо.

Автодополнение JS/TS работало в паре с VS Code intellisense, встроенное управление Git было превосходным, а функция локальной истории (по сути, фоновый автоматический репозиторий Git) временами спасала жизнь. Если честно, ESLint с моим громоздким конфигом тоже работал довольно гладко, только с бешено крутящимися вентиляторами.

В конечном счете, я оставляю и VS Code, и WebStorm установленными. Хотя я использую в основном VS Code из-за того, что WebStorm предлагает прямые цены, я по-прежнему ценю все функциональные возможности, предоставляемые IDE.

Подводя итог, я называю этот матч ничьей. В отличие от Atom и VS Code, здесь меньше сходства и, следовательно, меньше возможностей сказать, какой инструмент действительно лучше. Если вы готовы потратить немного денег на опыт высшего уровня и у вас есть устройство, которое может с этим справиться, не стесняйтесь использовать WebStorm. В противном случае вы всегда можете потратить некоторое время на настройку VS Code в соответствии со своими потребностями.

Но это только мое мнение. Я настоятельно рекомендую вам поделиться своими в комментариях ниже. Вы пользователь VS Code или WebStorm? Может быть, вы используете совсем другой инструмент? Каковы причины, по которым вы его используете? На эти и другие вопросы - раздел комментариев официально открыт!

Подпишитесь на меня в Твиттере, Facebook или в моей рассылке, чтобы получать более свежие материалы по веб-разработке. Спасибо за чтение и удачного кодирования!

Читайте также: