Полный курс по настройке Vs Code на 2024 [Расширения / Снипеты / Хоткеи]

🔥 Оформить премиум подписку - htmllessons.ru/premium?...
❤️ Отзывы тут - t.me/htmllessons_reviews
🎁 Новогодний розыгрыш (10 подписок) - t.me/redgroupchannel
1000 лайков и я выпускаю проект на Nextjs 14
2000 лайков, снимаю настройку Webstorm
✨Скачать настройку VS Code - get.redlinks.tech/s/7hEUp1j
Добро пожаловать на наш полный курс по настройке Visual Studio Code 2024. В этом видео мы погрузимся в мир одного из самых популярных и мощных редакторов кода. Покажем как Vs Code сделать быстрее чем Webstorm в 10 раз. Покажем как настроить редактор, чтобы он соответствовал вашим потребностям и стилю разработки. А также, как установить расширения, чтобы расширить функциональность редактора, и предоставим список рекомендуемых расширений для [ Javascript, React и PHP]. Мы также подробно рассмотрим сниппеты для react, next, typescript и горячие клавиши(хоткеи) для ускорения вашей работы. Наконец, мы поговорим об иконках и о темах оформления, которые позволяют изменить внешний вид редактора в соответствии с вашими предпочтениями и стилем работы. Наше полное руководство по VS Code поможет вам максимально использовать возможности этого замечательного редактора кода. Приятного просмотра и успешного изучения!
⚡️ Список интенсивов по подписке - htmllessons.ru/list-intensive...
🔐 МК по авторизации (все исходники и запись доступны навсегда!) - t.me/red_master_class_bot
☑️ Чеклист "С нуля до Senior front-end" - t.me/checklist_redgroup_pay_bot
VK - redgroupchannel
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
00:00 - Начало
02:20 - С наступающим!
02:50 - ДО/ПОСЛЕ
03:52 - Что будет в этом видео
06:00 - Расширения
21:00 - Иконки
21:38 - Темы
22:28 - Настройки (самое важное)
26:48 - Внешний вид (настройки)
28:48 - Курсор (настройки)
29:23 - Шрифты (настройки)
32:03 - Терминал (настройки)
32:28 - Проводник (настройки)
33:08 - Дебаг (настройки)
33:23 - Emmet (настройки)
33:48 - Форматирование (настройки)
34:48 - Laravel/php (настройки)
35:08 - Хлебные крошки (настройки)
35:35 - JS/TS (настройки)
36:01 - Орфография (настройки)
36:23 - Другие полезные (настройки)
39:35 - Мои горячие клавиши (хоткеи)
42:53 - Сниппеты
43:48 - Спасибо за просмотр!
⚡️Закрытый клуб "5 утра" - htmllessons.ru/ext/club
💡 Личный ТГ канал - t.me/hardmaxchannel
🌿 Плейлист с полными курсами для новичков и не только - • Полные курсы
👉 Все ссылки (+ настройка редактора) и информация обо мне - redlinks.tech/
#VsCode #VisualStudioCode #РедакторКода #RedGroup

[@REDGroup]

🔥 Оформить премиум подписку - htmllessons.ru/premium 1000 лайков и я выпускаю проект на Nextjs 14 2000 лайков, снимаю настройку Webstorm Если готовы выпустить темы под нашим брендом t.me/red_support_bot

[@cranberry888]

не верится что уже четвёртая часть, каждый год прихожу сюда и каждый раз узнаю что то новое, спасибо Макс 🚀

[@odinokun]

Классное видео. Пересмотрел твои видео настроек с предыдущих лет - явный прогресс в качестве и информативности. Пока смотрел - раз 10 хотел лайк поставить (он уже был поставлен на первых минутах) Спасибо.

[@GabrialWeb]

Спасибо, хоть м пользуюсь web storm, но регулярно смотрю твой выпуск по vsCode, спасибо за твои труды!

[@REDGroup]

Пожалуйста

[@ElmyrzaMusabecov]

Спасибо за очень полезную информацию! 🔥🔥🔥

[@nargizagayfullina4062]

Спасибо за полезную информацию 🔥

[@KachinVictor]

Супер! Интересно и практично! С Новым 2024 годом!!! Успехов, вдохновения, сил и здоровья!

[@REDGroup]

Спасибо

[@user-ol7vf2nz6k]

Классное видео! Спасибо 🙏

[@user-yj7th1zo2l]

Большое спасибо за контент!

[@grigoriyeltsov]

Спасибо, Максим! Отличные видео! Успехов тебе и мотивации! А просмотры, не переживай, набегут!

