Мир программирования огромен, особенно когда речь идет о Javascript. В нем существует огромное количество возможностей и различных технологий. Разработчики ежедневно создают новые инструменты, а некоторые уже существующие могут потерять свою значимость. Ориентироваться в этом ландшафте бывает непросто, но есть кое-что, что может помочь: интегрированная среда разработки или IDE.
Существует множество IDE для разработки Javascript-проектов. Среди наиболее популярных можно назвать VsCode, Sublime Text, Atom, Eclipse, Notepad++ и Webstorm. В данной статье речь пойдет о Webstorm IDE, разработанной компанией JetBrains. Эта компания также ответственна за создание таких известных IDE, как IntelliJ IDEA для разработчиков Java, Pycharm для разработчиков Python и PHPStorm для разработчиков PHP.
WebStorm
Webstorm — это отличная IDE, предназначенная для веб-разработки. С ее помощью можно быстро писать HTML, таблицы стилей и Javascript. В отличие от других IDE, где для работы с различными Javascript-фреймворками необходимо использовать плагины, в Webstorm имеется встроенная поддержка различных библиотек и фреймворков Javascript, таких как NodeJS, ReactJS, VueJS, Electron, Angular и многих других.
Помимо интуитивно понятного пользовательского интерфейса, удобного в использовании и навигации, WebStorm поддерживает множество других невероятных функций, в том числе:
- Завершение кода: WebStorm автозаполняет соответствующие ключевые слова и символы по мере ввода кода. Некоторые из этих функций, присутствующие в Javascript и Typescript, реализованы с помощью алгоритмов машинного обучения. Для повышения скорости набора текста можно также использовать такие инструменты, как постфиксное завершение, живые шаблоны и Emmet.
- Анализ качества кода: Надежное обнаружение ошибок в WebStorm с помощью многочисленных проверок, проверки орфографии и интеграции с такими анализаторами, как Stylelint и ESLint, обеспечивает удобство работы с кодом, выделяя проблемы по мере набора текста и предлагая быстрые решения непосредственно в редакторе.
- Быстрая документация: В WebStorm можно легко получить доступ к документации по символам — наведите курсор на символ или поместите на него каретки и нажмите клавишу F1, чтобы получить множество подробных сведений.
- Встроенный предварительный просмотр HTML: WebStorm предлагает удобную функцию, позволяющую просматривать статические HTML-файлы непосредственно в IDE. Любые изменения в HTML-файле и связанных с ним CSS- и JavaScript-файлах автоматически сохраняются и оперативно отражаются в предварительном просмотре, обеспечивая удобство и эффективность визуализации изменений.
- Встроенный HTTP-клиент: Используйте встроенный HTTP-клиент WebStorm для тестирования веб-сервисов без особых усилий. Создавайте, редактируйте и выполняйте HTTP-запросы непосредственно в редакторе для эффективного и удобного тестирования.
- И многие другие возможности редактирования кода: WebStorm уделяет большое внимание производительности разработчиков, предлагая различные функции для ускорения кодирования. Такие возможности, как многократные каретки, действия по редактированию строк, автоматическое переформатирование кода — это лишь малая часть того, что вас ожидает.
Установка WebStorm на Ubuntu
Для установки WebStorm в систему Ubuntu можно использовать два способа.
- Установка WebStorm с помощью Snap.
- Загрузить установочный пакет WebStorm с официального сайта JetBrains.
В этой заметке мы рассмотрим оба способа. Давайте приступим.
Метод 1: Установка WebStorm на Ubuntu с помощью Snap
Snap — это независимое от дистрибутива программное обеспечение для управления пакетами, доступное для различных систем Linux. Это означает, что пакеты Snap могут быть использованы в различных дистрибутивах Linux без модификации. Это одно из ключевых преимуществ Snap.
Для установки WebStorm на Ubuntu с помощью Snap выполните следующие действия.
1. Выполните приведенные ниже команды для обновления системы Ubuntu. Выполнение команд обновления в Ubuntu перед установкой нового пакета гарантирует наличие последней информации о пакете, обновлений безопасности и зависимостей, что помогает предотвратить ошибки при установке и сохранить стабильность системы.
sudo apt update
sudo apt upgrade2. После успешного обновления системы выполните приведенную ниже команду для установки демона snaps. Демон snapd — это фоновая служба, которая управляет функциональностью пакетов Snap в системе Linux. Он является неотъемлемой частью системы управления пакетами Snap, позволяя пользователям беспрепятственно устанавливать, обновлять и управлять пакетами Snap.
sudo apt install snapd
Из приведенного изображения видно, что snapd уже установлен в нашей системе.
3. После успешной установки демона Snapd можно установить WebStorm на Ubuntu с помощью следующей команды.
sudo snap install webstorm --classic
Обратите внимание, что WebStorm — это большой пакет, и процесс загрузки может занять некоторое время, зависящее от вашего подключения к Интернету. Пожалуйста, будьте терпеливы.
После успешной установки WebStorm можно запустить из меню приложений, расположенного ниже.
Метод 2: Ручная установка WebStorm на Ubuntu: Загрузка с сайта JetBrains
Если вы не хотите устанавливать пакет WebStorm snap, вы можете вручную установить его с сайта JetBrains. Хотя процесс установки может быть более длительным, он также имеет ряд преимуществ.
- Обеспечивается прямой доступ к последней версии WebStorm с сайта JetBrains.
- Обеспечивает больший контроль над процессом и местом установки.
- Его можно настроить и сконфигурировать в соответствии с вашими потребностями.
Выполните следующие действия.
1. Первый шаг — загрузка установочного файла. Откройте веб-браузер и перейдите на сайт компании JetBrains. Рядом с кнопкой загрузки появится выпадающее меню, в котором можно выбрать файл .tar.gz (Linux) или .tar.gz (Linux ARM64).
- .tar.gz (Linux) предназначен для стандартной системы Linux x86_64. Это наиболее распространенный тип Linux-систем, который используется большинством людей.
- .tar.gz (Linux ARM64) предназначен для более нового типа Linux-систем, использующих архитектуру ARM64. Эта архитектура становится все более популярной, особенно для серверов и встраиваемых устройств.
Если вы не знаете, какая архитектура используется в вашей системе, вы можете проверить информацию о системе. В системе Linux можно выполнить следующую команду:
uname -mВ результате будет выведена архитектура вашей системы. Если написано «x86_64», то следует загрузить файл .tar.gz (Linux). Если указано «aarch64», то следует загрузить файл .tar.gz (Linux ARM64).
В нашем случае мы используем системную архитектуру x86_64. Поэтому мы загрузим файл .tar.gz (Linux), как показано ниже.
2. После успешной загрузки установочного файла WebStorm запустите Терминал из меню приложений или воспользуйтесь комбинацией клавиш Ctrl + Alt + T.
3. С помощью команды cd перейдите в каталог, в котором находится загруженный файл. Например, наш файл находится в каталоге Download.
cd ~/Downloads4. Загруженный файл имеет расширение tar.gz. Это означает, что он сжат.
Совет: tar.gz — это формат сжатых файлов, широко используемый в Unix-подобных операционных системах.
С помощью команды tar извлеките загруженный архив. Замените WebStorm-2023.2.tar.gz именем файла, который вы скачали:
tar -xzf WebStorm-2023.2.tar.gz
5. После успешного извлечения в рабочем каталоге будет создан новый каталог. Переместите эту вновь извлеченную папку в каталог /opt.
sudo mv WebStorm-232.8660.143 /optВот и все! Вы успешно установили его. Однако необходимо сделать еще одну вещь. Создайте запись на рабочем столе для WebStorm, чтобы он был доступен из меню Приложения.
6. Для этого создайте файл .desktop в каталоге /usr/share/applications. Выполните приведенную ниже команду, чтобы создать файл с именем webstorm.desktop.
sudo nano /usr/share/applications/webstorm.desktopДобавьте в файл следующее содержимое.
Совет: Не забудьте соответствующим образом скорректировать имена файлов.
[Desktop Entry]Name=WebStorm
Exec=/opt/WebStorm-232.8660.143/bin/webstorm.sh
Terminal=false
Type=Application
Icon=/opt/WebStorm-232.8660.143/bin/webstorm.png
Categories=Development;IDE;
Сохраните и выйдите из текстового редактора (в nano нажмите Ctrl + X, затем Y и Enter).
7. Далее необходимо установить исполняемые права для сценария webstorm.sh. Для этого выполните следующую команду.
sudo chmod +x /opt/WebStorm-232.8660.143/bin/webstorm.shВот и все! Вы успешно установили WebStorm на свою систему Ubuntu.
8. Теперь WebStorm можно запустить из меню Приложения или выполнив следующую команду в терминале:
/opt/WebStorm-232.8660.143/bin/webstorm.shИспользование WebStorm на Ubuntu
При запуске WebStorm появляется окно «Пользовательское соглашение», как показано на рисунке ниже. Поставьте галочку внизу и нажмите «Продолжить».
Далее появится окно активации. Следует отметить, что WebStorm не является бесплатным — это коммерческий продукт. Он предлагает бесплатный 30-дневный пробный период, в течение которого можно использовать все его возможности. После окончания пробного периода необходимо приобрести лицензию для продолжения использования WebStorm.
На экране активации вы увидите две опции.
- Активировать WebStorm
- Начать пробную версию
В этом посте мы рассмотрим «Пробную» версию. Однако если у вас есть код активации, выберите опцию «Активировать WebStorm».
Примечание: Если у вас есть код активации или вы решили использовать пробную версию, войдите в систему, используя свою учетную запись JetBrains. Нажмите кнопку «Войти в учетную запись JetBrains» или «Зарегистрироваться», если у вас еще нет учетной записи.
После этого вы увидите главное окно WebStorm, как показано на рисунке ниже.
Навигация по пользовательскому интерфейсу WebStorm
Пользовательский интерфейс WebStorm интуитивно понятен и прост в навигации. Он включает боковую панель слева и среднюю панель с различными опциями.
Боковая панель содержит следующие опции:
Проекты: Раздел «Проекты» обеспечивает упорядоченное представление текущих проектов. Он помогает эффективно управлять и перемещаться по различным проектам кодирования. Вы можете легко переключаться между проектами и получать доступ к их файлам, что позволяет работать над несколькими задачами без путаницы.
Удаленная разработка (бета-версия): В настоящее время бета-версия опции «Удаленная разработка» позволяет работать над проектами, расположенными на удаленных серверах или виртуальных машинах. При этом можно писать код так, как если бы проект находился на локальном устройстве, что улучшает совместную работу и позволяет использовать ресурсы из разных сред.
Настроить: Раздел «Настройка» позволяет настроить WebStorm в соответствии с вашими предпочтениями. Вы можете персонализировать работу с кодом, изменяя настройки, темы, привязки клавиш и многое другое. Такая гибкость обеспечивает удобство работы и соответствие рабочему процессу.
Плагины: Опция «Плагины» расширяет функциональность WebStorm, добавляя дополнительные возможности или интеграции. Вы можете расширить свои возможности по написанию кода, установив плагины, отвечающие вашим специфическим потребностям, таким как поддержка языков, контроль версий или управление проектами, что в конечном итоге оптимизирует процесс разработки.
Обучение: Раздел «Обучение» предоставляет доступ к образовательным ресурсам и учебным пособиям, которые помогут вам улучшить свои навыки и стать более опытным в работе с WebStorm. Он представляет собой ценный центр обучения непосредственно в среде разработки, что позволяет удобно повышать уровень знаний и быть в курсе лучших практик.
Средняя панель WebStorm служит для доступа к проектам кодирования.
Новый проект: Опция «Новый проект» позволяет создать новый проект кодирования с нуля. Вы можете задать параметры проекта, выбрать шаблон, установить необходимые файлы и папки, что упрощает начальные этапы создания проекта.
Открыть: Функция «Открыть» позволяет получить доступ к существующим проектам и работать над ними. Вы можете перейти в каталог конкретного проекта и быстро возобновить работу над ним с того места, на котором остановились, обеспечивая плавный переход от одной задачи к другой.
Get from VCS: «Получить из VCS» помогает интегрировать системы контроля версий, такие как Git. Она позволяет клонировать репозиторий проекта из службы контроля версий, предоставляя прямой доступ к исходному коду проекта и истории ревизий для совместной и организованной разработки.
Создание нового проекта в WebStorm
Выполните следующие шаги и узнайте, как начать новый проект WebStorm. В этом посте мы рассмотрим создание нового проекта ReactJS. Однако процедура не должна отличаться для других приложений, таких как Angular, NextJS и т.д.
1. В средней панели окна приветствия WebStorm щелкните на опции «Новый проект». В результате откроется диалог «Новый проект».
2. В диалоговом окне «Новый проект» вы увидите список типов проектов, включая Angular, NextJS, NodeJS, ReactNative и т.д. Найдите «React» или «React App» (точное название может отличаться в зависимости от версии WebStorm). Выберите этот вариант.
3. Выберите местоположение проекта, нажав кнопку «…» рядом с полем «Location». Перейдите в каталог, в котором будет создана папка с проектом React, и нажмите кнопку «OK». Введите имя проекта в поле «Имя». Это будет имя каталога, в котором будут храниться файлы проекта.
4. Выберите предпочтительный менеджер пакетов для управления зависимостями проекта. Вы можете выбрать между «npm» и «yarn». Если вы не уверены, то чаще всего выбирают «npm».
5. После настройки параметров проекта нажмите кнопку «Создать». WebStorm создаст каталог проекта и установит исходные файлы для вашего React-проекта. WebStorm автоматически настроит проект и установит необходимые зависимости. Этот процесс может занять несколько минут, особенно если вы впервые создаете React-проект.
6. После завершения настройки ваш новый React-проект готов. Вы можете начать кодирование, открыв файлы проекта в редакторе и изучив структуру каталогов.
Заключение
В этой статье мы представили пошаговое руководство по настройке WebStorm для развития навыков веб-разработки. Вы узнали, как установить WebStorm различными способами, и познакомились с его удобными функциями, включая интеллектуальные предложения по коду и такие полезные инструменты, как встроенный HTTP-клиент. Кроме того, WebStorm обеспечивает поддержку различных фреймворков и библиотек Javascript. С помощью WebStorm можно уверенно и эффективно заниматься разработкой JavaScript.
