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