VS Code топ-10 плагины которые обязательно нужны. LiveServer, Html css support
HTML-код
- Опубликовано: 2 дек 2024
- Сегодня мы поговорим про VS code плагины самый популярный редактор кода. Visual Studio code не зря имеет такую популярность, так как плагины и расширения могут дать вам автоматизацию процесса и ускорение разработки в разы. VScode расширения обязательно нужны если вы собираетесь верстать html css сайты или работать с javascript. Я покажу топ 10 плагинов которые использую я и будут полезны и вам.
Emmet - уже встроенный в редактор 1:14
Material Theme
2:58
Live Server
3:31
CSS Peek
4:26
Bracket Pair Colorizer
5:14
Prettier
5:34
Auto Rename Tag
6:18
Path Autocomplete - устарел (есть в Emmet)
6:37
Lorem Ipsum - устарел (есть в Emmet)
7:18
HTML CSS Support 7:58
Да, это копия другого комментария, но с тайм-кодами. (Если автор это читает, хорошо бы так делать в описании к видео)
Спасибо
Кто тогда смотреть будет)?
спасибо
автор и так много полезного бесплатного контента выкладывет. Было бы хорошо, если бы предложенные улучшения сделали сами предлагающие, таким образом экономя время автора.
Список плагинов:
Emmet - уже встроенный в редактор
Material Theme
Live Server
CSS Peek
Bracket Pair Colorizer
Prettier
Auto Rename Tag
Path Autocomplete - устарел (есть в Emmet)
Lorem Ipsum - устарел (есть в Emmet)
HTML CSS Support
Полезно
"Path Autocomplete" есть в VS code
@@prog3522 точно! У самого он уже давно не стоит)
Prettier - VS сам может форматить
@@ivandubrovnyi7591 в Prettier можно настроить под себя, а VS редактирует по дефолту
Спасибо! Пользуюсь большинством этих плагинов.
Также в обиходе:
Code Spell Checker + Russian - Code Spell Checker - проверяет орфографию;
Highlight Matching Tag - подсвечивает парные теги;
Insert Tag - ставит тег при нажатии Shift+Enter
Вместо Prettier пользуюсь Beautify - тоже прекрасно работает
Тема - SynthWave '84, но без свечения
Очень полезное и познавательное видео, многие плагины максимально юзабельны и полезны, спасибо огромное вашему каналу!
привет я начинающий верстальщик и мне из всех каналов понравился твой очень понятный и без воды а у тебя есть обратная связь для советов лайк тебе за твой канал 10000000000000
Есть ещё расширение Better Comments для выделения комментариев разными цветами внутри редактора. Image Preview - предварительный просмотр изображения в полях и при наведении на путь. Sass - использую для подсветки синтаксиса в файлах *.sass. Terminal - кнопочка в правом нижнем углу редактора для запуска терминала (ну мне так нравится). TabSpacer - конвертировать таб в пробелы и обратно.
Тоже неплохая подборочка, берите на заметку!
обзор на расширения для js тоже неплохо бы сделать
Если действительно интересно - я сделаю
@@SuprunAlexey да, сделай плз
@@SuprunAlexey Было-бы супер)
@@SuprunAlexey Интересно)
нехер обсуждать, хватит интерес подогревать, просто сделать это!
Path Autocomplete , чувак , вот что я искал, спасибо !
отдельное спасибо за лайф сервер, не понимал как его запустить!
Лучший из лучших сделал лучший топ плагинов для VS CODE!
Дааа, спасибо!!
@@SuprunAlexey Честно, скажу мне очень понравился топ, очень мотивирует что-то делать, такими полезными видео :)
О, значит буду делать чаще
Отличный Топ. Жду такой же топ но по JS
Спасибо! По js надо делать😇
Спасибо большое, очень полезная информация!
Всегда пожалуйста
Можно еще добавить:
Bookmarks - закладки
Comment Divider - разделение блоков комментариями
htmltagwrap - оборачивание блока тегами
Toggle Quotes - переключение двойных\одинарных кавычек
Toggle Quotes, не совсем понял как работает плагин Toggle Quotes, поясните пожалуйста
буду ждать расширения для JS 🤩
indent-rainbow: это расширение окрашивает отступ перед текстом, чередуя четыре разных цвета на каждом шаге. При правильном форматирования кода, тело блоков видно краем глаза.
Круто!
Спасибо тебе за очень полезный ролик!! Очень помог с академией!!
Спасибо вам большое, вы сэкономили мне 1000 руб
спасибо большое нашёл то что искал, подписался👍
Врядли 10к наберется, но видео о плагинах для js записать и выложить надо 👍
Надеюсь наберёт
Спасибо за обзор. Тоже юзаю VSCode. Жду обзор по js-плагинам
Спасибо! Обязательно будет! Вижу комментариев достаточно!
Спасибо, буду использовать!
Спасибо. Стряпаю сайт и захотел сделать разметку красивой, а вместо одного плагина, поставил еще несколько.
Круто!
Обзор плагинов для JS тоже было бы круто увидеть. Спасибо за контент :)
Понял принял
Всё получилось!!!! Спасибо. Удачи!
Это круто!
чувак, хочешь или не хочешь, а по js надо сделать видос) ps спасибо за контент)
Нет выбора 😄👍🏻
Видеообзор по плагинам для JS очень нужен, спасибо)
Он уже есть на канале
Спасибо большое! Это точно пригодится)
Помогите решить проблему.
Установил VSC и дополнительное расширение Code Runner.
При запуске любого скрипта, даже самого простого по типу console.log('Hello') или 1 + 1, в OUTPUT
выскакивает следующее сообщение:
[Running] node "c:\путь до скрипта\имя скрипта.js"
"node" ?? ????? ????? и ещё куча знаков вопроса в квадратиках и ромбиках.
[Done] exited with code=1 in 0.102 seconds
Сам скрипт, соответственно, не выполняется. Как это исправить?
Здравствуйте,в Visual Studio с Tab и c Enter не включается Doctype, хотя как говорите , он автоматически должен работать, что делать?
Как настроить такое отображение стилей для класса, как у вас в идео?
Оборачивание не стандартной табуляцией а такой неприрывной линией с подчеркиванием класса.
Возможно плохо объяснил. Извиняюсь)
Привет. Подскажите, пожалуйста, как так быстро в CSS прописали класс .content ? На видео время 2:32
это переход, вручную пишется.
а что делать если программа не хочет понимать что такое style.css? Чтобы я не делал....
Крутой обзор, огромное спасибо за контент!
скажите, какое есть расширение vscode для автоопределения кодировки?
или есть команда?
а то устал менять кодировку с utf-8 на кириллицу 1251 в одних файлах и наоборот в других
Для js тоже полезно будет! И списочек в описании не помешает)
Обязательно😇👌🏻
На Винде, я пользовался Notepad++, на Маке - Atom и VS Code
Какие плагины использовать в VSC для работы с Bootstrap, SASS?
Здравствуйте. подскажите как добавить Фреймворк к проекту. с гитхаба можно скачать но не могу подключить. github.com/jeecrypt/JeeUI2
раздает один добрый человек
а как подцепить не сказал. ruclips.net/video/T-nEEoDAQTk/видео.html
в редакторе ругается на incude JeeUI2.h
сама программа VC CODE установлена на дик С: другие файлы мной созданные в Ардуино ИДЕ лежат на диске D: все файлы из под VC ругаются на include .....
Подскажите можно это исправить ?
спасибо за то что вы делаете
Радуют такие комменты!
Здравствуйте, я только начинаю учиться 📚 подскажите пожалуйста как скопировать и вставить один и тот же класс в одном коде.. я просто скопировала вставила, но в CSS не обновилось, не хочу снова перепечатывать
Lorem ipsum же в Emmet по умолчанию стоит + мультикурсор можно создавать с помощью зажатия колёсика мыши
bracket pair colorizer вышел версии 2, он более легкий (для раскраски скобок плагин)
Очень хороший плагин
Пробую VScode, достали тупняки Atom'а. Голосую за видео для js расширений.
У меня Emmet из коробки в css не поддерживает сокращения m (margin), bg+ (background) и тд. мне сказали что нужно самому руками прописывать, нужны сниппеты
Сейчас пользуетесь этим редактором?
Ctrl+Shift+/ - что это? Или как быстро поставить комментарий? Я этого нажиму но не работает, подскажите пожалуйста
проблема что css peеk не показывает стили в sass ФАЙЛАХ? ТАК КАК ОНИ НАПРЯМУЮ НЕ СВЯЗАНЫ С HTML ФАЙЛАМИ, а в st3 есть этот плагин prntscr.com/pe2gos пока не придумают что-то подобное на VC смысл на него переходить верстальщикам?
Loren ipsun есть в emmet. Отдельно можно не ставить
Как сделать что бы в vs code все ошибки выделялись, как в webStorm, что бы не приходилось глазами искать, когда в одной букве очепятался и "clas" вместо "class" написал, нпример ?
lorem это фишка эммета(по крайней мере в саблайме так) для него плагин отдельный не нужен
авто pep 8 для python топчег!
возможно
Для JS было бы не плохо. Вообще все можешь показать. Каждый выберет что нужно будет
Спасибо за Live Server!
Все для вас!
Конечно интересно давай по JS плагины!!
не работаеть ctr+shift+p на prettier code formatter что делат ?
у меня автоматический включается/загружается другой браузер можете подсказать как настроит google chrome заранее говорю она у меня и так по умолчанию стоить
эммет из каробки по умолчанию идёт !
а для js сделай обзор ! ))
Да, я так и сказал
не знаю у меня не было по умолчанию...
Дорогие начинающие разработчики, вдруг Вам понравилось видео, предлагаю так же больше коротких видео именно для начинающих на канале реальное программирование!)
Устанавливаю Live Server, но ничего не появляется, ни значка в строке состояния, ни в контекстном меню. Смотрю уже третье видео по этой теме и у всех появляется сразу после установки. Всю голову сломал. Может кто чего подскажет? пысы: устанавливал на двух системах- мак ос и виндоус. Результат один и тот же.
6:11 ctrl+a alt+shift+f так я думаю проще будет если наловчиться это делать
Prettier не работает. чекнул format on save. никак не хочет форматировать. Есть у кого-то идеи, как его заставить работать?
можешь попробовать другой похожий плагин Beautify мейби поможет.
Live Server установил,а загружается в браузере вместо рабочего окна VS Code,кто знает почему?
Img placeholder, gitlens, bookmarks, json sort, regexp test. А так ещё live server юзелесс из-за того что каждый номинальный сборщик имеет live server из коробки как правило
От части да
На счёт json sort это который json stable sort или простой json плагин?
@@Bridg_Islam хз он по моему называется просто json sort
Sublime чтобы что-то быстро накидать и затестить.
А как сделать так, чтобы код форматировался во время сохранения? Это касается scss и html?
👍🏼👍🏼👍🏼
спасибо, помог, лайк
А как убрать волнистое нижнее подчеркивание текста?
Спасибо огромное.
css peek через раз работает, в чем может быть причина?
И scss должен сохранятся в маленьком окошке?
Beautify ещё норм расширение
Вопрос: как настроить CSS Peek так что бы он показывал путь не в css папки в sass?
Плагин для форматирования кода - очень полезная штука. Но вот в чем загвоздка. Как не искал я, так и не нашел решения с удалением пробелов и пустых строк. Может кто подскажет плагин, который не только форматирует код, но и удаляет лишние пробелы, в том числе и пустые строки?
А prettier разве не удаляет?
@@SuprunAlexey , нет. Код форматируется, но пустые строки остаются. Это даже на вашем видео заметно. После форматирования осталась пустая строка.
Попробуйте в настройках редактора ввести "Trim Trailing Whitespace" и поставить галочку на этом пункте в выдаче поиска.
Как называется плагин с эконками?
Как настроить цветной синтаксис?
Syntax highlighting
Web Developer Blog благодарю !
Live server запускается но не работает(не вижу нигде окна)
То что нужно. Спасибо за видео. :)
Подскажите, пожалуйста, комбинацию клавиш, что бы выделенный текст заключить в тег. Заранее спасибо !
В файле :\Users\\AppData\Roaming\Code\User\keybindings.json пропиши: { "key": "ctrl+alt+enter", "command": "editor.emmet.action.wrapIndividualLinesWithAbbreviation", "when": "editorTextFocus" }
и будет счастье
@@Записи-л7у в этой папке нет такого файла, я его создал и прописал строку , ничего не работает :(
@@Записи-л7у Потом записал эту строку в файл key binds, который вызвал через палитру команд (Ctrl + Shift + P), и теперь при комбинации "ctrl+alt+enter" мне предлагают добавить аббревиатуру ....
@@ivarsverson4116 Привет. Записал видео для тебя: ruclips.net/video/5UmsiLPB_KE/видео.html извини за звук, там робот-пылесос мешал, приходилось перекрикивать.
@@Записи-л7у Дружище, спасибо тебе огромное ! Прям аж должным себя чувствую)
Жду видео про тор 10 плагинов для js
Сделаю!
+ за JS
Жду видео
У меня prettier перестал работать в html, даже в окне поиска через ctrl+shift+p его нет. Как это исправить, подскажите пожалуйста?
alt+shift+f
отличный видос
Спасибо! Будем продолжать!
Спасибо за видео !!
Всегда пожалуйста 🙏🏻
Среди перечисленных плагинов я не нашёл ни одного, который бы ни был установлен по умолчанию в WEBStorm/PHPStorm.
НО! ВИдео про плагины JS жду
Будет 👍🏻
это намек, что storm лучше чем vscode?
Было бы не плохо про js плагины )
Приму к сведению
ни как не хочет работать форматирование шрифта :(
Про js плагины очень надо
Спасибо
Спасибо!
Почему у меня после установки не отображается Live Server?
Перезагрузи программу
Спасибо за видео! Подскажите, пожалуйста, каким образом убрать папки из VS code. При открытии папки с рабочего стола, я случайно загрузил все . Теперь в графе ПРОВОДНИК есть строка DESKTOP со всеми папками с рабочего стола. Спасибо.
Открой проект заново
@@SuprunAlexey Спасибо, но я открыл редактор и desktop, а ничего не изменилось. А какой проект? У меня там только много папок.
блин а у меня что то css peek не работает
Полезная инфа начинается с 1:20
vscode из коробки умеет в lorem{number} ( emmet умеет )
Учтём
Следующий шаг перейти с VS Code на WebStorm ;)
Не все хотят за него платить
webStorm, обьективно проигрывает в скорости работы, на быстрые хорошие компы он станет норм, но допустим если у тебя нет SSD, ты будешь уходить пить кофе пока он загружается
@@ArthurYelkin В этом в некоторой степени согласен. На медленном компе притормаживающе работающий WebStorm и VS Code с недостачей качественно сделанного функционала имеющегося в WebStorm будут где-то на одном уровне. Но если при этом не иметь опыта работы с WebStorm, то будет казаться пределом совершенства ) . Я поэтому и сказал, что... "следующий шаг", к нему же в таком случае можно приплюсовать и переход на профессиональный программерский компьютер аля MacBook Pro.
@@SuprunAlexey юзаем eap версию (у меня шторм, но суть дела не меняет)...на linux ставлю с помошью snap и вообще не парюсь....легально и бесплатно..
Где на компе найти эту скобку {}. ?
thank you!
Давай плагины для js фреймворков)
В 2010 когда я верстал Lorem Ipsum у меня был в текстовом файле xD
Были времена)
@@SuprunAlexey я тогда забросил это все. Сейчас учусь всему заново. Спасибо за видео!
Emmet и lorem ipsum уже встроены в редактор.
Об этом говорил
Лайк и подписка )))