Настройка VS Code для верстки
Вставка
- Опубліковано 3 чер 2024
- Все курсы в одном комплекте: 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
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
Шикарный урок. Спасибо за великолепную подачу материала !
Спасибо за великолепную подачу материала! Объясняете просто и понятно, что лучше помогает разобраться в редакторе и его характеристиках.
Очень хорошая подача материала, сразу видно отличную наработанную базу! Взял весь пак курсов не глядя) Как минимум, для ознакомления 🙂
Только начинаю знакомиться с VSC, и это один из лучших, если не лучший, урок по его настройке. Огромная благодарность
Отличный материал и подача. Спасибо команде канала!🤝
Я также могу добавить от себя несколько полезных расширений:
• CodeSnap - делает снимок кода, который вы выделили;
• Auto Rename Tag - сразу изменяет второй тег, при изменении первого;
• Live Preview - удобное расширение, которое сразу показывает результат сайта
• Material Icon Theme - тема для иконок
• SynthWawe '84 - тема для всего, может кому-то понравится
Live Preview - на видео уже показано альтернатива под названием Live Server
@@boburbahtiyarov для меня намного удобнее Live Preview
спасибо
Спасибо за расширение HTML to CSS autocompletion. Это то что я искал!
Ни у кого до этого не видел таких интересных штукенций, смотрел очень много, про классы и фичи зашло, спасибо
Благодарю за очень полезный и доступный к пониманию урок.
Про сравнение не знал, прикольно! Это почти как Compare в Гите ) Удобно очень!
Балин афигенная подача все понятно и четко от души!
Очень крутой Урок ! Спасибо за видео =)
Топ. Супер. Класс! Не только для продвинутых, но и для новичков
Лучшая подача уроков и информации. Сравнивал с многими тоже не плохими но тут предельно понятно, единственное пожелал бы автору это при кликах акцентировать при переключении что бы не включать в замедленное видео.
Не болейте и не тупейте!
Отличный урок, в следующий раз посмотрю про эмметы))
Спасибо за отличную подачу материала!
Спасибо за подробный урок! Все понятно и доступно!
это лучший материал который я пока нашел! Спасибо Автор, низкий поклон от полного 0ля)
Спасибо большое. Очень интересный и полезный урок
Спасибо Вам, за такую подачу информации! 👍
Крутейший гайд!
Чтобы вносимые в файл изменения отображались через плагин Live Server сразу, а не после сохранения файла, необходимо включить Автосохранение (Файл > Автосохранение). По умолчанию параметр выключен и пришлось подумать, почему я не вижу изменения сразу ))
это самое лучше видео по настройке VS ! благодарчик!
Шикарный урок, спасибо большое! :)
Для сравнения файлов всегда возвращалась в Notepad++ . Даже не пришла в голову мысль, что здесь тоже может быть такая фича . Горе от ума))) спасибо за плюшки 👍
Огонь, сасибо за урок, емметом давно пользуюсь а вот про переносы css в HTML мог только мечтать)
Спасибо за урок) Duplicate action точно нужен всем. Позволяет дублировать файлы и папки
Спасибо! Давно пользуюсь но реально полезные штуки узнал.
Как всегда шикарен ) Спасибо)
Спасибо огромное! Как раз решил переехать с PhpStorm. Оказывается, для моих нужд нет смысла платить за их подписку. VS Code все решает, в принципе. Осталось только немного попривыкнуть.
Спасибо большое!!! Очень полезная информация!
Отличный мануал, премного благодарен!
Ох уж эти подсказки при наведении, порой случайно тыкну, и перехожу на документацию, спасибо за совет)
Спасибо Вам большое! Вы мастер!
кратко и ясно, благодарю!!!
Большое спасибо за урок! Без воды
Отличное видео по настройке редактора VsCode. Редактор к бою готов! Чтож теперь вперед верстать боевой проект по курсу дальше
Очень удобно, благодарю !)
Добже, поддерживаю такого рода обучение. Можно было бы про WSL рассказать, но в целом можно и самому поискать
Здравствуйте. Тему по WSL я вынес в отдельный урок: ua-cam.com/video/HYuFw-YldjU/v-deo.html
Пипец. Какое же шикарное видео!
Cпасибо огромное! Редактор преобразился
Спасибо за полезное видео. Лайк!
Просто лучший! Спасибо!)
отдельный лайк за терминал ) 👍
в vs написано, что терминал открывается с помощью комбинации : ctrl + '
а на самом деле: ctrl + j
Очередное видео от гуру 😍💪
Я ток недавно на Атом перешёл 😬
Отличное видео! Спасибо!
live сервер и автозаполнение классов - супер штука
Благодарю вас!) Кажется у меня получилось...)
Спасибо. интересное видео. Ещё полезное расширение, на мой взгляд, Image preview
Крутые настройки спасибо большое очень помог спасибо!!!!!!!!!!!!!
такое полезное видео, спасибо большое
Очень вам благодарен
Спасибо большое автору!
Спасибо, было полезно!)
Спасибо большое за ролик!!!
Спасибо большое! А будут уроки по PHP?
Ещё клавиши на клавиатуре home, end, pgUp, pgDn могут быть удобными. А вообще, после твоего ролика, такое чувство, что я раньше в обычном блокноте писал, спасибо за ролик!
Классний расбор функций vsc.
спасибо. посмотрела половину видео и уже настроила, что хотела)) VSC, как по волшебству заработал! Заработало даже то, что не работало до этого и что я не могла настроить ранее)))кодовая маги, однако.....
спасибо, информативно
Спасибо за тутор!
Кстати ребят, обязательно чекните тему lucy, я с нее уже год не слезаю, просто офигенская
UPD: кстати если кто прям тащится по минимализму, попробуйте Ctrl+K, Z - откроет zen mode, вообще ничего отвлекать не будет
Тема норм, попробую поюзать)
Привет, не могу найти ссылку для скачивания материала к данному уроку, а вообще большое спасибо за качество того что вы делаете !
у меня чувство , что пересел с копейки на спорткар , спасибо
😂
💯 %😂
Добрый день. А можешь переназначить клавиши ctrl+c на копирование выделенного фрагмента, а не всей строки, как по умолчанию стоит?
Thank you 💖 so much
Спасибо Вам!Благодарю за качественно информационное видео. У мння возникла вопрос - Visual Studio Code создаёт dist папку с файлом index.html Возможно это делает какое-то расширение, как отключить не знаю. С уважением к Вам Ахмад
Красавчик!)
всем у кого не получается открыть стартер, но при этом у вас закрыта папка, то нужно разархивировать zip файл(нажимаете правую кнопку мыши -> извлечь все, указываете в какую папку). И собственно уже переносите эту папку в vs code.
возможно для кого-то эта инфа была очевидна, но лично мне пришлось запариться, чтобы понять в чем дело, т.к. я в этом полный 0.
Благодарю 🙏
Круто!
Спасибо!
Ох, можно выделить все в хтмл и скопировать классы, как же приятно
Супер!!!
Благодарю
Супер)!
Thanks so much )
я крч один раз психанул, и начал уменьшать всё))
Убрал нижнюю панельку, а чё там такого важного, ну если что забиндил,
уменьшил скролл ахаха,
вот оставил слева только номер строки.
А из видоса кстати про сравнение файлов узнал - приколдес!))
От себя могу добавить:
1. Плагин "Settings Sync", чтобы не настраивать постоянно всё и не бэкапить. Зашёл, ввёл логин-пароль и все настройки и плагины подгрузились
2. Плагин "indent-rainbow". Он подсвечивает вложенность и визуально видно её глубину (лучше не использовать постоянным отображением символов табов, а то пестрит)
3. Плагин "Better Comments". Он позволяет ставить разноцветные комментарии
Спасибо
спасибо!
В саблайме я постоянно пользуюсь обёрткой тегов. Когда выделяешь кусок текста и при нажатии (у меня) Alt+Shift+W выделенный текст оборачивался тегом , который лего можно было тут же заменить на любой другой. Очень нужная вещь. А как в этом редакторе это реализовать?
Я ещё включаю автосохранение, чтобы по сто раз не нажимать ctrl + s после каждого действия. Для этого, в json файле написал: "files.autoSave": "afterDelay".
Красавчик
Спасибо за видео! А вот такой вопрос, как можно настроит работу на VS Code удаленном сервере используя компилятор SASS , чтобы получается файлы компилировались и передавались на удаленный сервер. Возможно ли такое?
Спасибо за очень доходчивый гайд! Не подскажите, как исправить такое внезапно возникшее в моём VS Code явление - раньше в коде css при наведении на квадратик с цветом (например, в color или background) появлялась палитра, при клике по её шапке цветовая модель менялась и продолжая кликать можно было переключать режимы и остановиться на нужном. А сейчас переключение происходит ( по клику) только на одну, следующую цветовую модель, но при этом окошко закрывается, и приходится всю процедуру заново проделывать, если на нужный режим не переключился (например в коде цвет в hsl, наводим на квадратик появляется окно с палитрой, кликаем по шапке, переключаемся на режим hwb и это окошко закрывается, а мне нужно, rgb). Заранее большое спасибо!
спасибо
❤
Подскажите пожалуйста как сделать так, чтобы автоматически переносились фигурные скобки на новые строки ? То есть чтобы { и } сами переносились каждая на новую строку а между ними уже писать код. Спасибо
в одном из уроков видел у вас плавную печать кода , можно название этого расширения?
В настройках VSCode: Cursor Smooth Caret Animation, установите значение на on.
спасибо@@wdm
Лучшее видео по настройке VS, информативно и полезно. Спасибо.
Подскажите , а как вернуть все настройки в исходное состояние? Особенно когда в коде меняются параметры?
Удалить или закомментировать settings.json
Prettier отличное расширение
Что делает?
@@AlekseyNaumov_734 форматирует код
Привет!
Подскажи пожалуйста, как убрать горизонтальную полоску для прокручивания страницы? Хочется чтобы текст не уходил бесконечно в правую сторону, а переносился вниз. Заранее спасибо!
Atl + Z
как сделать чтобы при развертывании тега вначале появлялся class а потом href ?
А как выделять текст курсором? Тоесть я имею ввиду то что что при зажатии на лкм у меня отдельно символы/строки не выделяются у меня выделяется только отдельно слово/предложение/текст от двойного нажатия на лкм
а есть плагин, который работает наоборот css Peek?
чтоб в css можно было кликнуть по классу и показало, в каких файлах он используется и можно было к нему перейти в html
Не открываются indetex.html и плагин css в отдельных окнах, подскажите, что делать? Плагины и html открываются водном окне, один, заменяет другого
а как настроить сноски? Когда текст большой вставляю он расползается в одну строчку
а как сделать чтоб он автоматически сносился на строку ниже ?
Можно вручную переключить на Alt + Z, можно настроить, чтобы всегда переносились строки в редакторе. В настройках VS Code найдите "word wrap" и включите данный параметр.
Подскажите пожалуйста? как быстро фрагмент кода оберуть в какой-то тег (не используя ctrl+x ctrl+v)
Привет, скажи у тебя стандартный Проводник в Windows или же какой-то плагин? Понравился))
Стандартный Windows + QTTabBar: ua-cam.com/video/xzz5nTioZI4/v-deo.html
Подскажите пожалуйста как вернуть нижнее голубое поле нечаянно убрал его думал лишнее)?
Здравствуйте. Данное поле в редакторе Visual Studio Code называется "Строка состояния". Убрать или вернуть строку состояния VSCode можно в главном меню программы Вид - Внешний вид - Строка состояния.
@@wdm спасибо большое)!👍