Світ програмування величезний, особливо коли йдеться про 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.
