Настройка VS Code для верстки

Подписаться 303 тыс.

Просмотров 294 тыс.

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Сегодня мы рассмотрим установку и настройку Visual Studio Code для верстки. В результате мы получим удобную, лаконичную рабочую среду с необходимыми плагинами, которые я использую в своей работе. VS Code в настоящее время является самым популярным редактором кода благодаря широкому функционалу, кроссплатформенности, огромному сообществу разработчиков как самого редактора, так и расширений для него и открытой лицензии. Этот редактор я могу смело рекомендовать к использованию.
Страница урока: webdesign-master.ru/blog/tool...
Таймкоды:
00:00 Начало урока
00:51 Установка VS Code
01:25 Краткий обзор интерфейса
04:07 Настройка параметров редактора
19:04 Установка и настройка плагинов
27:05 Настройка темы оформления VSCode
28:07 Кастомные сниппеты Emmet
31:48 Фичи Visual Studio Code
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

4 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 232

@wdm 23 дня назад

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

@kuksogen Год назад

Спасибо за великолепную подачу материала! Объясняете просто и понятно, что лучше помогает разобраться в редакторе и его характеристиках.

@W_i_n_n_e_r_Man Год назад

Только начинаю знакомиться с VSC, и это один из лучших, если не лучший, урок по его настройке. Огромная благодарность

@DjFoxF Год назад

Шикарный урок. Спасибо за великолепную подачу материала !

@mrgerber 2 года назад

Очень хорошая подача материала, сразу видно отличную наработанную базу! Взял весь пак курсов не глядя) Как минимум, для ознакомления 🙂

@user-uv1dt7eo1c Год назад

Спасибо за расширение HTML to CSS autocompletion. Это то что я искал!

@RatSvet 6 месяцев назад

Благодарю за очень полезный и доступный к пониманию урок.

@m1akarov442 2 года назад

Очень крутой Урок ! Спасибо за видео =)

@q3dm6 Год назад

Спасибо за отличную подачу материала!

@Sozenishe 6 месяцев назад

Отличный материал и подача. Спасибо команде канала!🤝

@george_ns 2 года назад

Топ. Супер. Класс! Не только для продвинутых, но и для новичков

@LectorWeb 2 года назад

Про сравнение не знал, прикольно! Это почти как Compare в Гите ) Удобно очень!

@nkubatova 11 месяцев назад

Спасибо Вам, за такую подачу информации! 👍

@user-tx2ym7iq5u Год назад

Спасибо большое. Очень интересный и полезный урок

@tatianakerimova1763 5 месяцев назад

Спасибо за подробный урок! Все понятно и доступно!

@avel8965 2 года назад

Ни у кого до этого не видел таких интересных штукенций, смотрел очень много, про классы и фичи зашло, спасибо

@denistverdokhlebov3059 2 года назад

Как всегда шикарен ) Спасибо)

@Turpalion 5 месяцев назад

Балин афигенная подача все понятно и четко от души!

@iharvasileuski6008 Год назад

это лучший материал который я пока нашел! Спасибо Автор, низкий поклон от полного 0ля)

@user-ll4gz1hy8z 7 месяцев назад

Спасибо Вам большое! Вы мастер!

@evgentereshchuk7698 2 года назад

Спасибо! Давно пользуюсь но реально полезные штуки узнал.

@user-no5qw3zv3u Год назад

это самое лучше видео по настройке VS ! благодарчик!

@yunus737 Год назад

Спасибо большое!!! Очень полезная информация!

@user-ds4xe3bw4n 8 месяцев назад

кратко и ясно, благодарю!!!

@monieKidd 2 года назад

Отличный урок, в следующий раз посмотрю про эмметы))

@Anti-zasor 2 года назад

Очень удобно, благодарю !)

@yevhenmikhalov2258 2 года назад

Огонь, сасибо за урок, емметом давно пользуюсь а вот про переносы css в HTML мог только мечтать)

@Web_Charger Год назад

