WebStorm настройки для быстрой и удобной работы • Плагины • Git GUI • Шаблоны и сниппеты • Обзор IDE

✏️ Подробный обзор IDE WebStorm. Установим и активируем IDE. Настроим плагины. Разберём основные фишки интерфейса и научимся его кастомизировать. Освоим форматирование кода (линтинг). Изучим все существующие виды поиска кода (по текущему файлу, по отдельным файлам, по всему проекту), поиск по имени файла. Научимся быстро рефакторить имена сущностей во всём проекте. Настроим полезные хоткеи (горячие клавиши). Прокачаем сниппеты Emmet через Live Templates. Реализуем собственные шаблоны кода для автогенерации JSX / React-компонентов со всей необходимой файловой структурой. Рассмотрим работу с http-клиентом для управления файлами на хостинге. Узнаем, как просматривать локальную историю изменений. Разберём GUI для Git и многое другое! 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:42 | WebStorm теперь бесплатный ▶ 01:06 | Особенности WebStorm ▶ 02:39 | Скачивание, установка и активация ▶ 04:12 | Установка классического интерфейса (плагин Classic UI) ▶ 05:17 | Обзор основного интерфейса ▶ 07:32 | Кастомизация интерфейса ▶ 09:23 | Настройки Appearance — смена темы, масштаба и шрифта интерфейса ▶ 10:24 | Настройки Editor — разблокировка масштабирования размера текста колесом мыши ▶ 11:14 | Настройки Editor — смена шрифта и его параметров для кода ▶ 11:45 | Плагин Oceanic Dark Theme — кастомная тема ▶ 13:13 | Плагин Rainbow Brackets — разноцветные скобки ▶ 14:07 | Плагин Atom Material Icons — кастомные иконки ▶ 15:16 | Панель Project — создание файлов ▶ 17:06 | Сниппеты Emmet ▶ 18:30 | Вкладки с кодом — сплит-режим (разделение на окна) ▶ 22:38 | Закрепление вкладок ▶ 23:45 | Окно с кодом — масштабирование размера текста ▶ 24:26 | Окно с кодом — сворачивание и разворачивание блоков кода ▶ 26:07 | Настройка панели “начала вложенного кода” Sticky Lines ▶ 27:38 | Форматирование кода (линтер) ▶ 37:38 | Автодополнение строки кода с помощью ИИ (Full Line code completion) ▶ 39:53 | Подсказки в коде (Inlay Hints) ▶ 41:11 | Поиск по файлу ▶ 45:35 | Поиск по файлу с заменой ▶ 47:17 | Поиск кода в определённой папке ▶ 50:23 | Поиск кода во всём проекте ▶ 50:47 | Поиск кода с заменой в определённой папке или во всём проекте ▶ 51:50 | Поиск по имени файла ▶ 53:14 | Поиск мест использования сущностей — Find Usages, Show Usages ▶ 56:54 | Быстрый рефакторинг — переименование сущностей (Refactor name) ▶ 59:28 | Настройка горячих клавиш — форматирование файла, открытие недавно закрытой вкладки, быстрый комментарий в коде и другие ▶ 01:02:58 | Быстрое комментирование и раскомментирование выделенного блока кода ▶ 01:04:45 | Сниппеты кода / шаблоны кода (Live Templates) ▶ 01:08:11 | Настройка сниппетов кода Emmet через Live Templates для HTML — img, a, button, input ▶ 01:16:45 | Шаблоны кода (File and Code Templates) — автогенерация JSX / React-компонента ▶ 01:31:28 | Работа с FTP / SFTP, http-клиент (Remote Host, Deployment) ▶ 01:36:32 | Запуск локального сервера (аналог Live Server в VSCode) ▶ 01:38:33 | Локальная история изменений (Local History) ▶ 01:41:26 | Работа с Git ▶ 01:42:11 | Заключение 📚 Ссылки из видео: ➖ Скачать WebStorm:
➖ Сниппеты Emmet:
➖ Описание встроенных переменных для сниппетов (JetBrains):
➖ Описание встроенных переменных для сниппетов (VSCode):
➖ NPM-библиотека classNames:
➖ Работа с Git в GUI WebStorm:    • Основы Git и GitHub. Курс для начинающих. ...   ➖ Шаблоны кода из видео:
💬 Коммьюнити-чат в телеграме (помощь новичкам):
🧑‍💻 Основной телеграм-канал:
❤️ Boosty (поддержать автора):
🗂️ Бесплатные курсы на канале: 🟠 HTML:    • HTML курс 2025   🔵 CSS:    • CSS курс 2025   🟡 JS:    • JavaScript курс 2025   🟢 A11y:    • Accessibility курс 2025   🗺 Frontend Roadmap:    • Frontend Roadmap 2024 | Что должен учить ф...   ⚪️ Мастер-класс по верстке для новичков:    • Адаптивная верстка сайта с нуля для начина...   🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):    • Вёрстка сайта с 0 до результата | HTML, БЭ...   ⚫️ Мастер-класс по верстке с практикой по JavaScript:    • Вёрстка сайта с нуля • HTML, SCSS, JS прак...   🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ:
📌 Автор: ➖ Личный сайт:
➖ Telegram:
➖ Boosty:
➖ GetMentor:
➖ Stepik (платные курсы и мастер-классы):
#frontend #фронтенд #webstorm