[@user-dc9rv8df9k]

Макс, спасибо за полезный контент.

[@nic-ori]

Thanks! Useful information.👍👍👍

[@AstVenFel]

классное видео) большое спасибо

[@msa76100]

Лайк однозначно. Много инетересного.

[@drscorpion7580]

Спасибо, было полезно!

[@REDGroup]

Пожалуйста

[@user-ci9xs8gs9k]

Спасибо за видео, просто топ!!! Подскажи а есть у тебя файл со всеми шрифтами?

[@sterd0]

Огромное спасибо за труд

[@REDGroup]

Пожалуйста 🙏

[@user-ow1cx9xc9g]

Thank you for every thing. This is the good settings for VS CODE

[@huracai45]

Скачал! Все сделал, как сказано по видосу, мне все зашло, все настроил пушечка, всем рекомендую!

[@user-zw1ps4fy5b]

Макс, сними пожалуйста, как терминал настроить) этот видос - лютый кайф ❤

[@goldyguy9151]

о хорошая идея

[@tykavka]

Настройка реально топовая)) Макс, лучший))

[@user-uk2pj8yb3r]

кайфовая настройка, аж появилось желание покодить

[@1egend_auto]

Твоя настройка просто топ из топов

[@sobol8555]

Настройка топ, спасибо что подробно объяснил все моменты, VSCode стал гораздо удобнее!

[@pavels197]

Топовый видос, огромное спасибо! Парни из RED Group, у вас не планируются интенсивы по VUE случайно?

[@REDGroup]

Пока не планируется, мне vue не понравился. Но в будущем для расширения думаю возможно

[@user-wo2jn1fb9k]

Спасибо! Очень круто! Подскажи пожалуйста, что меняет "===" и "=>" на более компактный вид, у меня это почему то не заработало.

[@REDGroup]

Ligatures и шрифт должен это поддерживать

[@ArpeksMenethil]

а где остальные сниметы? В архиве ток next и js сниппеты

[@RAYDNELL]

от души

[@elcho911]

Привет 👋🏻 Как называется стиль терминала в Mac OS?

[@user-qt6ve7ci2z]

здравствуйте у меня vs code работает неправылно пожалуйста помогите когда я нажимаю пробел чтобы было место между слово если сразу не напишу само себе блокирует место

[@beksultanbekturgan8700]

Спасибо, чисто комент дял продвижения

[@ROZERR09]

а как применить я код вставил но не преминяется. ?

[@AlexGabber]

про вебштормикус бы какие-то приемы позыркать) Лайк при любых раскладах, знаю что данный видос будет многим полезен

[@ivanatroshchenko5310]

А есть архив шрифтов? которые указаны в settings json

[@user-qj6pk9py6j]

спс бро

[@bashkort_erete]

Только вчера переустановил винду и думал, как настроить vscode и тут ты выпускаешь видео👍

[@Liverpoolfc_1892]

не открываються скаченные файлы, пишет что "не поддерживает кодировку текста" хотя стоит UTF-8

[@vlad_issslove]

Топ настройки 🎉

[@shevnikoff3069]

Я уверен что этот канал будет успешным! Спасибо за контент и всех с наступающим новым годом!

[@pride444]

Так и не понял где ты взял код для «мои горячие клавиши» и сниппеты

[@showtt9491]

Макс, а как называется программа для помодоро (запуск таймера работы и отдыха)?

[@REDGroup]

Flow app

[@yz1915]

блин не могу почему то установить настройки, как их сохранить то?

[@chiklfkif]

No working liteservers with ls_index=None, archival=None есть у кого понимание как это решить?

[@tffghhbbv]

топчик

[@mymail333g]

Огромное спасибо за сочетание клавиш на создание файла и папки в боковой панели файлов.

[@KadridinAlmarsov]

спасибо

[@artywhit]

.Било би круто увидеть настройку WebStorm, так как уже год на нем программирую

[@igorzonenko8925]

Ку, скачал твой архив с кастомкой, как его применить, в какую директорию разместить VS?

[@REDGroup]

В видео все рассказал, там все по разным местам

[@illirel]

Привет, я только учусь программировать, подскажи пожалуйста, как вернуть в настройках возможность выбора языка в новом файле, как это было подефолту( там поле для выбора было) либо подскажи как быстро это делать в текущих твоих настройках?

[@REDGroup]

Привет, в настройках не помню. Открываешь командую строку cmd shift p и пишешь change lang mode

[@illirel]

@@REDGroupСпасибо

[@user-yh6wv4zx6s]

