Когда я начал свой первый проект 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 обычно заключается в том, чтобы пометить тестовый блок describe или it знаком f (например, fdescribe), который указывает Karma запускать только этот определенный тестовый блок. В качестве альтернативы я использую karma-jasmine-html-reporter, где вы также можете определить запуск только определенных тестов, щелкнув их на странице HTML.
В настоящее время также разрабатывается Адаптер теста кармы VS Code, который должен обеспечить аналогичную интегрированную функциональность теста кармы для 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 не настолько мощен.
Угловая интеграция с интерфейсом командной строки
WebStorm обеспечивает хорошую интеграцию с Angular CLI с помощью так называемых Angular Schematics:
В целом WebStorm имеет отличную поддержку Angular, поскольку он помогает редактировать шаблоны Angular, обеспечивает завершение кода для переменных, конвейеров и ссылочных переменных шаблона.
Скорость
VS Code основан на Electron и работает на HTML и JavaScript.
WebStorm разработан на Java и в целом работает медленнее, чем VS Code. Не сказал бы, что он критично медленнее, но разница в скорости заметна.
VS Code имеет более быстрое время запуска, но если вы работаете над проектом, ваша IDE или редактор всегда открыты, и время запуска не играет решающей роли.
Проверка доступности для 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 Theme и WebStorm с использованием Material UI с Material Darker theme.
Первоначально опубликовано на www.mokkapps.de.
