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

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

Пікірлер: 233

  • @wdm
    @wdmАй бұрын

    💥 Все курсы в одном комплекте 👇👇👇 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
    @mrgerber2 жыл бұрын

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

  • @Sozenishe
    @Sozenishe6 ай бұрын

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

  • @user-uv1dt7eo1c
    @user-uv1dt7eo1c Жыл бұрын

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

  • @RatSvet
    @RatSvet7 ай бұрын

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

  • @avel8965
    @avel89652 жыл бұрын

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

  • @LectorWeb
    @LectorWeb2 жыл бұрын

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

  • @Turpalion
    @Turpalion6 ай бұрын

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

  • @Web_Charger
    @Web_Charger Жыл бұрын

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

  • @boburbahtiyarov

    @boburbahtiyarov

    5 ай бұрын

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

  • @Web_Charger

    @Web_Charger

    5 ай бұрын

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

  • @What-fv1ls

    @What-fv1ls

    5 ай бұрын

    спасибо

  • @george_ns
    @george_ns2 жыл бұрын

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

  • @m1akarov442
    @m1akarov4422 жыл бұрын

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

  • @q3dm6
    @q3dm6 Жыл бұрын

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

  • @tatianakerimova1763
    @tatianakerimova17636 ай бұрын

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

  • @iharvasileuski6008
    @iharvasileuski6008 Жыл бұрын

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

  • @nkubatova
    @nkubatova Жыл бұрын

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

  • @user-xu1rr9do8z
    @user-xu1rr9do8z4 ай бұрын

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

  • @KarlssonFrost
    @KarlssonFrost8 ай бұрын

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

  • @denistverdokhlebov3059
    @denistverdokhlebov30592 жыл бұрын

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

  • @user-no5qw3zv3u
    @user-no5qw3zv3u Жыл бұрын

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

  • @user-tx2ym7iq5u
    @user-tx2ym7iq5u Жыл бұрын

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

  • @monieKidd
    @monieKidd2 жыл бұрын

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

  • @evgentereshchuk7698
    @evgentereshchuk76982 жыл бұрын

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

  • @yevhenmikhalov2258
    @yevhenmikhalov22582 жыл бұрын

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

  • @vbenkovskyy
    @vbenkovskyy2 жыл бұрын

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

  • @mansur_terla
    @mansur_terla4 ай бұрын

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

  • @yunus737
    @yunus7372 жыл бұрын

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

  • @user-ds4xe3bw4n
    @user-ds4xe3bw4n8 ай бұрын

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

  • @Boris_Zhukov.
    @Boris_Zhukov.8 ай бұрын

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

  • @magistrbrims
    @magistrbrims7 ай бұрын

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

  • @user-kh7fv5rn1g
    @user-kh7fv5rn1g Жыл бұрын

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

  • @serhikorn
    @serhikorn8 ай бұрын

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

  • @george_ns
    @george_ns4 ай бұрын

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

  • @user-yq7wh9do7y
    @user-yq7wh9do7y2 жыл бұрын

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

  • @contrast3119
    @contrast31192 жыл бұрын

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

  • @Anti-zasor
    @Anti-zasor2 жыл бұрын

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

  • @iii_mrmic_iii3723
    @iii_mrmic_iii37238 ай бұрын

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

  • @seastraus1
    @seastraus14 ай бұрын

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

  • @sergeytukhtarov1175
    @sergeytukhtarov11752 жыл бұрын

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

  • @nikkicoldex8408
    @nikkicoldex84082 жыл бұрын

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

  • @user-wf1gg4ry4r
    @user-wf1gg4ry4r2 ай бұрын

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

  • @PashaDefragzor
    @PashaDefragzor8 ай бұрын

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

  • @wdm

    @wdm

    8 ай бұрын

    Здравствуйте. Тему по WSL я вынес в отдельный урок: kzread.info/dash/bejne/eo2pqNlmic_Kmrg.html

  • @alicerossiarts
    @alicerossiarts Жыл бұрын

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

  • @baxtik88
    @baxtik88 Жыл бұрын

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

  • @user-yg6ex7rg2p
    @user-yg6ex7rg2p2 жыл бұрын

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

  • @user-cl9yc1tw2i
    @user-cl9yc1tw2i Жыл бұрын

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

  • @aruu8796
    @aruu8796 Жыл бұрын

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

  • @martakor
    @martakor8 ай бұрын

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

  • @janmaly3292
    @janmaly32922 жыл бұрын

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

  • @ZXSAQWsn
    @ZXSAQWsn2 ай бұрын

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

  • @user-br3hf7xp1z
    @user-br3hf7xp1z2 жыл бұрын

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

  • @gad_power2651
    @gad_power2651 Жыл бұрын

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

  • @samxdin.mp3
    @samxdin.mp3 Жыл бұрын

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

  • @vilich

    @vilich

    11 ай бұрын

    😂

  • @user-wk5wg4ol4b

    @user-wk5wg4ol4b

    18 күн бұрын

    💯 %😂

  • @lessons3141
    @lessons3141 Жыл бұрын

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

  • @user-go3cq9nz1b
    @user-go3cq9nz1b2 жыл бұрын

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

  • @alexandralexandr2997
    @alexandralexandr2997 Жыл бұрын

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

  • @YuriyBaragin
    @YuriyBaragin Жыл бұрын

    Благодарю 🙏

  • @andreytaraban2393
    @andreytaraban2393 Жыл бұрын

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

  • @Kurkulio_
    @Kurkulio_2 жыл бұрын

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

  • @user-ex5lf2ng1c
    @user-ex5lf2ng1c Жыл бұрын

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

  • @den8141
    @den814111 ай бұрын

    Спасибо!

  • @abc111prod
    @abc111prod11 ай бұрын

    Круто!

  • @user-cn7ri9cp7b
    @user-cn7ri9cp7b Жыл бұрын

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

  • @vladimirbasov3627
    @vladimirbasov36276 ай бұрын

    Супер!!!

  • @andreyshkumat4283
    @andreyshkumat42832 жыл бұрын

    Благодарю

  • @MariMaxVR
    @MariMaxVR Жыл бұрын

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

  • @user-os7wf2ly2t
    @user-os7wf2ly2t Жыл бұрын

    Красавчик!)

  • @Kristjan44
    @Kristjan44 Жыл бұрын

    Спасибо

  • @user-vk6ds3pz6u
    @user-vk6ds3pz6u Жыл бұрын

    Thank you 💖 so much

  • @alinalessio
    @alinalessio Жыл бұрын

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

  • @akhmad_goytinski
    @akhmad_goytinski Жыл бұрын

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

  • @Alyonushka_rikova
    @Alyonushka_rikova4 ай бұрын

    Не открываются indetex.html и плагин css в отдельных окнах, подскажите, что делать? Плагины и html открываются водном окне, один, заменяет другого

  • @mew6085
    @mew60852 жыл бұрын

    Супер)!

  • @cheeseman_92
    @cheeseman_92 Жыл бұрын

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

  • @agilitypower3356
    @agilitypower3356 Жыл бұрын

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

  • @ertar0
    @ertar0 Жыл бұрын

    спасибо!

  • @AlexeyArkhipenkoarhis77
    @AlexeyArkhipenkoarhis772 жыл бұрын

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

  • @folomba
    @folomba2 жыл бұрын

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

  • @natallutsenko6859
    @natallutsenko6859 Жыл бұрын

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

  • @dimaz-88008
    @dimaz-880086 ай бұрын

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

  • @svmmur
    @svmmur2 жыл бұрын

    Thanks so much )

  • @vaspurakavdalian1133
    @vaspurakavdalian1133 Жыл бұрын

    Красавчик

  • @user-pr7pw6sp3u
    @user-pr7pw6sp3u2 жыл бұрын

    спасибо

  • @Veta-kh7uw
    @Veta-kh7uw Жыл бұрын

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

  • @s1lentssh
    @s1lentssh2 жыл бұрын

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

  • @bogdanz5810

    @bogdanz5810

    2 жыл бұрын

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

  • @scc-6
    @scc-62 жыл бұрын

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

  • @kerusdc8322
    @kerusdc83222 жыл бұрын

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

  • @Nikos-xd6le
    @Nikos-xd6le2 ай бұрын

  • @user-fs3yr9yk6n
    @user-fs3yr9yk6n2 жыл бұрын

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

  • @tihon2890
    @tihon28902 жыл бұрын

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

  • @wdm

    @wdm

    2 жыл бұрын

    Atl + Z

  • @clipniker8423
    @clipniker8423 Жыл бұрын

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

  • @specialonevanguardgrouppmr5054
    @specialonevanguardgrouppmr50542 ай бұрын

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

  • @wdm

    @wdm

    2 ай бұрын

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

  • @Alexkap84
    @Alexkap84 Жыл бұрын

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

  • @wdm

    @wdm

    Жыл бұрын

    Здравствуйте. Данное поле в редакторе Visual Studio Code называется "Строка состояния". Убрать или вернуть строку состояния VSCode можно в главном меню программы Вид - Внешний вид - Строка состояния.

  • @Alexkap84

    @Alexkap84

    Жыл бұрын

    @@wdm спасибо большое)!👍

  • @cryfos
    @cryfos Жыл бұрын

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

  • @user-by1nq8zf6k
    @user-by1nq8zf6k9 ай бұрын

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

  • @wdm

    @wdm

    9 ай бұрын

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

  • @user-by1nq8zf6k

    @user-by1nq8zf6k

    9 ай бұрын

    спасибо@@wdm

  • @alyonak3013
    @alyonak3013 Жыл бұрын

    Подскажите пожалуйста, правильно я понимаю, что при бесплатной регистрации в GitHub сгенерировать токен можно максимум на год? на бесконечно нет возможности. И у меня эта функция подсвечена знаком Beta. Для меня все это темный лес пока, просто повторяю по уроку.

  • @wdm

    @wdm

    Жыл бұрын

    Здравствуйте. Нет вроде, токен генерируется форевер. Я не помню, генерировал ли заново, всё работает.

  • @user-iw6tt5st7j
    @user-iw6tt5st7j5 ай бұрын

    У меня нет выбора UBUNTU WSL в терминале до и после установки плагина, что делать?

  • @wdm

    @wdm

    5 ай бұрын

    Здравствуйте. Следует установить либо WSL, либо Git Bash: webdesign-master.ru/blog/tools/wsl-nodejs-new.html

  • @user-iw6tt5st7j

    @user-iw6tt5st7j

    5 ай бұрын

    @@wdm Спасибо

  • @TheZver63
    @TheZver632 жыл бұрын

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

  • @wdm

    @wdm

    2 жыл бұрын

    Стандартный Windows + QTTabBar: kzread.info/dash/bejne/qq6ul9CNmdLAeZc.html

Келесі