Робота з WebStorm

6.1 Розбір пристрою IDE

Давайте розберемося, що ви тут бачите.

1. Дерево папок і файлів вашого проєкту:

Тут відображається вміст папки нашого проєкту — web-storm-10.

Я спеціально створив один файл, щоб було зрозуміліше, як тут усе влаштовано. На наступній лекції ви теж усе це зробите.

2. Поточний відкритий файл:

Це просто вміст файлу index.html, синтаксис коду підсвічено.

3. Зверху ви бачите основне меню:

Корисні кнопки праворуч угорі:

• «Зелений трикутник» — кнопка запуску проєкту
• «Жук» — кнопка запуску режиму налагодження
• «Лупа» — пошук по проєкту
• «Шестерня» — налаштування

4. Ліворуч ви бачите бокове меню:

Тут є кілька корисних кнопок. Нас, зокрема, буде цікавити кнопка Terminal.

5. Статус-бар:

Ліворуч у статус-барі відображається шлях поточного відкритого файлу. Праворуч його кодування: CRLF, UTF-8. Скоро ви ідеально будете в усьому цьому розбиратися.

6.2 Розбір проєкту

1. HTML-файли.

Такі файли мають розширення .html, і WebStorm позначає їх зеленою іконкою з двома стрілочками.

2. JS-файли.

Такі файли мають розширення .js, і WebStorm позначає їх жовтою іконкою.

3. CSS-файли зі стилями.

Такі файли мають розширення .css, і WebStorm позначає їх синьою іконкою.

4. Статичні медіафайли. Так називають файли, які містять дані, але не код. Це можуть бути текстові файли, картинки, медіафайли тощо.

5. Сторонні бібліотеки (External libraries). Зараз їх у нашому проєкті немає, але коли ви їх завантажите, то WebStorm обов'язково їх тут відобразить.

6.3 Робота з терміналом

У WebStorm ви можете працювати з командним рядком ОС напряму. У Linux і MacOS командний рядок зазвичай називають Терміналом (Terminal), тому в WebStorm він теж так називається. Це не просто особливість WebStorm, а загальноприйнята термінологія серед програмістів

Щоб відкрити Terminal, вам потрібно натиснути на кнопку терміналу в боковому меню.

У вас повинно з'явитися таке вікно:

У цьому вікні ви можете вводити команди операційної системи. Нас же цікавить одна з них.

Давайте дізнаємося поточну версію Windows. Для цього потрібно написати:

    
      ver
    
  

Якщо у вас виникла помилка, напишіть спочатку команду «cmd», а потім вже команду «ver».

Ось що у мене вийшло:

6.4 Що таке плагін JavaRush і для чого він потрібен?

Це застосунок, спеціальний програмний модуль, який вбудовується в середовище розробки Intellij IDEA або WebStorm і дозволяє вам працювати в ній із завданнями курсу JavaRush. Наприклад, писати код розв'язання, відправляти його на перевірку, звіряти своє рішення з "дефолтним" та багато іншого. Прогрес у розв'язанні завдань у плагіні синхронізується з вашим акаунтом на JavaRush, тому він буде виглядати однаково й на сайті, і в середовищі розробки.

Завантажити плагін JavaRush ви можете з маркетплейсу Jetbrains, прямо у своєму середовищі розробки. Далі ми продемонструємо етапи на прикладі WebStorm, але ті самі кроки застосовні й до Intellij IDEA.

1. Зайдіть у розділ "Налаштування", Windows/Linux File - Settings, MacOS WebStorm - Preferences. Якщо немає розділу налаштувань, відкрийте будь-який проєкт або створіть новий.

2. У вікні, що з'явилося, у боковому меню виберіть розділ Plugins і відкрийте вкладку Marketplace. У рядку пошуку напишіть javarush

3. Виберіть плагін і натисніть на кнопку Install.
4. Перезавантажте (Restart IDE) WebStorm, щоб почати роботу з плагіном.
5. Ви побачите трохи змінений інтерфейс і кнопку Увійти в акаунт на верхній горизонтальній панелі.

При натисканні відкриється вікно для входу у ваш акаунт, у якому потрібно ввести свій секретний ключ:

Нагадаємо, що секретний ключ ви можете знайти у розділі “Налаштування” → “Безпека та вхід”.

Після логіну розпочнеться завантаження проєкту і Javarush SDK (не треба змінювати на іншу версію).

6. Щоб відкрити нове завдання, натисніть на Tasks у лівій вертикальній панелі, а потім на картку завдання у боковій панелі ліворуч, і у спливаючому вікні натисніть Відкрити:

7. Перед вами відкрилося вікно з двома вкладками. Одна — з умовою, друга — для введення коду.
8. Тепер напишіть розв'язок завдання та натисніть кнопку Перевірити

Ручне встановлення плагіна

1. Завантажити плагін
2. Зайдіть у розділ "Налаштування", Windows/Linux File - Settings, MacOS WebStorm - Preferences.
3. У вікні, що з'явилося, у боковому меню виберіть розділ Plugins і натисніть на шестерню(⚙️) і обирайте «Install Plugins from disk»
4. Відкрийте папку, в якій лежить плагін. Виберіть його(архів) і натисніть OK Restart IDE).

Плагін встановлено! Тепер можна розв'язувати задачі.

Синхронізація задач сайт — плагін

Список задач і їх статусів оновлюється автоматично, кожні п'ять хвилин або після відправки будь-якого завдання на перевірку (сервер javarush).

Тому якщо ви вирішили завдання на сайті, у плагіні вона також буде в списку вирішених завдань. Якщо потрібно оновити інформацію по статусах завдань прямо зараз, то натисніть на свій аватар (праворуч угорі), і у випадаючому меню виберіть пункт Синхронізувати завдання:

Режим новачка в плагіні

Це спрощена версія для тих користувачів, у яких немає (або мало) досвіду роботи з WebStorm та іншими середовищами розробки. У ній сховані деякі функції WebStorm. Щоб вимкнути цей режим натисніть на свій аватар (праворуч угорі), і у випадаючому меню виберіть пункт Налаштування:

Як приховати навігаційну панель плагіна в режимі PRO

Натисніть пункт Налаштування (⚙️) і зніміть галочку з пункту "Відображати навігаційну панель плагіна":