Работа с 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

Нажмите на пункт Настройки (⚙️) и снимите галочку с пункта "Отображать навигационную панель плагина":

1

Опрос

История интернета, 2 уровень, 5 лекция

Недоступен

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

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

Открыть