ТОП 10 плагинов в VS Code для верстальщика / Мои расширения для Visual Studio Code

В этом видео я покажу вам свой список плагинов для VS Code. Подробно расскажу о каждом расширении для Visual Studio Code, которые использую при вёрстке в данном редакторе кода.

В данном видео я отвечу на следующие вопросы:
► Как ускорить написание кода с помощью сокращений в vscode?
► Какая тема у меня установлена в vs code?
► Как быстро скопировать классы из html кода в css?
► Как включить автообновление страницы при любом изменении в visual studio code?
► Как переименовать открывающий и закрывающий теги одновременно?
► Как не запутаться где и какой тег закрывается в коде?

✅ Также на канале выходит серия видеороликов по верстке и программированию адаптивного макета Velocity с самого нуля с подробными объяснениями, вот ссылка на плейлист:

Ищи школу WEB PRO в соц. сетях:

Таймкоды:
00:00 По каким критериям я разместил места в топе?
01:00 Где находятся расширения?
01:18 Первое расширение, которое я всегда устанавливаю, - Russian Language Pack for Visual Studio Code
01:42 Emmet - предустановленное расширение, которое позволяет писать код в виде сокращений, что сильно ускоряет вёрстку
02:40 Auto Complete Tag - пакет расширений, включающий в себя сразу 2 расширения Auto Close Tag и Auto Rename Tag
03:20 Auto Close Tag - при написании открывающего тега автоматически дописывает закрывающий тег
03:50 Auto Rename Tag - при переименовании открывающего тега автоматически переименовывается закрывающий тег
04:52 Показываю работу плагина Emmet. Как можно ускорить верстку с помощью расширения Emmet
06:35 Live Server - позволяет автоматически обновлять страницу при каждом изменении кода. Демонстрация работы плагина. Как запустить локальный сервер на компьютере с помощью Live Server в редакторе кода Visual Studio Code? Что делать, если не открывается вкладка в браузере при запуске Live Server?
10:01 indent-rainbow - подсвечивает отступы (пробелы и табы) при написании кода
11:22 eCSStractor for VSCode - копирует все классы из выделенного фрагмента кода в html и переводит их в готовые селекторы для css файла. Как быстро перенести все классы из html в css?
15:04 Bracket Pair Colorizer - включает подсветку для открывающихся и закрывающихся скобок в css и js
16:09 Ayu - моя тема для visual studio code
16:55 Material Icon Theme - пак иконок для vs code
17:30 Невошедшие в мой топ расширения. Плагины, которые я использую очень редко
17:50 Code Runner - позволяет запускать javascript код в редакторе кода VS Code
18:29 CSS Peek - предпросмотр стилей css при наведении на класс внутри html кода
19:20 HTML End Tag Labels - у закрывающих тегов показывает селекторы по классу и id, чтобы можно было понять какой конкретно тег закрывается
20:08 Prettier Code formatter - позволяет отформатировать небрежный код в прилежный и удобный для чтения
21:21 Когда следующее видео?

Начни путь веб-разработчика уже сегодня! 👨‍💻
С вами был Никита Щегольков, школа веб-разработки Веб Про. Увидимся! 🙋‍♂️

Данные видеоуроки были бы интересны всем, кто ищет: верстка сайта с нуля, extensions for vs code, расширения для vs code, плагины для редактора кода.
#vscode #webpro #вебпро #расширенияvscode #редакторкода #visualstudiocode #emmet #ecsstractor #liveserver #расширениядляредакторакода #плагиныvscode #плагиныдляредакторакода #extensionsforvscode #web

[WebProSchool]

🚀Освой профессию "Веб-разработчик" вместе со школой WEB PRO. Обучение включает в себя теоретические и практические уроки, домашние задания, тестирование и обратную связь от куратора.
Получить первый урок можно по ссылке ниже:

[Pereguda]

Как ловко у вас получается все быстро делать в VS Code! Было бы здорово посмотреть ваши приемы ускорения верстки и работы. Тем более, что вы сами предложили :-) Буду ждать.

[EuroDJ]

ну и как решить проблему с вставкой пустых строк при использовании eCSStractor ? если в двух словах без отдельного видоса? )

[kerusdc]

скажите, какое есть расширение vscode для автоопределения кодировки?
или есть команда?
а то устал менять кодировку с utf-8 на кириллицу 1251 в одних файлах и наоборот в других

[SergeyGrodetskiy]

На 3:41 вы говорите, что по умолчанию нет авто закрытия тега, вот вы как преподаватель, зачем людей вводите в заблуждение, теги замечательно закрываются и без этого вашего плагина силами уже предустановленного плагина emmet другими словами просто из коробки т.е. практически по умолчанию.