Настройка Webstorm 2022 + сравнение с Vs Code [JavaScript / JetBrains]

В этом крутом ролике мы разберем мою настройку IDE Webstorm.

Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 300 лайков и я снимаю еще ролик про Webstorm

Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!

В этом крутейшем ролике мы разберем мою настройку IDE Webstorm для JavaScript разработчика. Также выполним сравнение с Vs Code. Сделаем кастомизацию и оформление программы и установим нужные плагины. Покажу как настроить Prettier и GraphQL. В конце Ваш ждет бонус с топом горячих клавиш для Webstorm. Чуть выше Вы сможете скачать файл настроек. В итоге расскажу на чем я остановился.

00:00 - Начало
01:06 - Мой опыт
02:46 - Сравнение с VS Code/Форматирование
08:57 - TypeScript/Сравнение
09:41 - Общие настройки/Сравнение
10:31 - Смена размера шрифта/Сравнение
11:58 - Автокомплит/Сравнение
14:10 - Кастомизация/Сравнение
14:38 - Warnings/Сравнение
15:49 - Tailwind/Сравнение
17:49 - Скорость/Сравнение
18:19 - Цена/Сравнение
18:43 - Расширения/Сравнение
19:24 - Оформление и кастомизация
23:58 - Плагины
25:17 - Удаление некоторых стандартных плагинов
27:10 - Настройки
31:20 - Prettier
32:26 - GraphQL
34:18 - Топ горячих клавиш
38:05 - Файл настроек
39:04 - Что я выбрал для разработки?

#Webstorm #IDE #JavaScript #RedGroup

Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔

[CodexWeb]

Привет, спасибо за инфу. Есть чем дополнить)

*1. Форматирование*
Импорты в шторме и так удаляются и добавляются автоматом.
Форматирование тоже настраивается, как и кавычки, и точки с запятой.
Так же он форматирует код сразу при вставке. Или по нажатию на горячие клавиши сразу весь файл.
А если ещё поставить плагин SaveActions - будет автоматом форматировать при сохранении.
Я вообще не вижу преимуществ Prettier перед встроенным форматированием. Зачем его ставить???

По оперативке - реально как то много. У меня PHP Storm меньше ест, а он ведь тяжелее.

*2. Настройки.*
Есть для проекта, есть для юзера или IDE (для всего сразу то есть)
Смотри пункт 7 - я тебе привел там пример.

*3. Изменение шрифта.* Ну здесь ты мучаешься конечно))
Можно настроить мышкой. Settings -> Editor -> General
Отмечаешь в Mouse Control:
1. Change font size Ctrl + Mouse - для увеличения колёсиком мышки.
2. All editors - меняет шрифт сразу во всех редакторах

*4. Автокомплит* НАМНОГО умнее. Как и проверки на варнинги. Иногда даже советует как лучше упростить код)

*5. Скролл.*
У тебя по ходу не включён плавный скроллинг. Я разницы не замечаю в редакторах.
Settings -> Editor -> General -> Enable smooth scrolling

*6.* 30:40 - в разделе Punctuation настроить кавычки и точку с запятой.
Будет автоматом проставлять/заменять/удалять
Просто ты топишь за производительность - так зачем этот Prittier?
И файлов с настройками не надо.

*7.* Всё те же 30:40 - ты ругался что каждый проект по новой настраивать надо,
У тебя вверху выпадающий список Sheme и там стоит выбор Project.
Таким образом ты сохраняешь настройки только для проекта.
Выбирай пункт Default IDE и будут настройки одинаковые для всего.

*8.* 32:19 - опять же реформат и оптимайзер импортов работают из коробки. Он их и добавляет и удаляет.
Для автоформатирования при сохранении - нужно только плагин влепить (упоминал вначале)

**9. Если быстро нажать два раза shift** откроется поиск по всему.

*10.* По поводу тем, есть кейбинд быстрое переключение тем с предпросмотром.
На винде это CTRL + ~ (там где буква ё). На маке, скорей всего команд + ~.
Только смотри что бы английская раскладка стояла, на русской не работает))
Появится окошко где можно будет быстро просмотреть и выбрать тему и кеймап и иконки.
Сразу оговорюсь, что препросмотр тем работает только в стандартном пункте.
От материал темы там свой пункт добавлен - там препросмотра нету. Хотя я и лицензию не брал.
Слишком прожорливая она.