Я также могу добавить от себя несколько полезных расширений: • CodeSnap - делает снимок кода, который вы выделили; • Auto Rename Tag - сразу изменяет второй тег, при изменении первого; • Live Preview - удобное расширение, которое сразу показывает результат сайта • Material Icon Theme - тема для иконок • SynthWawe '84 - тема для всего, может кому-то понравится

@boburbahtiyarov 4 месяца назад

Live Preview - на видео уже показано альтернатива под названием Live Server

@Web_Charger 4 месяца назад

@@boburbahtiyarov для меня намного удобнее Live Preview

@What-fv1ls 4 месяца назад

спасибо

@vbenkovskyy 2 года назад

Шикарный урок, спасибо большое! :)

@user-xu1rr9do8z 3 месяца назад

Лучшая подача уроков и информации. Сравнивал с многими тоже не плохими но тут предельно понятно, единственное пожелал бы автору это при кликах акцентировать при переключении что бы не включать в замедленное видео. Не болейте и не тупейте!

@iii_mrmic_iii3723 7 месяцев назад

Просто лучший! Спасибо!)

@magistrbrims 7 месяцев назад

Отличный мануал, премного благодарен!

@KarlssonFrost 7 месяцев назад

Крутейший гайд! Чтобы вносимые в файл изменения отображались через плагин Live Server сразу, а не после сохранения файла, необходимо включить Автосохранение (Файл > Автосохранение). По умолчанию параметр выключен и пришлось подумать, почему я не вижу изменения сразу ))

@nikkicoldex8408 2 года назад

Спасибо за полезное видео. Лайк!

@user-yg6ex7rg2p 2 года назад

Спасибо большое автору!

@user-kh7fv5rn1g Год назад

Для сравнения файлов всегда возвращалась в Notepad++ . Даже не пришла в голову мысль, что здесь тоже может быть такая фича . Горе от ума))) спасибо за плюшки 👍

@baxtik88 Год назад

Спасибо большое за ролик!!!

@mansur_terla 3 месяца назад

Спасибо за урок) Duplicate action точно нужен всем. Позволяет дублировать файлы и папки

@george_ns 3 месяца назад

Пипец. Какое же шикарное видео!

@aruu8796 Год назад

такое полезное видео, спасибо большое

@alicerossiarts Год назад

Cпасибо огромное! Редактор преобразился

@user-cl9yc1tw2i Год назад

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

@seastraus1 3 месяца назад

Отличное видео! Спасибо!

@user-yq7wh9do7y 2 года назад

Большое спасибо за урок! Без воды

@user-wf1gg4ry4r Месяц назад

Очень вам благодарен

@user-os7wf2ly2t Год назад

Красавчик!)

@contrast3119 2 года назад

Ох уж эти подсказки при наведении, порой случайно тыкну, и перехожу на документацию, спасибо за совет)

@gad_power2651 Год назад

Крутые настройки спасибо большое очень помог спасибо!!!!!!!!!!!!!

@lessons3141 Год назад

спасибо, информативно

@user-go3cq9nz1b 2 года назад

Спасибо. интересное видео. Ещё полезное расширение, на мой взгляд, Image preview

@ZXSAQWsn Месяц назад

Благодарю вас!) Кажется у меня получилось...)

@serhikorn 7 месяцев назад

Спасибо огромное! Как раз решил переехать с PhpStorm. Оказывается, для моих нужд нет смысла платить за их подписку. VS Code все решает, в принципе. Осталось только немного попривыкнуть.

@YuriyBaragin Год назад

Благодарю 🙏

@janmaly3292 2 года назад

Очередное видео от гуру 😍💪 Я ток недавно на Атом перешёл 😬

@abc111prod 10 месяцев назад

Круто!

@vladimirbasov3627 5 месяцев назад

Супер!!!

@PashaDefragzor 7 месяцев назад

Добже, поддерживаю такого рода обучение. Можно было бы про WSL рассказать, но в целом можно и самому поискать

@wdm 7 месяцев назад

Здравствуйте. Тему по WSL я вынес в отдельный урок: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HYuFw-YldjU.html

