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: https://www.jetbrains.com/webstorm/ ➖ Сниппеты Emmet: https://docs.emmet.io/cheat-sheet/ ➖ Описание встроенных переменных для сниппетов (JetBrains): https://www.jetbrains.com/help/webstorm/template-variables.html#pdtv ➖ Описание встроенных переменных для сниппетов (VSCode): https://code.visualstudio.com/docs/editing/userdefinedsnippets#_variables ➖ NPM-библиотека classNames: https://www.npmjs.com/package/classnames ➖ Работа с Git в GUI WebStorm: https://youtu.be/eMETcugEX_c ➖ Шаблоны кода из видео: https://github.com/aleksanderlamkov/webstorm-improvements 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov ❤️ Boosty (поддержать автора): https://boosty.to/friendly-frontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ: https://stepik.org/a/228315 📌 Автор: ➖ Личный сайт: https://aleksanderlamkov.ru/ ➖ Telegram: https://t.me/AleksanderLamkov ➖ Boosty: https://boosty.to/friendly-frontend ➖ GetMentor: https://getmentor.dev/mentor/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #webstorm
✏️ Подробный обзор 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: https://www.jetbrains.com/webstorm/ ➖ Сниппеты Emmet: https://docs.emmet.io/cheat-sheet/ ➖ Описание встроенных переменных для сниппетов (JetBrains): https://www.jetbrains.com/help/webstorm/template-variables.html#pdtv ➖ Описание встроенных переменных для сниппетов (VSCode): https://code.visualstudio.com/docs/editing/userdefinedsnippets#_variables ➖ NPM-библиотека classNames: https://www.npmjs.com/package/classnames ➖ Работа с Git в GUI WebStorm: https://youtu.be/eMETcugEX_c ➖ Шаблоны кода из видео: https://github.com/aleksanderlamkov/webstorm-improvements 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov ❤️ Boosty (поддержать автора): https://boosty.to/friendly-frontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ: https://stepik.org/a/228315 📌 Автор: ➖ Личный сайт: https://aleksanderlamkov.ru/ ➖ Telegram: https://t.me/AleksanderLamkov ➖ Boosty: https://boosty.to/friendly-frontend ➖ GetMentor: https://getmentor.dev/mentor/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #webstorm