Привет!! Можешь показать как сделать красивый Drag and Drop list на реакте с анимацией без библиотек?

[@DavidAbdilazizov]

А как убрать верхний панель (файл,правка,вид и т.д) на windows

[@ALEXANDER47477]

поправь пожалуйста настройку для VS Code (которая в ссылке под видео для скачивания). там нет файла для react снипетов. только для next. залайкайте плиз чтоб увидел

[@koras2523]

Кайфовая настройка

[@lumberpants8815]

💯💯💯

[@canekg]

Спасибо, скачал, но нет по реакту сниппетов(

[@user-oy2ji3so9z]

🔥🔥🔥🔥

[@sergey9588]

Добрый, настройки классные, еще бы архив со шрифтами, было бы огонь!

[@REDGroup]

Шрифты не мои, поэтому раздавать не буду, да и у меня их нет в одном месте

[@user-ux4le1tf3y]

а как то можно сделать, что бы при декомпозиции объекта не переносилось на новую строку? const { register, formState: { errors }, handleSubmit } = useForm({ mode: 'onChange' }); вот этот перенос ну не очень удобен что ли

[@404Negative]

это удобно, привыкай! © prettier

[@Djarvic]

Круто спасибо за контент

[@wenjoytm9376]

в файле vs-code-redgroup-2024 нет сниппетов для реакта, есть для next и js, добавь пожалуйста

[@REDGroup]

А я только их использую, те решил не добавлять. Там они подходят для реакта

[@u-ra964]

🔥🔥🔥🔥🔥🔥🔥

[@nikolaychernushenko9184]

В VS Code при выводе командой print русскоязычного текста получаю белые ромбики с вопросиками (У меня Windows 10). При этом в Power Shell и в интерпретаторе Python с русским всё нормально. У Вас этой проблемы нет в VS Code, потому что Mac. Можете подсказать как эту проблему решить в винде? Пробовал решать, как рекомендуют в интернете, через Пуск-Параметры-Время язык-Язык-Административные языковые параметры-Изменить языковые параметры системы, и далее галочка в Бета-версии. Однако этот способ корёжит шрифты теперь уже в других программах.

[@JohnSmith-ty5rk]

Тоже не смог победить полностью в том числе эту проблему и счел, что проще развернуть виртуалку с Debian и заниматься разработкой там. Сейчас у меня на основной машине Debian, а в виртуалке Windows 10 для 1С и MS Office ;))

[@xanff1103]

❤❤❤

[@JaxongirMirhalikov]

klass

[@RomanB-od1qn]

а как форматируєш scss? Prettier?

[@REDGroup]

Prettier

[@user-zi3fp4fg8o]

🔥🔥🔥🔥🔥🔥🔥🔥

[@shba_shorts]

Можно ли оформить подписку с Узбекистана, я самостоятельно хотел заплатить но не получилось

[@REDGroup]

Конечно можно, напишите в наш бот отправим ссылку t.me/red_support_bot

[@xanff1103]

жду Проект на next14

[@mialii7940]

🤩

[@smotritelyoutube]

Даже лайк не жалко

[@MrSunTrope]

А где взять снипеты для реакта? В файлах нету.

[@REDGroup]

Там все в одном файле, это самые актуальные

[@Yariiiification]

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

[@REDGroup]

Что вы имеете ввиду? Спасибо

[@good_asfuck]

хосподе, добавь уже себе тему Ayu (dark/mirage без border'ов) :)

[@404Negative]

у меня в файле хоткеев было 500 строк до твоего видео. тем неменее все твои хоткеи добавил, тк. у меня их не было!!

[@Gazovchik]

Считаю, что это чуть ли не Самое Первое - настройки и Сочетания Клавиш - что нужно освоить когда Только Начинаешь учиться программированию. Всем Адекватности мира и добра, ребята.

[@someChicoRy]

лайк авансом сразу)

[@di_Battista]

дружище от души тебе за эту информацию 👍👍👍👍👍👍 как тебе сто лайков поставить я не знаю, прости, могу только один

[@neptunsk1y]

давай настройку по терминалу

[@MacChickenBodyMaffin]

Вопрос,. почему у меня не работает прописной шрифт в комментариях? все скопировал, но текст просто италик.

[@odinokun]

Это от шрифта зависит. Не у каждого шрифта есть прописное начертание

[@ananasios]

Дядька выложи архив со шрифтами пожалуйста

[@REDGroup]

Шрифты разных авторов, я не имею права их раздавать.

[@user-ov8xk7cn9e]

эх, в архиве ток next и js сниппеты

