VS Code топ-10 плагины которые обязательно нужны. LiveServer, Html css support
HTML-код
- Опубликовано: 1 дек 2024
- Сегодня мы поговорим про VS code плагины самый популярный редактор кода. Visual Studio code не зря имеет такую популярность, так как плагины и расширения могут дать вам автоматизацию процесса и ускорение разработки в разы. VScode расширения обязательно нужны если вы собираетесь верстать html css сайты или работать с javascript. Я покажу топ 10 плагинов которые использую я и будут полезны и вам.
![Свежая НАСТРОЙКА VS CODE 2.0 [Расширения / Снипеты / Хоткеи]](http://i.ytimg.com/vi/_oKVkJj6C6Y/mqdefault.jpg)
![NLE Choppa - Or What ft. 41 (Orchestra Mix) [Official Music Video]](http://i.ytimg.com/vi/biOFASEgSOM/mqdefault.jpg)
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
Да, это копия другого комментария, но с тайм-кодами. (Если автор это читает, хорошо бы так делать в описании к видео)
Спасибо
Кто тогда смотреть будет)?
спасибо
автор и так много полезного бесплатного контента выкладывет. Было бы хорошо, если бы предложенные улучшения сделали сами предлагающие, таким образом экономя время автора.
Спасибо! Пользуюсь большинством этих плагинов.
Также в обиходе:
Code Spell Checker + Russian - Code Spell Checker - проверяет орфографию;
Highlight Matching Tag - подсвечивает парные теги;
Insert Tag - ставит тег при нажатии Shift+Enter
Вместо Prettier пользуюсь Beautify - тоже прекрасно работает
Тема - SynthWave '84, но без свечения
Список плагинов:
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 редактирует по дефолту
обзор на расширения для js тоже неплохо бы сделать
Если действительно интересно - я сделаю
@@SuprunAlexey да, сделай плз
@@SuprunAlexey Было-бы супер)
@@SuprunAlexey Интересно)
нехер обсуждать, хватит интерес подогревать, просто сделать это!
Есть ещё расширение Better Comments для выделения комментариев разными цветами внутри редактора. Image Preview - предварительный просмотр изображения в полях и при наведении на путь. Sass - использую для подсветки синтаксиса в файлах *.sass. Terminal - кнопочка в правом нижнем углу редактора для запуска терминала (ну мне так нравится). TabSpacer - конвертировать таб в пробелы и обратно.
Тоже неплохая подборочка, берите на заметку!
Очень полезное и познавательное видео, многие плагины максимально юзабельны и полезны, спасибо огромное вашему каналу!
привет я начинающий верстальщик и мне из всех каналов понравился твой очень понятный и без воды а у тебя есть обратная связь для советов лайк тебе за твой канал 10000000000000
indent-rainbow: это расширение окрашивает отступ перед текстом, чередуя четыре разных цвета на каждом шаге. При правильном форматирования кода, тело блоков видно краем глаза.
Круто!
Можно еще добавить:
Bookmarks - закладки
Comment Divider - разделение блоков комментариями
htmltagwrap - оборачивание блока тегами
Toggle Quotes - переключение двойных\одинарных кавычек
Toggle Quotes, не совсем понял как работает плагин Toggle Quotes, поясните пожалуйста
Врядли 10к наберется, но видео о плагинах для js записать и выложить надо 👍
Надеюсь наберёт
Path Autocomplete , чувак , вот что я искал, спасибо !
Лучший из лучших сделал лучший топ плагинов для VS CODE!
Дааа, спасибо!!
@@SuprunAlexey Честно, скажу мне очень понравился топ, очень мотивирует что-то делать, такими полезными видео :)
О, значит буду делать чаще
Обзор плагинов для JS тоже было бы круто увидеть. Спасибо за контент :)
Понял принял
Спасибо за обзор. Тоже юзаю VSCode. Жду обзор по js-плагинам
Спасибо! Обязательно будет! Вижу комментариев достаточно!
отдельное спасибо за лайф сервер, не понимал как его запустить!
Спасибо тебе за очень полезный ролик!! Очень помог с академией!!
Спасибо большое, очень полезная информация!
Всегда пожалуйста
спасибо большое нашёл то что искал, подписался👍
чувак, хочешь или не хочешь, а по js надо сделать видос) ps спасибо за контент)
Нет выбора 😄👍🏻
буду ждать расширения для JS 🤩
Спасибо, буду использовать!
эммет из каробки по умолчанию идёт !
а для js сделай обзор ! ))
Да, я так и сказал
не знаю у меня не было по умолчанию...
Отличный Топ. Жду такой же топ но по JS
Спасибо! По js надо делать😇
Спасибо большое! Это точно пригодится)
Спасибо вам большое, вы сэкономили мне 1000 руб
Видеообзор по плагинам для JS очень нужен, спасибо)
Он уже есть на канале
Всё получилось!!!! Спасибо. Удачи!
Это круто!
bracket pair colorizer вышел версии 2, он более легкий (для раскраски скобок плагин)
Очень хороший плагин
Для js тоже полезно будет! И списочек в описании не помешает)
Обязательно😇👌🏻
Как настроить такое отображение стилей для класса, как у вас в идео?
Оборачивание не стандартной табуляцией а такой неприрывной линией с подчеркиванием класса.
Возможно плохо объяснил. Извиняюсь)
Крутой обзор, огромное спасибо за контент!
Lorem ipsum же в Emmet по умолчанию стоит + мультикурсор можно создавать с помощью зажатия колёсика мыши
Привет. Подскажите, пожалуйста, как так быстро в CSS прописали класс .content ? На видео время 2:32
это переход, вручную пишется.
Спасибо. Стряпаю сайт и захотел сделать разметку красивой, а вместо одного плагина, поставил еще несколько.
Круто!
спасибо за то что вы делаете
Радуют такие комменты!
👍🏼👍🏼👍🏼
Img placeholder, gitlens, bookmarks, json sort, regexp test. А так ещё live server юзелесс из-за того что каждый номинальный сборщик имеет live server из коробки как правило
От части да
На счёт json sort это который json stable sort или простой json плагин?
@@Bridg_Islam хз он по моему называется просто json sort
скажите, какое есть расширение vscode для автоопределения кодировки?
или есть команда?
а то устал менять кодировку с utf-8 на кириллицу 1251 в одних файлах и наоборот в других
Для JS было бы не плохо. Вообще все можешь показать. Каждый выберет что нужно будет
а что делать если программа не хочет понимать что такое style.css? Чтобы я не делал....
На Винде, я пользовался Notepad++, на Маке - Atom и VS Code
Какие плагины использовать в VSC для работы с Bootstrap, SASS?
Здравствуйте,в Visual Studio с Tab и c Enter не включается Doctype, хотя как говорите , он автоматически должен работать, что делать?
Помогите решить проблему.
Установил VSC и дополнительное расширение Code Runner.
При запуске любого скрипта, даже самого простого по типу console.log('Hello') или 1 + 1, в OUTPUT
выскакивает следующее сообщение:
[Running] node "c:\путь до скрипта\имя скрипта.js"
"node" ?? ????? ????? и ещё куча знаков вопроса в квадратиках и ромбиках.
[Done] exited with code=1 in 0.102 seconds
Сам скрипт, соответственно, не выполняется. Как это исправить?
lorem это фишка эммета(по крайней мере в саблайме так) для него плагин отдельный не нужен
Спасибо!
Спасибо огромное.
css peek через раз работает, в чем может быть причина?
И scss должен сохранятся в маленьком окошке?
спасибо, помог, лайк
Плагин для форматирования кода - очень полезная штука. Но вот в чем загвоздка. Как не искал я, так и не нашел решения с удалением пробелов и пустых строк. Может кто подскажет плагин, который не только форматирует код, но и удаляет лишние пробелы, в том числе и пустые строки?
А prettier разве не удаляет?
@@SuprunAlexey , нет. Код форматируется, но пустые строки остаются. Это даже на вашем видео заметно. После форматирования осталась пустая строка.
Попробуйте в настройках редактора ввести "Trim Trailing Whitespace" и поставить галочку на этом пункте в выдаче поиска.
Спасибо за Live Server!
Все для вас!
Жду видео про тор 10 плагинов для js
Сделаю!
Дорогие начинающие разработчики, вдруг Вам понравилось видео, предлагаю так же больше коротких видео именно для начинающих на канале реальное программирование!)
Конечно интересно давай по JS плагины!!
Сейчас пользуетесь этим редактором?
У меня Emmet из коробки в css не поддерживает сокращения m (margin), bg+ (background) и тд. мне сказали что нужно самому руками прописывать, нужны сниппеты
Loren ipsun есть в emmet. Отдельно можно не ставить
Как сделать что бы в vs code все ошибки выделялись, как в webStorm, что бы не приходилось глазами искать, когда в одной букве очепятался и "clas" вместо "class" написал, нпример ?
Sublime чтобы что-то быстро накидать и затестить.
Здравствуйте, я только начинаю учиться 📚 подскажите пожалуйста как скопировать и вставить один и тот же класс в одном коде.. я просто скопировала вставила, но в CSS не обновилось, не хочу снова перепечатывать
Спасибо за видео !!
Всегда пожалуйста 🙏🏻
Спасибо
Пробую VScode, достали тупняки Atom'а. Голосую за видео для js расширений.
Среди перечисленных плагинов я не нашёл ни одного, который бы ни был установлен по умолчанию в WEBStorm/PHPStorm.
НО! ВИдео про плагины JS жду
Будет 👍🏻
это намек, что storm лучше чем vscode?
Ctrl+Shift+/ - что это? Или как быстро поставить комментарий? Я этого нажиму но не работает, подскажите пожалуйста
Было бы не плохо про js плагины )
Приму к сведению
Подскажите, пожалуйста, комбинацию клавиш, что бы выделенный текст заключить в тег. Заранее спасибо !
В файле :\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у Дружище, спасибо тебе огромное ! Прям аж должным себя чувствую)
thank you!
Prettier не работает. чекнул format on save. никак не хочет форматировать. Есть у кого-то идеи, как его заставить работать?
можешь попробовать другой похожий плагин Beautify мейби поможет.
Устанавливаю Live Server, но ничего не появляется, ни значка в строке состояния, ни в контекстном меню. Смотрю уже третье видео по этой теме и у всех появляется сразу после установки. Всю голову сломал. Может кто чего подскажет? пысы: устанавливал на двух системах- мак ос и виндоус. Результат один и тот же.
А как сделать так, чтобы код форматировался во время сохранения? Это касается scss и html?
6:11 ctrl+a alt+shift+f так я думаю проще будет если наловчиться это делать
cool)
отличный видос
Спасибо! Будем продолжать!
Вопрос: как настроить CSS Peek так что бы он показывал путь не в css папки в sass?
Спасибо за видео! Подскажите, пожалуйста, каким образом убрать папки из VS code. При открытии папки с рабочего стола, я случайно загрузил все . Теперь в графе ПРОВОДНИК есть строка DESKTOP со всеми папками с рабочего стола. Спасибо.
Открой проект заново
@@SuprunAlexey Спасибо, но я открыл редактор и desktop, а ничего не изменилось. А какой проект? У меня там только много папок.
У меня prettier перестал работать в html, даже в окне поиска через ctrl+shift+p его нет. Как это исправить, подскажите пожалуйста?
alt+shift+f
То что нужно. Спасибо за видео. :)
не работаеть ctr+shift+p на prettier code formatter что делат ?
авто pep 8 для python топчег!
возможно
у меня автоматический включается/загружается другой браузер можете подсказать как настроит google chrome заранее говорю она у меня и так по умолчанию стоить
Live Server установил,а загружается в браузере вместо рабочего окна VS Code,кто знает почему?
чего же в комментарии не указал список плагинов? :) так было проще для зрителя
Как настроить цветной синтаксис?
Syntax highlighting
Web Developer Blog благодарю !
Следующий шаг перейти с VS Code на WebStorm ;)
Не все хотят за него платить
webStorm, обьективно проигрывает в скорости работы, на быстрые хорошие компы он станет норм, но допустим если у тебя нет SSD, ты будешь уходить пить кофе пока он загружается
@@ArthurYelkin В этом в некоторой степени согласен. На медленном компе притормаживающе работающий WebStorm и VS Code с недостачей качественно сделанного функционала имеющегося в WebStorm будут где-то на одном уровне. Но если при этом не иметь опыта работы с WebStorm, то будет казаться пределом совершенства ) . Я поэтому и сказал, что... "следующий шаг", к нему же в таком случае можно приплюсовать и переход на профессиональный программерский компьютер аля MacBook Pro.
@@SuprunAlexey юзаем eap версию (у меня шторм, но суть дела не меняет)...на linux ставлю с помошью snap и вообще не парюсь....легально и бесплатно..
проблема что css peеk не показывает стили в sass ФАЙЛАХ? ТАК КАК ОНИ НАПРЯМУЮ НЕ СВЯЗАНЫ С HTML ФАЙЛАМИ, а в st3 есть этот плагин prntscr.com/pe2gos пока не придумают что-то подобное на VC смысл на него переходить верстальщикам?
А как убрать волнистое нижнее подчеркивание текста?
Здравствуйте. подскажите как добавить Фреймворк к проекту. с гитхаба можно скачать но не могу подключить. github.com/jeecrypt/JeeUI2
раздает один добрый человек
а как подцепить не сказал. ruclips.net/video/T-nEEoDAQTk/видео.html
в редакторе ругается на incude JeeUI2.h
сама программа VC CODE установлена на дик С: другие файлы мной созданные в Ардуино ИДЕ лежат на диске D: все файлы из под VC ругаются на include .....
Подскажите можно это исправить ?
+ за JS
Жду видео
Beautify ещё норм расширение
thank u :)
vscode из коробки умеет в lorem{number} ( emmet умеет )
Учтём
Emmet и lorem ipsum уже встроены в редактор.
Об этом говорил
так шо получается скрипач не нужен? В смысле gulp и прочее
Смотря для каких целей
@@SuprunAlexey если использовать vs для верстки, я в принципе gulp только и юзал из за комилляции less и livereload, ну и все сторонние библиотеки собирал в одном файле
Почему у меня после установки не отображается Live Server?
Перезагрузи программу
Неужели тебе не знать про Path Autocomplete и Lorem Ipsum что они встроены?
Давай плагины для js фреймворков)
Live server запускается но не работает(не вижу нигде окна)
Лайк и подписка )))
Как называется плагин с эконками?
Что делать если при создании в ларавел бд ошибка с 665 строчкой, windows мучаюсь уже не первый час((
Stackoverflow в помощь 🙏🏻
@@SuprunAlexey так нет информации вообще, а если и есть, то все юзают иксамп + линукс(