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

  Переглядів 293,839

WebDesign Master

WebDesign Master

День тому

Все курсы в одном комплекте: 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

КОМЕНТАРІ: 232
@wdm
@wdm 20 днів тому
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@kuksogen
@kuksogen Рік тому
Спасибо за великолепную подачу материала! Объясняете просто и понятно, что лучше помогает разобраться в редакторе и его характеристиках.
@W_i_n_n_e_r_Man
@W_i_n_n_e_r_Man Рік тому
Только начинаю знакомиться с VSC, и это один из лучших, если не лучший, урок по его настройке. Огромная благодарность
@DjFoxF
@DjFoxF Рік тому
Шикарный урок. Спасибо за великолепную подачу материала !
@mrgerber
@mrgerber 2 роки тому
Очень хорошая подача материала, сразу видно отличную наработанную базу! Взял весь пак курсов не глядя) Как минимум, для ознакомления 🙂
@user-uv1dt7eo1c
@user-uv1dt7eo1c Рік тому
Спасибо за расширение HTML to CSS autocompletion. Это то что я искал!
@m1akarov442
@m1akarov442 2 роки тому
Очень крутой Урок ! Спасибо за видео =)
@q3dm6
@q3dm6 Рік тому
Спасибо за отличную подачу материала!
@RatSvet
@RatSvet 6 місяців тому
Благодарю за очень полезный и доступный к пониманию урок.
@george_ns
@george_ns 2 роки тому
Топ. Супер. Класс! Не только для продвинутых, но и для новичков
@Sozenishe
@Sozenishe 5 місяців тому
Отличный материал и подача. Спасибо команде канала!🤝
@denistverdokhlebov3059
@denistverdokhlebov3059 2 роки тому
Как всегда шикарен ) Спасибо)
@nkubatova
@nkubatova 11 місяців тому
Спасибо Вам, за такую подачу информации! 👍
@avel8965
@avel8965 2 роки тому
Ни у кого до этого не видел таких интересных штукенций, смотрел очень много, про классы и фичи зашло, спасибо
@tatianakerimova1763
@tatianakerimova1763 5 місяців тому
Спасибо за подробный урок! Все понятно и доступно!
@Turpalion
@Turpalion 5 місяців тому
Балин афигенная подача все понятно и четко от души!
@user-tx2ym7iq5u
@user-tx2ym7iq5u Рік тому
Спасибо большое. Очень интересный и полезный урок
@LectorWeb
@LectorWeb 2 роки тому
Про сравнение не знал, прикольно! Это почти как Compare в Гите ) Удобно очень!
@iharvasileuski6008
@iharvasileuski6008 Рік тому
это лучший материал который я пока нашел! Спасибо Автор, низкий поклон от полного 0ля)
@vbenkovskyy
@vbenkovskyy 2 роки тому
Шикарный урок, спасибо большое! :)
@evgentereshchuk7698
@evgentereshchuk7698 2 роки тому
Спасибо! Давно пользуюсь но реально полезные штуки узнал.
@user-no5qw3zv3u
@user-no5qw3zv3u Рік тому
это самое лучше видео по настройке VS ! благодарчик!
@user-ds4xe3bw4n
@user-ds4xe3bw4n 7 місяців тому
кратко и ясно, благодарю!!!
@user-ll4gz1hy8z
@user-ll4gz1hy8z 7 місяців тому
Спасибо Вам большое! Вы мастер!
@monieKidd
@monieKidd 2 роки тому
Отличный урок, в следующий раз посмотрю про эмметы))
@yunus737
@yunus737 Рік тому
Спасибо большое!!! Очень полезная информация!
@Anti-zasor
@Anti-zasor 2 роки тому
Очень удобно, благодарю !)
@magistrbrims
@magistrbrims 6 місяців тому
Отличный мануал, премного благодарен!
@yevhenmikhalov2258
@yevhenmikhalov2258 2 роки тому
Огонь, сасибо за урок, емметом давно пользуюсь а вот про переносы css в HTML мог только мечтать)
@iii_mrmic_iii3723
@iii_mrmic_iii3723 7 місяців тому
Просто лучший! Спасибо!)
@user-yq7wh9do7y
@user-yq7wh9do7y 2 роки тому
Большое спасибо за урок! Без воды
@george_ns
@george_ns 3 місяці тому
Пипец. Какое же шикарное видео!
@KarlssonFrost
@KarlssonFrost 7 місяців тому
Крутейший гайд! Чтобы вносимые в файл изменения отображались через плагин Live Server сразу, а не после сохранения файла, необходимо включить Автосохранение (Файл > Автосохранение). По умолчанию параметр выключен и пришлось подумать, почему я не вижу изменения сразу ))
@user-kh7fv5rn1g
@user-kh7fv5rn1g Рік тому
Для сравнения файлов всегда возвращалась в Notepad++ . Даже не пришла в голову мысль, что здесь тоже может быть такая фича . Горе от ума))) спасибо за плюшки 👍
@Web_Charger
@Web_Charger 11 місяців тому
Я также могу добавить от себя несколько полезных расширений: • CodeSnap - делает снимок кода, который вы выделили; • Auto Rename Tag - сразу изменяет второй тег, при изменении первого; • Live Preview - удобное расширение, которое сразу показывает результат сайта • Material Icon Theme - тема для иконок • SynthWawe '84 - тема для всего, может кому-то понравится
@boburbahtiyarov
@boburbahtiyarov 4 місяці тому
Live Preview - на видео уже показано альтернатива под названием Live Server
@Web_Charger
@Web_Charger 4 місяці тому
@@boburbahtiyarov для меня намного удобнее Live Preview
@What-fv1ls
@What-fv1ls 4 місяці тому
спасибо
@nikkicoldex8408
@nikkicoldex8408 2 роки тому
Спасибо за полезное видео. Лайк!
@user-xu1rr9do8z
@user-xu1rr9do8z 3 місяці тому
Лучшая подача уроков и информации. Сравнивал с многими тоже не плохими но тут предельно понятно, единственное пожелал бы автору это при кликах акцентировать при переключении что бы не включать в замедленное видео. Не болейте и не тупейте!
@user-yg6ex7rg2p
@user-yg6ex7rg2p 2 роки тому
Спасибо большое автору!
@user-cl9yc1tw2i
@user-cl9yc1tw2i Рік тому
Спасибо, было полезно!)
@alicerossiarts
@alicerossiarts Рік тому
Cпасибо огромное! Редактор преобразился
@baxtik88
@baxtik88 Рік тому
Спасибо большое за ролик!!!
@user-wf1gg4ry4r
@user-wf1gg4ry4r Місяць тому
Очень вам благодарен
@janmaly3292
@janmaly3292 2 роки тому
Очередное видео от гуру 😍💪 Я ток недавно на Атом перешёл 😬
@seastraus1
@seastraus1 3 місяці тому
Отличное видео! Спасибо!
@contrast3119
@contrast3119 2 роки тому
Ох уж эти подсказки при наведении, порой случайно тыкну, и перехожу на документацию, спасибо за совет)
@mansur_terla
@mansur_terla 3 місяці тому
Спасибо за урок) Duplicate action точно нужен всем. Позволяет дублировать файлы и папки
@aruu8796
@aruu8796 Рік тому
такое полезное видео, спасибо большое
@gad_power2651
@gad_power2651 Рік тому
Крутые настройки спасибо большое очень помог спасибо!!!!!!!!!!!!!
@ZXSAQWsn
@ZXSAQWsn Місяць тому
Благодарю вас!) Кажется у меня получилось...)
@serhikorn
@serhikorn 7 місяців тому
Спасибо огромное! Как раз решил переехать с PhpStorm. Оказывается, для моих нужд нет смысла платить за их подписку. VS Code все решает, в принципе. Осталось только немного попривыкнуть.
@user-go3cq9nz1b
@user-go3cq9nz1b 2 роки тому
Спасибо. интересное видео. Ещё полезное расширение, на мой взгляд, Image preview
@user-os7wf2ly2t
@user-os7wf2ly2t Рік тому
Красавчик!)
@lessons3141
@lessons3141 Рік тому
спасибо, информативно
@sergeytukhtarov1175
@sergeytukhtarov1175 2 роки тому
Отличное видео по настройке редактора VsCode. Редактор к бою готов! Чтож теперь вперед верстать боевой проект по курсу дальше
@martakor
@martakor 7 місяців тому
live сервер и автозаполнение классов - супер штука
@samxdin.mp3
@samxdin.mp3 Рік тому
у меня чувство , что пересел с копейки на спорткар , спасибо
@vilich
@vilich 10 місяців тому
😂
@PashaDefragzor
@PashaDefragzor 7 місяців тому
Добже, поддерживаю такого рода обучение. Можно было бы про WSL рассказать, но в целом можно и самому поискать
@wdm
@wdm 7 місяців тому
Здравствуйте. Тему по WSL я вынес в отдельный урок: ukposts.info/have/v-deo/gImmeq1kkKKVy4k.html
@user-vk6ds3pz6u
@user-vk6ds3pz6u Рік тому
Thank you 💖 so much
@YuriyBaragin
@YuriyBaragin Рік тому
Благодарю 🙏
@vladimirbasov3627
@vladimirbasov3627 5 місяців тому
Супер!!!
@Kurkulio_
@Kurkulio_ 2 роки тому
Ещё клавиши на клавиатуре home, end, pgUp, pgDn могут быть удобными. А вообще, после твоего ролика, такое чувство, что я раньше в обычном блокноте писал, спасибо за ролик!
@abc111prod
@abc111prod 10 місяців тому
Круто!
@user-ex5lf2ng1c
@user-ex5lf2ng1c Рік тому
Привет, не могу найти ссылку для скачивания материала к данному уроку, а вообще большое спасибо за качество того что вы делаете !
@vaspurakavdalian1133
@vaspurakavdalian1133 Рік тому
Красавчик
@den8141
@den8141 10 місяців тому
Спасибо!
@alexandralexandr2997
@alexandralexandr2997 11 місяців тому
отдельный лайк за терминал ) 👍 в vs написано, что терминал открывается с помощью комбинации : ctrl + ' а на самом деле: ctrl + j
@andreyshkumat4283
@andreyshkumat4283 2 роки тому
Благодарю
@mew6085
@mew6085 2 роки тому
Супер)!
@svmmur
@svmmur Рік тому
Thanks so much )
@folomba
@folomba Рік тому
Спасибо большое! А будут уроки по PHP?
@AlexeyArkhipenkoarhis77
@AlexeyArkhipenkoarhis77 2 роки тому
Спасибо за видео! А вот такой вопрос, как можно настроит работу на VS Code удаленном сервере используя компилятор SASS , чтобы получается файлы компилировались и передавались на удаленный сервер. Возможно ли такое?
@user-br3hf7xp1z
@user-br3hf7xp1z Рік тому
Добрый день. А можешь переназначить клавиши ctrl+c на копирование выделенного фрагмента, а не всей строки, как по умолчанию стоит?
@alinalessio
@alinalessio Рік тому
В саблайме я постоянно пользуюсь обёрткой тегов. Когда выделяешь кусок текста и при нажатии (у меня) Alt+Shift+W выделенный текст оборачивался тегом , который лего можно было тут же заменить на любой другой. Очень нужная вещь. А как в этом редакторе это реализовать?
@akhmad_goytinski
@akhmad_goytinski Рік тому
Спасибо Вам!Благодарю за качественно информационное видео. У мння возникла вопрос - Visual Studio Code создаёт dist папку с файлом index.html Возможно это делает какое-то расширение, как отключить не знаю. С уважением к Вам Ахмад
@edgull_tlt
@edgull_tlt 2 роки тому
Спасибо
@user-cn7ri9cp7b
@user-cn7ri9cp7b Рік тому
спасибо. посмотрела половину видео и уже настроила, что хотела)) VSC, как по волшебству заработал! Заработало даже то, что не работало до этого и что я не могла настроить ранее)))кодовая маги, однако.....
@ertar0
@ertar0 Рік тому
спасибо!
@s1lentssh
@s1lentssh 2 роки тому
Спасибо за тутор! Кстати ребят, обязательно чекните тему lucy, я с нее уже год не слезаю, просто офигенская UPD: кстати если кто прям тащится по минимализму, попробуйте Ctrl+K, Z - откроет zen mode, вообще ничего отвлекать не будет
@bogdanz5810
@bogdanz5810 2 роки тому
Тема норм, попробую поюзать)
@user-pr7pw6sp3u
@user-pr7pw6sp3u 2 роки тому
спасибо
@MariMaxVR
@MariMaxVR Рік тому
Подскажите пожалуйста как сделать так, чтобы автоматически переносились фигурные скобки на новые строки ? То есть чтобы { и } сами переносились каждая на новую строку а между ними уже писать код. Спасибо
@andreytaraban2393
@andreytaraban2393 Рік тому
Классний расбор функций vsc.
@Nikos-xd6le
@Nikos-xd6le Місяць тому
@kerusdc8322
@kerusdc8322 2 роки тому
а есть плагин, который работает наоборот css Peek? чтоб в css можно было кликнуть по классу и показало, в каких файлах он используется и можно было к нему перейти в html
@agilitypower3356
@agilitypower3356 Рік тому
как сделать чтобы при развертывании тега вначале появлялся class а потом href ?
@dimaz-88008
@dimaz-88008 5 місяців тому
Спасибо за очень доходчивый гайд! Не подскажите, как исправить такое внезапно возникшее в моём VS Code явление - раньше в коде css при наведении на квадратик с цветом (например, в color или background) появлялась палитра, при клике по её шапке цветовая модель менялась и продолжая кликать можно было переключать режимы и остановиться на нужном. А сейчас переключение происходит ( по клику) только на одну, следующую цветовую модель, но при этом окошко закрывается, и приходится всю процедуру заново проделывать, если на нужный режим не переключился (например в коде цвет в hsl, наводим на квадратик появляется окно с палитрой, кликаем по шапке, переключаемся на режим hwb и это окошко закрывается, а мне нужно, rgb). Заранее большое спасибо!
@clipniker8423
@clipniker8423 Рік тому
Я ещё включаю автосохранение, чтобы по сто раз не нажимать ctrl + s после каждого действия. Для этого, в json файле написал: "files.autoSave": "afterDelay".
@scc-6
@scc-6 2 роки тому
Ох, можно выделить все в хтмл и скопировать классы, как же приятно
@cheeseman_92
@cheeseman_92 Рік тому
А как выделять текст курсором? Тоесть я имею ввиду то что что при зажатии на лкм у меня отдельно символы/строки не выделяются у меня выделяется только отдельно слово/предложение/текст от двойного нажатия на лкм
@cryfos
@cryfos Рік тому
От себя могу добавить: 1. Плагин "Settings Sync", чтобы не настраивать постоянно всё и не бэкапить. Зашёл, ввёл логин-пароль и все настройки и плагины подгрузились 2. Плагин "indent-rainbow". Он подсвечивает вложенность и визуально видно её глубину (лучше не использовать постоянным отображением символов табов, а то пестрит) 3. Плагин "Better Comments". Он позволяет ставить разноцветные комментарии
@Veta-kh7uw
@Veta-kh7uw Рік тому
всем у кого не получается открыть стартер, но при этом у вас закрыта папка, то нужно разархивировать zip файл(нажимаете правую кнопку мыши -> извлечь все, указываете в какую папку). И собственно уже переносите эту папку в vs code. возможно для кого-то эта инфа была очевидна, но лично мне пришлось запариться, чтобы понять в чем дело, т.к. я в этом полный 0.
@user-by1nq8zf6k
@user-by1nq8zf6k 8 місяців тому
в одном из уроков видел у вас плавную печать кода , можно название этого расширения?
@wdm
@wdm 8 місяців тому
В настройках VSCode: Cursor Smooth Caret Animation, установите значение на on.
@user-by1nq8zf6k
@user-by1nq8zf6k 8 місяців тому
спасибо@@wdm
@natallutsenko6859
@natallutsenko6859 Рік тому
Подскажите пожалуйста? как быстро фрагмент кода оберуть в какой-то тег (не используя ctrl+x ctrl+v)
@tihon2890
@tihon2890 2 роки тому
Привет! Подскажи пожалуйста, как убрать горизонтальную полоску для прокручивания страницы? Хочется чтобы текст не уходил бесконечно в правую сторону, а переносился вниз. Заранее спасибо!
@wdm
@wdm 2 роки тому
Atl + Z
@TheZver63
@TheZver63 2 роки тому
Привет, скажи у тебя стандартный Проводник в Windows или же какой-то плагин? Понравился))
@wdm
@wdm 2 роки тому
Стандартный Windows + QTTabBar: ukposts.info/have/v-deo/sKqraaSLoKWLqmg.html
@user-fs3yr9yk6n
@user-fs3yr9yk6n 2 роки тому
я крч один раз психанул, и начал уменьшать всё)) Убрал нижнюю панельку, а чё там такого важного, ну если что забиндил, уменьшил скролл ахаха, вот оставил слева только номер строки. А из видоса кстати про сравнение файлов узнал - приколдес!))
@mrtapahtuho193
@mrtapahtuho193 2 роки тому
Привет, подскажите пожалуйста какая у вас установлена тема для Windows? Очень крутая, хочу такой же проводник сделать. Буду очень благодарен если подскажите как такой же сделать.
@wdm
@wdm Рік тому
Здравствуйте. Это обычная Windows.
@MishaWS
@MishaWS 2 роки тому
Prettier отличное расширение
@AlekseyNaumov_734
@AlekseyNaumov_734 2 роки тому
Что делает?
@MishaWS
@MishaWS 2 роки тому
@@AlekseyNaumov_734 форматирует код
@comisarrex5961
@comisarrex5961 2 роки тому
а что насчет vs code vim?)
@psixopat-dd7tm
@psixopat-dd7tm Рік тому
А можете делать видео как установить python c++ и java
@user-qn6vi4do7w
@user-qn6vi4do7w Рік тому
Лучшее видео по настройке VS, информативно и полезно. Спасибо. Подскажите , а как вернуть все настройки в исходное состояние? Особенно когда в коде меняются параметры?
@user-bc7qf4jt9s
@user-bc7qf4jt9s Рік тому
Удалить или закомментировать settings.json
1 класс vs 11 класс (рисунок)
00:37
БЕРТ
Переглядів 3,1 млн
Помилка,  яку зробило військове керівництво 🙄
01:00
Радіо Байрактар
Переглядів 252 тис.
13 Best Animation For Your Site | HTML, CSS, JQUERY & GSAP
7:07
Approvecode
Переглядів 18 тис.
Объяснение Вёрстки Простого Сайта HTML+CSS
53:56
Сергей Дмитриевский
Переглядів 150 тис.
VS Code - установка и настройка. ТОП 5 плагинов. Редактор кода Visual Studio Code
14:13
VS Code Полный Курс для JavaScript разработчиков
1:32:09
Владилен Минин
Переглядів 261 тис.
1 класс vs 11 класс (рисунок)
00:37
БЕРТ
Переглядів 3,1 млн