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

Поделиться
HTML-код
  • Опубликовано: 28 дек 2024

Комментарии • 240

  • @wdm
    @wdm  13 дней назад +1

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

  • @ZM-web
    @ZM-web Месяц назад +3

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

  • @W_i_n_n_e_r_Man
    @W_i_n_n_e_r_Man 2 года назад +29

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

  • @МихаилСеминистый
    @МихаилСеминистый 6 месяцев назад +1

    Великолепное изложение материала,я новичок,делетант,горю желанием познания,спасибо огромное!

  • @ИгорьПлатонов-в3ф
    @ИгорьПлатонов-в3ф 11 месяцев назад +2

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

  • @KarlssonFrost
    @KarlssonFrost Год назад +3

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

  • @kuksogen
    @kuksogen Год назад +20

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

  • @qsb.AnimAxio
    @qsb.AnimAxio Год назад +30

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

    • @boburbakhtiyarov
      @boburbakhtiyarov Год назад +2

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

    • @qsb.AnimAxio
      @qsb.AnimAxio Год назад

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

    • @What-fv1ls
      @What-fv1ls Год назад +1

      спасибо

  • @Turpalion
    @Turpalion Год назад +1

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

  • @DjFoxF
    @DjFoxF Год назад +14

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

  • @RatSvet
    @RatSvet Год назад +3

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

  • @george_ns
    @george_ns 3 года назад +5

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

  • @serhikorn
    @serhikorn Год назад +1

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

  • @tatianakerimova1763
    @tatianakerimova1763 Год назад +1

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

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

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

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

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

  • @magistrbrims
    @magistrbrims Год назад +2

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

  • @Sozenishe
    @Sozenishe Год назад +1

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

  • @iharvasileuski6008
    @iharvasileuski6008 2 года назад +3

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

  • @george_ns
    @george_ns 11 месяцев назад +1

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

  • @mrgerber
    @mrgerber 2 года назад +24

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

  • @VladimirVerner-z6q
    @VladimirVerner-z6q 5 месяцев назад +1

    Огромное спасибо автору! 👍👍👍

  • @LectorWeb
    @LectorWeb 3 года назад +3

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

  • @avel8965
    @avel8965 3 года назад +9

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

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

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

  • @evgentereshchuk7698
    @evgentereshchuk7698 3 года назад +5

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

  • @Boris_Zhukov.
    @Boris_Zhukov. Год назад +2

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

  • @m_mariya_mari
    @m_mariya_mari Год назад +2

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

  • @ZoRTuL-p2n
    @ZoRTuL-p2n 2 года назад +5

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

  • @sergeytukhtarov1175
    @sergeytukhtarov1175 2 года назад +3

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

  • @nkubatova
    @nkubatova Год назад +2

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

  • @МедиаАссават
    @МедиаАссават Год назад +2

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

  • @PashaDefragzor
    @PashaDefragzor Год назад

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

    • @wdm
      @wdm  Год назад +1

      Здравствуйте. Тему по WSL я вынес в отдельный урок: ruclips.net/video/HYuFw-YldjU/видео.html

  • @iii_mrmic_iii3723
    @iii_mrmic_iii3723 Год назад +1

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

  • @СергейКравченко-х5ц
    @СергейКравченко-х5ц 3 года назад +5

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

  • @vbenkovskyy
    @vbenkovskyy 3 года назад +12

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

  • @aigen31
    @aigen31 3 года назад +2

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

  • @janmaly3292
    @janmaly3292 3 года назад +2

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

  • @m1akarov2021
    @m1akarov2021 3 года назад +6

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

  • @АндрейНовицкий-т9е
    @АндрейНовицкий-т9е 2 года назад +5

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

  • @denistverdokhlebov3059
    @denistverdokhlebov3059 3 года назад +2

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

  • @alicerossiarts
    @alicerossiarts 2 года назад

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

  • @q3dm6
    @q3dm6 Год назад +3

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

  • @martakor
    @martakor Год назад +1

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

  • @samxdin.mp3
    @samxdin.mp3 2 года назад +23

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

  • @СергейСульженко-ф9я

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

  • @ВладиславНовиков-к8з
    @ВладиславНовиков-к8з 9 месяцев назад +1

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

  • @ZXSAQWsn
    @ZXSAQWsn 9 месяцев назад +1

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

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

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

  • @yunus737
    @yunus737 2 года назад +1

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

  • @ВладимирМеркулов-п8е

    Красавчик!)

  • @nikkicoldex8408
    @nikkicoldex8408 3 года назад

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

  • @alexandralexandr2997
    @alexandralexandr2997 Год назад

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

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

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

  • @аленаракович-р9с
    @аленаракович-р9с 2 года назад

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

  • @s1lentssh
    @s1lentssh 3 года назад +8

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

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

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

  • @gad_power2651
    @gad_power2651 2 года назад

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

  • @abc111prod
    @abc111prod Год назад +1

    Круто!

  • @baxtik88
    @baxtik88 2 года назад

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

  • @aruu8796
    @aruu8796 2 года назад

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

  • @lessons3141
    @lessons3141 Год назад

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

  • @Kurkulio_
    @Kurkulio_ 3 года назад +9

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

  • @ОлегШинкевич-ю3э
    @ОлегШинкевич-ю3э Год назад +1

    Thank you 💖 so much

  • @ПолинаАнтонова-о7в
    @ПолинаАнтонова-о7в 2 года назад

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

  • @ИльназГарайшин-ч6о
    @ИльназГарайшин-ч6о 2 года назад

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

  • @andreytaraban2393
    @andreytaraban2393 2 года назад

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

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

    Раньше я работал в сублайм тексте когда заходил вскод мне ваше не понятно бло все английский был когда изменил язык на русском всё бло понятно 😊

  • @ВладимирК-ь9г
    @ВладимирК-ь9г 3 года назад

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

  • @ЗаурБерсанов-ь5о
    @ЗаурБерсанов-ь5о Год назад +1

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

    • @wdm
      @wdm  Год назад

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

    • @ЗаурБерсанов-ь5о
      @ЗаурБерсанов-ь5о Год назад

      спасибо@@wdm

  • @vaspurakavdalian1133
    @vaspurakavdalian1133 2 года назад

    Красавчик

  • @alinalessio
    @alinalessio 2 года назад +1

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

  • @folomba
    @folomba 2 года назад +4

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

  • @YuriyBaragin
    @YuriyBaragin Год назад

    Благодарю 🙏

  • @Veta-kh7uw
    @Veta-kh7uw 2 года назад

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

  • @КристинаКолеганова-ь8к

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

  • @mgnexclamatory.lgx1-g5e
    @mgnexclamatory.lgx1-g5e 21 день назад +1

  • @specialonevanguardgrouppmr5054
    @specialonevanguardgrouppmr5054 9 месяцев назад +1

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

    • @wdm
      @wdm  9 месяцев назад +2

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

  • @cryfos
    @cryfos 2 года назад

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

  • @akhmad_goytinski
    @akhmad_goytinski 2 года назад

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

  • @tihon2890
    @tihon2890 2 года назад +1

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

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

      Atl + Z

  • @agilitypower3356
    @agilitypower3356 Год назад

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

  • @clipniker8423
    @clipniker8423 Год назад +2

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

  • @MishaWS
    @MishaWS 3 года назад +2

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

    • @AlekseyNaumov_734
      @AlekseyNaumov_734 3 года назад

      Что делает?

    • @MishaWS
      @MishaWS 3 года назад

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

  • @mew6085
    @mew6085 3 года назад

    Супер)!

  • @ВикторКузнецов-о1ь

    Спасибо!

  • @КонстантинК-н3ш
    @КонстантинК-н3ш 2 года назад

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

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

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

  • @dimaz-88008
    @dimaz-88008 Год назад

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

  • @НикитаМанжуров-ы8э

    Как связаться с вами по поводу оплаты?

    • @wdm
      @wdm  Год назад +1

      Здравствуйте. Напишите на почту courses@webdesign-master.ru

  • @scc-6
    @scc-6 2 года назад +1

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

  • @natallutsenko6859
    @natallutsenko6859 Год назад

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

  • @sfera7778
    @sfera7778 2 года назад

    Какая комбинация клавиш для создания базового каркаса страницы?

  • @Alexkap84
    @Alexkap84 Год назад

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

    • @wdm
      @wdm  Год назад +1

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

    • @Alexkap84
      @Alexkap84 Год назад

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

  • @cheeseman_93
    @cheeseman_93 Год назад

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

  • @MariMaxVR
    @MariMaxVR Год назад

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

  • @VadimN88
    @VadimN88 Год назад

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

    • @wdm
      @wdm  Год назад +2

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

    • @VadimN88
      @VadimN88 Год назад

      @@wdm Спасибо

  • @ertar0
    @ertar0 Год назад

    спасибо!

  • @Larriva666
    @Larriva666 Год назад

    Привет! А склонировать ваш репозиторий нельзя?

    • @wdm
      @wdm  Год назад

      Здравствуйте. Можно конечно)

  • @svmmur
    @svmmur 2 года назад

    Thanks so much )

  • @Илона-з4в
    @Илона-з4в 2 года назад +1

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

    • @BBCTry
      @BBCTry 2 года назад

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