Посмотри ещё вот эти темы:

1. *Обязательно глянь - The Doki Theme* (ОГРОМНЫЙ выбор тем на любой вкус) Есть довольно интересные.
Правда там няшки из анимешек вставляются,
но их можно убрать или переместить в любое удобное место в редакторе.

2. CodelyTV Theme
3. GitHub Theme
4. Gruvbox
5. Hiberbee
6. Material Design Dark-Theme (будет называть в менюшке NotReallyMDTheme)
7. One Dark Theme

[czlwddj]

8:57 VSCODE - settings.json: 0 - Управляет длительностью задержки (в мс) перед отображением кратких предложений.

[raSonne]

нравится темп речи, нет подвисания, мммм…аааа…. итд. всё чётко

[Grapeoff]

Помню, когда в детстве тыркался во всяких фотошопах и других программах, смотрел всякие туториалы и не понимал: как можно запомнить столько всяких функций в этих программах?

В итоге не заметил, как вдоль и поперёк стал знать все кнопочки/функции и настройки в VSCode и WebStorm, так ещё к этому плюсуется язык программирования и конфигурация сторонних инструментов вроде linux, docker, elasticsearch. Возможности нашего мозга воистину поражают.

Кстати стал замечать, что когда мне скучно и нет идей для проектов, но хочется хоть что-то поделать, я начинаю конфигурировать IDE, есть в этом что-то медитативное...

[wpihigt]

Когда-то давно лет 6-7 пользовался Sublime Text с кучей плагинов, потом попробовал PHPStorm, больше ни на какие редакторы даже внимания не обращаю. Грубо говоря, все по сравнению с ним уже как обычный блокнот) Ну это для меня так, кому нравится Sublime или VSC, я не осуждаю :D

[zvezdochkin]

Я этот ролик не ждал, но все равно посмотрю.

[arturnevesomov]

Привет! Классное видео, очень интересно и познавательно.
Подскажи, пожалуйста, какую тему ты использовал в vs code на видео?

[devcodingitstudio]

Видео топовое. Настроил свой webstorm. Супер

[andreidetenkov]

попробуй Presentation mode view для записи видео (View>Appearance>Enter Presentation Mode). я несколько раз пытался пересесть на VSCode но меня он начинает бесить после 10 минут работы. ( полноценной работы с большим проектом где 500+ файлов)

[theoty-js]

Теперь настроил свой ide, до первого сноса, поскольку каждый месяц удаляю и снова устанавливаю

[rmltsn]

Работает быстрее чем VSCode у меня на винде, не знаю в чем тут дело. Второй раз дали бесплатный триал спустя полгода.

[icu]

ема секс, жду с нетерпением 2023 версию этой IDE-шки, очень удобный инструмент

[savenkodan]

у меня наоборот vs code лагает, а web storm нет )

[XN]

Кто нибудь знает, как сделать в шторме чтоб для scss/sass файлов работало нормально go-to и find usages? Я как не пытался не сдалал. В чистом css работает, на препроцц нет, приходит использовать поиск, а это не так удобно. А я много пишу в препроцах, это раздражает. В vs это работает с помощью плагина css-navigator а тут вот никак. И как сделать предложку классов после того как написал &__. Он не подсказывает слассы из HTML. Влоденность работает в итоге не на полную катушку, я не хочу их печатать, в вс код опять же работает . Но кроме этого все в шторме круто . Но это очень тормозит, неужели нельзя как то решить вот думаю

[avel]

Пожалуй, поставлю настройку для видимости размера файла и подсказку команд, больше ничего трогать не буду. Классический вид поинтереснее выглядит, как по мне

[ninshu]

Привет, классно! Можешь записать про effector?

[remixrty]

всем привет! у меня macbook pro 16 2019, жутко греет проц в крупных проектах, webstorm’ом иногда невозможно пользоваться, перерыл все темы на youtrack, отключил все, что возможно. кто-то сталкивался с подобным? или вебштормом можно пользоваться только на самом-самом жире?

[folomba]

Всем привет, народ! Кто-нибудь может подсказать, как убрать отображение вертикальных полей глифа для точек останова?

[Kirikmasov]

Подскажите, как можно извлечь свой конфиг, что бы не перенастраивть все на другом компе!

[kucher]

Пробуй говорить еще быстрее. Нужно больше скорости.