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

Рет қаралды 298,217

Күн бұрын

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

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

@W_i_n_n_e_r_Man Жыл бұрын

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

@kuksogen Жыл бұрын

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

@DjFoxF Жыл бұрын

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

@mrgerber 2 жыл бұрын

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

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

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

@avel8965 2 жыл бұрын

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

@Sozenishe 7 ай бұрын

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

@RatSvet 7 ай бұрын

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

@george_ns 2 жыл бұрын

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

@m1akarov442 2 жыл бұрын

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

@LectorWeb 2 жыл бұрын

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

@iharvasileuski6008 Жыл бұрын

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

@Turpalion 6 ай бұрын

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

@monieKidd 2 жыл бұрын

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

@q3dm6 Жыл бұрын

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

@vbenkovskyy 2 жыл бұрын

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

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

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

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

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

@tatianakerimova1763 6 ай бұрын

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

@nkubatova Жыл бұрын

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

@denistverdokhlebov3059 2 жыл бұрын

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

@KarlssonFrost 9 ай бұрын

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

@user-xu1rr9do8z 4 ай бұрын

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

@evgentereshchuk7698 2 жыл бұрын

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

@yevhenmikhalov2258 2 жыл бұрын

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

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

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

@user-yq7wh9do7y 2 жыл бұрын

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

@yunus737 2 жыл бұрын

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

@magistrbrims 8 ай бұрын

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

@user-ds4xe3bw4n 9 ай бұрын

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

@Anti-zasor 2 жыл бұрын

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

@Boris_Zhukov. 8 ай бұрын

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

@mansur_terla 4 ай бұрын

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

@george_ns 4 ай бұрын

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

@nikkicoldex8408 2 жыл бұрын

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

@janmaly3292 2 жыл бұрын

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

@contrast3119 2 жыл бұрын

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

@alicerossiarts Жыл бұрын

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

@iii_mrmic_iii3723 8 ай бұрын

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

@sergeytukhtarov1175 2 жыл бұрын

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

@serhikorn 8 ай бұрын

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

@Web_Charger Жыл бұрын

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

@boburbahtiyarov 5 ай бұрын

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

@Web_Charger 5 ай бұрын

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

@What-fv1ls 5 ай бұрын

спасибо

@seastraus1 4 ай бұрын

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

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

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

@baxtik88 Жыл бұрын

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

@PashaDefragzor 8 ай бұрын

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

@wdm 8 ай бұрын

Здравствуйте. Тему по WSL я вынес в отдельный урок: kzfaq.info/get/bejne/fr-ledpevtLImok.html

@aruu8796 Жыл бұрын

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

@user-yg6ex7rg2p 2 жыл бұрын

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

@gad_power2651 Жыл бұрын

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

@user-go3cq9nz1b 2 жыл бұрын

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

@folomba 2 жыл бұрын

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

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

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

@ZXSAQWsn 2 ай бұрын

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

@lessons3141 Жыл бұрын

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

@user-wf1gg4ry4r 2 ай бұрын

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

@Kurkulio_ 2 жыл бұрын

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

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

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

@YuriyBaragin Жыл бұрын

Благодарю 🙏

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

Thank you 💖 so much

@martakor 8 ай бұрын

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

@alexandralexandr2997 Жыл бұрын

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

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

Красавчик!)

@user-br3hf7xp1z 2 жыл бұрын

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

@akhmad_goytinski Жыл бұрын

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

@user-iv9mj4oz6p Жыл бұрын

Спасибо!

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

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

@vilich 11 ай бұрын

😂

@user-wk5wg4ol4b 25 күн бұрын

💯 %😂

@abc111prod 11 ай бұрын

Круто!

@andreytaraban2393 Жыл бұрын

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

@ertar0 Жыл бұрын

спасибо!

@mew6085 2 жыл бұрын

Супер)!

@vladimirbasov3627 6 ай бұрын

Супер!!!

@svmmur 2 жыл бұрын

Thanks so much )

@andreyshkumat4283 2 жыл бұрын

Благодарю

@vaspurakavdalian1133 Жыл бұрын

Красавчик

@elenaworkart8319 2 жыл бұрын

Спасибо

@AlexeyArkhipenkoarhis77 2 жыл бұрын

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

@alinalessio Жыл бұрын

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

@user-pr7pw6sp3u 2 жыл бұрын

спасибо

@MariMaxVR Жыл бұрын

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

@s1lentssh 2 жыл бұрын

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

@bogdanz5810 2 жыл бұрын

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

@dimaz-88008 7 ай бұрын

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

@tihon2890 2 жыл бұрын

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

@wdm 2 жыл бұрын

Atl + Z

@agilitypower3356 Жыл бұрын

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

@scc-6 2 жыл бұрын

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

@user-fs3yr9yk6n 2 жыл бұрын

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

@user-qn6vi4do7w Жыл бұрын

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

@user-bc7qf4jt9s Жыл бұрын

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

@kerusdc8322 2 жыл бұрын

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

@clipniker8423 Жыл бұрын

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

@cheeseman_92 Жыл бұрын

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

@TheZver63 2 жыл бұрын

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

@wdm 2 жыл бұрын

Стандартный Windows + QTTabBar: kzfaq.info/get/bejne/ruCqaNGFztW-eWg.html

@user-by1nq8zf6k 9 ай бұрын

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

@wdm 9 ай бұрын

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

@user-by1nq8zf6k 9 ай бұрын

спасибо@@wdm

@natallutsenko6859 Жыл бұрын

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

@MishaWS 2 жыл бұрын

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

@AlekseyNaumov_734 2 жыл бұрын

Что делает?

@MishaWS 2 жыл бұрын

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

@Nikos-xd6le 2 ай бұрын

❤

@cryfos Жыл бұрын

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

@mrtapahtuho193 2 жыл бұрын

Привет, подскажите пожалуйста какая у вас установлена тема для Windows? Очень крутая, хочу такой же проводник сделать. Буду очень благодарен если подскажите как такой же сделать.

@wdm Жыл бұрын

Здравствуйте. Это обычная Windows.

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

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

@Alyonushka_rikova 4 ай бұрын

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

@Alexkap84 Жыл бұрын

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

@wdm Жыл бұрын

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

@Alexkap84 Жыл бұрын

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