[@Fair_Citizen]

Как сохранить эти все настройки?

[@Polnochniy_Laplace]

Ты про расширения или плагины? Если про плагины, то нужно их сохранить в json файл при помощи Ctrl+S

[@user-ho9lx2nz2o]

👍👍😁😁

[@vladimirvasilchenko9714]

❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥

[@walterwhite4407]

ЙОВ ЙОВ ЙОВ -СПААСИБО МЕН

[@andrewtcarev2654]

Как же много словесного шума. Вроде все по делу, но в фоне слушать не так приятно как ожидалось. Возможно, из рекомендаций было бы дать - подготовить какой-то сценарий, чтобы во время записи не было «забыл», «не помню» и лишних «а» «э» и «эм». Все же приятно, когда не только чистый код, но и чистая речь.

[@REDGroup]

А какой может быть сценарий в настройке vs code? Или когда мы пишем большие проекты

[@andrewtcarev2654]

​@@REDGroup рассмотрим ситуацию с VS Code: сделать список того, что вы хотите донести аудитории → посмотреть на этот список и добавить последовательность → подготовиться к каждому пункту → записать черновой вариант того, что получилось → пересмотреть видео → понять, что можно улучшить (например, убрать те же слова паразиты, которые, как мне кажется, из-за того, что вы больше импровизируете, чем подготавливаетесь заранее) → переснять видео. Как итог, получаем базу, с которой можно работать, видим, что было сделано плохо, а где было отлично.

[@andrewtcarev2654]

@@REDGroup насчет больших проектов тут уже посложнее, так как отснять иде и подготовить большую тему это все же разное, но принцип примерно такой же. Смотреть приятно, картинка классная, но шум из слов паразитов портит картину :/ Если есть команда, которая состоит не из 1 вас и 1 монтажера, то можно распределить обязанности, кто-то напишет план → другой подготовит текст → вы читаете текст, ознакомившись с планом и то, что подготовили коллеги → вносите правки → снимаете

[@REDGroup]

@andrewtcarev2654 сейчас я не могу себе позволить выпускать видео раз в месяц. Поэтому приходится чем то жертвовать. Опять же это наш стиль как видите по комментариям всем все нравится, пусть лучше так зато аудитория получает 4 видео в месяц а не одно. Вы должны понимать в отличие от других блогеров, у меня кроме ютуба огромный пласт работы по бизнесу и по разработке htmllessons 2.0

[@andrewtcarev2654]

@@REDGroup понимаю это прекрасно. Поэтому и даю свой фидбек. Надеюсь, вы понимаете, что фидбек ≠ обязательное исполнение. Я лишь высказал своё мнение, которое, возможно, в будущем будет учтено и качество контента, как мне кажется, будет лучше. Но опять же, воспринимать это стоит как фидбек)

[@moloko13245]

Огонь

[@unicoxr5tj417]

важная тема

[@FerelUltra]

в архиве нет сниппетов для реакта

[@REDGroup]

Они внутри стрепетов некст

[@azittoo4362]

Успел😂

[@g_dragon9232]

добиваем 1к лайков у меня дипломная работа такая ))))

[@REDGroup]

Какая?

[@g_dragon9232]

Планер либо todolist

[@user-nx8pg3gw8d]

Ну прям сигма

[@Anatoly8818]

А с VIM у тебя не пошло что ли?)

[@REDGroup]

Да, потратил 2 месяца почти впустую

[@tomitomion1179]

Дядь где ты ботов в комменты покупаешь?

[@REDGroup]

Ни разу на своем ютуб канале мы ничего не закупали. А Вы завидуете?

[@bublck-gt1lo]

Сам пишет

[@goldovyidozhdik3430]

Вот бы ещё он жрал ресурсов меньше чем докер-композ на винде

[@YuukiEuphoria]

Надо таймкоды 🥲

[@YuukiEuphoria]

А, они есть. Отмена 🎉

[@kirillweikum1355]

rekomenduju toshe => Snippet Generator

[@fgewbtrfdhsb]

❤❤❤❤❤

[@artaniszeratul9297]

+++++++++++++++++++++

[@alexmarch]

по хоткеям очень частый для дебага consol.log я забиндил на "ctrl + L" . Чтобы это сделать нажать ctrl+shift+P, выбрать Open Keyboadrd Shortcuts (JSON) и добавить следующие настройки { "key": "ctrl+l", "command": "editor.action.insertSnippet", "when": "editorTextFocus", "args": { "snippet": "console.log(${TM_SELECTED_TEXT}$1)$2;" } }