@andreyshkumat4283 2 года назад

Благодарю

@vaspurakavdalian1133 Год назад

Красавчик

@den8141 10 месяцев назад

Спасибо!

@sergeytukhtarov1175 2 года назад

Отличное видео по настройке редактора VsCode. Редактор к бою готов! Чтож теперь вперед верстать боевой проект по курсу дальше

@mew6085 2 года назад

Супер)!

@user-vk6ds3pz6u Год назад

Thank you 💖 so much

@martakor 7 месяцев назад

live сервер и автозаполнение классов - супер штука

@folomba Год назад

Спасибо большое! А будут уроки по PHP?

@svmmur Год назад

Thanks so much )

@user-ex5lf2ng1c Год назад

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

@alexandralexandr2997 11 месяцев назад

отдельный лайк за терминал ) 👍 в vs написано, что терминал открывается с помощью комбинации : ctrl + ' а на самом деле: ctrl + j

@edgull_tlt 2 года назад

Спасибо

@Kurkulio_ 2 года назад

Ещё клавиши на клавиатуре home, end, pgUp, pgDn могут быть удобными. А вообще, после твоего ролика, такое чувство, что я раньше в обычном блокноте писал, спасибо за ролик!

@ertar0 Год назад

спасибо!

@user-cn7ri9cp7b Год назад

спасибо. посмотрела половину видео и уже настроила, что хотела)) VSC, как по волшебству заработал! Заработало даже то, что не работало до этого и что я не могла настроить ранее)))кодовая маги, однако.....

@andreytaraban2393 Год назад

Классний расбор функций vsc.

@Nikos-xd6le Месяц назад

❤

@akhmad_goytinski Год назад

Спасибо Вам!Благодарю за качественно информационное видео. У мння возникла вопрос - Visual Studio Code создаёт dist папку с файлом index.html Возможно это делает какое-то расширение, как отключить не знаю. С уважением к Вам Ахмад

@user-pr7pw6sp3u 2 года назад

спасибо

@user-br3hf7xp1z Год назад

Добрый день. А можешь переназначить клавиши ctrl+c на копирование выделенного фрагмента, а не всей строки, как по умолчанию стоит?

@samxdin.mp3 Год назад

у меня чувство , что пересел с копейки на спорткар , спасибо

@vilich 10 месяцев назад

😂

@s1lentssh 2 года назад

Спасибо за тутор! Кстати ребят, обязательно чекните тему lucy, я с нее уже год не слезаю, просто офигенская UPD: кстати если кто прям тащится по минимализму, попробуйте Ctrl+K, Z - откроет zen mode, вообще ничего отвлекать не будет

@bogdanz5810 2 года назад

Тема норм, попробую поюзать)

@AlexeyArkhipenkoarhis77 2 года назад

Спасибо за видео! А вот такой вопрос, как можно настроит работу на VS Code удаленном сервере используя компилятор SASS , чтобы получается файлы компилировались и передавались на удаленный сервер. Возможно ли такое?

@scc-6 2 года назад

Ох, можно выделить все в хтмл и скопировать классы, как же приятно

@alinalessio Год назад

В саблайме я постоянно пользуюсь обёрткой тегов. Когда выделяешь кусок текста и при нажатии (у меня) Alt+Shift+W выделенный текст оборачивался тегом , который лего можно было тут же заменить на любой другой. Очень нужная вещь. А как в этом редакторе это реализовать?

@Veta-kh7uw Год назад

всем у кого не получается открыть стартер, но при этом у вас закрыта папка, то нужно разархивировать zip файл(нажимаете правую кнопку мыши -> извлечь все, указываете в какую папку). И собственно уже переносите эту папку в vs code. возможно для кого-то эта инфа была очевидна, но лично мне пришлось запариться, чтобы понять в чем дело, т.к. я в этом полный 0.

@clipniker8423 Год назад

Я ещё включаю автосохранение, чтобы по сто раз не нажимать ctrl + s после каждого действия. Для этого, в json файле написал: "files.autoSave": "afterDelay".

@agilitypower3356 Год назад

