Настройка 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

[@wdm]

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

[@kuksogen]

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

[@DjFoxF]

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

[@W_i_n_n_e_r_Man]

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

[@mrgerber]

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

[@user-uv1dt7eo1c]

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

[@Sozenishe]

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

[@avel8965]

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

[@RatSvet]

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

[@m1akarov442]

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

[@nkubatova]

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

[@LectorWeb]

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

[@q3dm6]

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

[@Turpalion]

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

[@tatianakerimova1763]

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

[@denistverdokhlebov3059]

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

[@george_ns]

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

[@user-no5qw3zv3u]

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

[@vbenkovskyy]

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

[@iharvasileuski6008]

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

[@monieKidd]

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

[@user-tx2ym7iq5u]

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

[@user-xu1rr9do8z]

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

[@user-ds4xe3bw4n]

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

[@yevhenmikhalov2258]

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

[@user-ll4gz1hy8z]

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

[@evgentereshchuk7698]

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

[@yunus737]

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

[@user-kh7fv5rn1g]

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

[@user-yq7wh9do7y]

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

[@KarlssonFrost]

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

[@magistrbrims]

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

[@iii_mrmic_iii3723]

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

[@Anti-zasor]

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

[@george_ns]

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

[@mansur_terla]

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

[@sergeytukhtarov1175]

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

[@nikkicoldex8408]

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

[@alicerossiarts]

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

[@contrast3119]

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

[@user-cl9yc1tw2i]

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

[@user-yg6ex7rg2p]

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

[@baxtik88]

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

[@seastraus1]

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

[@serhikorn]

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

[@janmaly3292]

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

[@user-wf1gg4ry4r]

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

[@aruu8796]

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

[@ZXSAQWsn]

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

[@Web_Charger]

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

[@boburbahtiyarov]

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

[@Web_Charger]

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

[@What-fv1ls]

спасибо

[@gad_power2651]

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

[@user-os7wf2ly2t]

Красавчик!)

[@PashaDefragzor]

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

[@wdm]

Здравствуйте. Тему по WSL я вынес в отдельный урок: kzbin.info/www/bejne/forYd6pjjtGXoLc

[@user-go3cq9nz1b]

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

[@lessons3141]

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

[@martakor]

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

[@Kurkulio_]

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

[@alexandralexandr2997]

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

[@YuriyBaragin]

Благодарю 🙏

[@vladimirbasov3627]

Супер!!!

[@user-vk6ds3pz6u]

Thank you 💖 so much

[@abc111prod]

Круто!

[@den8141]

Спасибо!

[@folomba]

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

[@andreyshkumat4283]

Благодарю

[@vaspurakavdalian1133]

Красавчик

[@user-ex5lf2ng1c]

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

[@mew6085]

Супер)!

[@svmmur]

Thanks so much )

[@user-cn7ri9cp7b]

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

[@akhmad_goytinski]

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

[@user-br3hf7xp1z]

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

[@ertar0]

спасибо!

[@Kristjan44]

Спасибо

[@andreytaraban2393]

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

[@samxdin.mp3]

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

[@vilich]

😂

[@user-wk5wg4ol4b]

💯 %😂

[@mykola_vdovenko]

спасибо

[@user-fs3yr9yk6n]

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

[@scc-6]

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

[@AlexeyArkhipenkoarhis77]

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

[@user-by1nq8zf6k]

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

[@wdm]

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

[@user-by1nq8zf6k]

спасибо@@wdm

[@s1lentssh]

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

[@bogdanz5810]

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

[@Nikos-xd6le]

❤

[@agilitypower3356]

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

[@alinalessio]

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

[@dimaz-88008]

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

[@clipniker8423]

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

[@kerusdc8322]

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

[@MariMaxVR]

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

[@cryfos]

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

[@Veta-kh7uw]

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

[@user-qn6vi4do7w]

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

[@user-bc7qf4jt9s]

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

[@cheeseman_92]

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

[@natallutsenko6859]

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

[@tihon2890]

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

[@wdm]

Atl + Z

[@psixopat-dd7tm]

А можете делать видео как установить python c++ и java

[@comisarrex5961]

а что насчет vs code vim?)

[@Alyonushka_rikova]

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

[@MishaWS]

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

[@AlekseyNaumov_734]

Что делает?

[@MishaWS]

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

[@mrtapahtuho193]

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

[@wdm]

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