как сделать чтобы при развертывании тега вначале появлялся class а потом href ?

@MishaWS 2 года назад

Prettier отличное расширение

@AlekseyNaumov_734 2 года назад

Что делает?

@MishaWS 2 года назад

@@AlekseyNaumov_734 форматирует код

@cryfos Год назад

От себя могу добавить: 1. Плагин "Settings Sync", чтобы не настраивать постоянно всё и не бэкапить. Зашёл, ввёл логин-пароль и все настройки и плагины подгрузились 2. Плагин "indent-rainbow". Он подсвечивает вложенность и визуально видно её глубину (лучше не использовать постоянным отображением символов табов, а то пестрит) 3. Плагин "Better Comments". Он позволяет ставить разноцветные комментарии

@user-by1nq8zf6k 8 месяцев назад

в одном из уроков видел у вас плавную печать кода , можно название этого расширения?

@wdm 8 месяцев назад

В настройках VSCode: Cursor Smooth Caret Animation, установите значение на on.

@user-by1nq8zf6k 8 месяцев назад

спасибо@@wdm

@MariMaxVR Год назад

Подскажите пожалуйста как сделать так, чтобы автоматически переносились фигурные скобки на новые строки ? То есть чтобы { и } сами переносились каждая на новую строку а между ними уже писать код. Спасибо

@user-fs3yr9yk6n 2 года назад

я крч один раз психанул, и начал уменьшать всё)) Убрал нижнюю панельку, а чё там такого важного, ну если что забиндил, уменьшил скролл ахаха, вот оставил слева только номер строки. А из видоса кстати про сравнение файлов узнал - приколдес!))

@kerusdc8322 2 года назад

а есть плагин, который работает наоборот css Peek? чтоб в css можно было кликнуть по классу и показало, в каких файлах он используется и можно было к нему перейти в html

@dimaz-88008 6 месяцев назад

Спасибо за очень доходчивый гайд! Не подскажите, как исправить такое внезапно возникшее в моём VS Code явление - раньше в коде css при наведении на квадратик с цветом (например, в color или background) появлялась палитра, при клике по её шапке цветовая модель менялась и продолжая кликать можно было переключать режимы и остановиться на нужном. А сейчас переключение происходит ( по клику) только на одну, следующую цветовую модель, но при этом окошко закрывается, и приходится всю процедуру заново проделывать, если на нужный режим не переключился (например в коде цвет в hsl, наводим на квадратик появляется окно с палитрой, кликаем по шапке, переключаемся на режим hwb и это окошко закрывается, а мне нужно, rgb). Заранее большое спасибо!

@user-qn6vi4do7w Год назад

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

@user-bc7qf4jt9s Год назад

Удалить или закомментировать settings.json

@FSP2080 Год назад

👋👍🎯

@no-distrx 2 года назад

😃

@cheeseman_92 Год назад

А как выделять текст курсором? Тоесть я имею ввиду то что что при зажатии на лкм у меня отдельно символы/строки не выделяются у меня выделяется только отдельно слово/предложение/текст от двойного нажатия на лкм

@tihon2890 2 года назад

Привет! Подскажи пожалуйста, как убрать горизонтальную полоску для прокручивания страницы? Хочется чтобы текст не уходил бесконечно в правую сторону, а переносился вниз. Заранее спасибо!

@wdm 2 года назад

Atl + Z

@TheZver63 2 года назад

Привет, скажи у тебя стандартный Проводник в Windows или же какой-то плагин? Понравился))

@wdm 2 года назад

Стандартный Windows + QTTabBar: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xzz5nTioZI4.html

@natallutsenko6859 Год назад

Подскажите пожалуйста? как быстро фрагмент кода оберуть в какой-то тег (не используя ctrl+x ctrl+v)

@specialonevanguardgrouppmr5054 Месяц назад

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

@wdm Месяц назад

Можно вручную переключить на Alt + Z, можно настроить, чтобы всегда переносились строки в редакторе. В настройках VS Code найдите "word wrap" и включите данный параметр.