ТОП 16 Плагинов для VS Code в 2020 (VS Code Extensions)
HTML-код
- Опубликовано: 4 авг 2024
- #YauhenK #webDev #VSCode
Всем привет, я Евгений Ковальчук и вы на канале webDev.
В этом видео я бы хотел поделиться с вами подборкой плагинов обязательных для установки в VS Code.
✒ Timeline:
✔ 0:00 - Введение
✔ 0:23 - Quokka
✔ 0:58 - Git Lens
✔ 1:43 - Version Lens
✔ 2:34 - Import Cost
✔ 3:15 - Babel JavaScript
✔ 3:54 - TODO Highlight
✔ 4:24 - Indent Rainbow
✔ 4:44 - Bracket Pair Colorizer
✔ 5:10 - Prittier
✔ 5:58 - JavaScript Code Snippets
✔ 7:18 - ES7 React/Redux/GraphQL/React-Native Snippets
✔ 8:39 - Vue2 Snippets | Angular Snippets
✔ 8:54 - Auto Rename Tag
✔ 9:35 - Lorem ipsum
✔ 10:17 - Live Server
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
![MURDER DRONES Series Finale [TRAILER]](http://i.ytimg.com/vi/p6mhC5Iatns/mqdefault.jpg)
✒ Timeline:
✔ 0:23 - Quokka
✔ 0:58 - Git Lens
✔ 2:47 - Version Lens
✔ 3:38 - Import Cost
✔ 4:20 - Babel JavaScript
✔ 4:58 - TODO Highlight
✔ 5:26 - Indent Rainbow
✔ 5:46 - Bracket Pair Colorizer
✔ 6:13 - Prittier
✔ 7:01 - JavaScript Code Snippets
✔ 8:21 - ES7 React/Redux/GraphQL/React-Native Snippets
✔ 9:42 - Vue2 Snippets | Angular Snippets
✔ 9:57 - Auto Rename Tag
✔ 10:38 - Lorem ipsum
✔ 11:20 - Live Server
Prettier*
Привет!
Есть ли такой же список, но для WebStorm?
К Quokka так же Wallaby нужно добавить
@@andreyzhukov2821 там половина есть по дефольу, чего нет по дефолту есть плагины
Да, ошибка и в описании видео и тут 6:13 Prettier
очень топ!
Первый раз вижу подборку из которой я установил почти все расширения👍
Юзаю так же ещё:
1. Settings Sync (Перенос настроек через облако, если ты работаешь на нескольких машинах или местах) .
2. htmltagwrap (по написанию когда даёт возможность оборачивать нужный фрагмент в тег-контаенер (div, p и т.д.)) .
3. Git History Diff (альтернатива работы с Git , что в понятной форме позволяет отслеживать изменения что были добавлены в ходе работы над проектом ).
4. Code Spell Checker ( указывает на ошибки в слове что было написано на англ языке).
Первое расширение уже реализовано нативно в вскоде
@@akionka можно подробней? можно удалять расширение? как из коробки сделать?
@@dimanazdratenko в 1.44 добавили как превью версию code.visualstudio.com/updates/v1_44#_settings-sync а в 1.46 (инсайдерс) работает вроде нормально уже
htmltagwrap - реализовано в стандартном эмите (необходимо лишь назначить хоткей)
Александр Марченко Спасибо, чекну сейчас)
Отличное видео и не менее полезные комментарии под ним!
Спасибо
я наконецто нашел то что надо! лайк и подписка
Спасибо
Спасибо большое!
Пожалуйста
Спасибо автору, добавил себе пару плагинов, я только недавно начал погружаться в мир веба, потому был приятно удивлен.
Пожалуйста
Приятно звучишь. Музыка не слишком громко. Нравится
Спасибо
@@YauhenKavalchuk да, тоже хотел написать - хорошая манера подачи, спокойно и последовательно...
Хотелось бы также упомянуть SCSS IntelliSense - плагин, выводящий подсказки для scss перменных (функций, миксинов и тд.)
Sublime one love
Тоже с него начинал)
Спасибо! Жень подскажи пожалуйста а есть ли плагин для разработки на js который делает авто импорт, как тогда когда ты пишешь на ангуларе? Или может вебпак нужно настроить как-то?
Нет, такой к сожалению, не подскажу(
в WebStorm это нативно реализовано
Про Git Lens добавлю, что он и с gitlab тоже работает и еще в нем есть удобная фича - file history - по коммитам относящимся к этому файлу можно пробежаться и посмотреть что было изменено.
скажите, какое есть расширение vscode для автоопределения кодировки?
или есть команда?
а то устал менять кодировку с utf-8 на кириллицу 1251 в одних файлах и наоборот в других
Привет, сними видео об крутых возможностях в vscode. Например я недавно для себя открыл такое, как:
- workspaces: позволяет обеднить несколько проектов в одно пространство оп которому можно делать поиск, удобно запускать\перезапускать сервисы. (при роботе с микро сервисами незаменимая вещь) и много другого...
- vs code tasks: это вообще пушка фича. Например мне нужно обновить пакет, а потом сделать yarn upgrade во всех сервисах которые его используют. Не беда написал скрипт, создал таску, прибил ее к комбинации кнопок и все. Теперь трачу 5 секунд пока все обновиться вместо 5 минут брожения по сервисам
Там есть ещё много крутых штук о которых многие не знают или сложно разобраться
Спасибо за идею, можно подумать)
Кто знает, как настроить нормальный поиск как в webstorm? Что бы при наведении списка результатов показывало кусок кода вокруг.
В VS Code можно вставлять lorem написав lipsum. Можно еще добавить количество слов, если необходимо, например: lipsum15 сгенерирует текст из 15 слов
Да, уже в курсе)
может наоборот? у меня работает не lipsum15 , а lorem15 ... или они что-то поменяли? )
@@EuroDJ мог ошибиться. Возможно, с WS перепутал. Спасибо за исправление.
про Version Lens - у меня без него в package json курсор наводишь на библиотеку и там пишет какая доступна последняя версия.
👍
Numbered Bookmarks - делает нумерные закладки
Markdown Preview Enhanced - превью для md файлов
Live Share - вроде бы удаленно можно управлять кодом, не проверял
Lorem из коробки работает через emmet
Точняк, emmet проверил, а lorem забыл)
сейчас можно просто лорем написать + цифру и он сработает) А так многие плагины давно искал , спасибо!
Можете сделать видео про Фриланс? Думаю всем будет полезно. Например что учить новичку, что куда.))
Подобные видео можно найти на канале в плейлисте frontreview
Так же сюда добавил бы плагин Auto import. Экономит немало времени.
У меня Quokka почему-то не работает. Может быть это другие установленные плагины мешают?
Возможно
У меня nfm не работает по умолчанию в JavaScript (ES6) code snippets. Нужно отдельно сокращение создавать это?
Да нет. Возможно ваши локальные настройки что-то блочат. Все сокращения описаны в доке плагина
@@YauhenKavalchuk nfn нужно. Видео несколько раз пересматривал, но там очень быстро и не видно текст.
Сорри что сюда, НО Ребят проблема в VS Code... не появляется выпадающий список например при background: url(' ') со списком папок и файлов на компе... при том в href=" " он появляется... при том на рабочей машине такой проблемы нет.. все выпадает... переустановка проблему не решила.... куда рыть?
Решил проблему с выпадающим списком? В чем была проблема?
Скажите плагин или другие советы, как быстро автоисправлять ошибки или лишние пробелы в коде?
Плагин prettier
Как альтернатива запуска Prettier по сохранению, можно нажимать ALT + Shift + F (Win) для форматирования кода открытого файла
Спасибо за подсказку
как называется плагин с Цветными отступами для vs code? спасибо заранее
Indent Rainbow
Помогите, пожалуйста! Сначала поставил nodejs, затем visual studio code, зател плагин code runner, в итоге у меня в окне "output" выводится все крое результата. Пол дня потратил, не могу понять что не так делаю..
Я тоже без понятия. Как вариант, попробовать переустановить плагин
@@YauhenKavalchuk переустанавливал и нод, и студио код, не помогло
установил Prettier. выставил настройку, как в видео - не срабатывает на нажатие сохранить.
¯\_(ツ)_/¯
А есть какие-нибудь качественные сниппеты В VSC для HTML?
Для HTML сниппетов нет, там есть Emmet и он по сути выполняет эту функцию
Jest - плагин для тестирования
SCSS intelliSense - плагин для работы с scss
SVG Preview - открывает svg файлы прямо в редакторе
TSLint - плагин для корректной работы с typescript
visual studio IntelliCode - автодополнение кода
vscode-icons - набор иконок для файлового менеджера на все случаи жизни
tsling уже давно deprecated
Многие не знают про VsCodeVim , очень упрощает процесс разработки.
Странно, что никто sftp не упомянул в комментариях, как же без него
Также надо добавить в этот топ плагин jQuery snippets. Очень активно им пользуюсь когда в vs code и работаю с jQuery.
jQuery морально устарел
@@redhook777 Как вы объясните свою точку зрения?
@@IT-fr5ni ужасная масштабируемость, нет реактивности
@@redhook777 Но не смотря на это он активно используется. Получается, что эти минусы никого не беспокоят, так ведь?
@@IT-fr5ni нет конечно. Его активно используют в основном новички, так как очень низкий порог входа относительно других библиотек и фреймворков. Также есть старые проекты на jQuery, которые надо поддерживать.
лайв сервер не работает.
и обновлял,и переустановил вс код.всё равно не работает.(не появляется на панели значок и всё).пол года работал и просто перестал,есть решение такой проблемы или догадки из за чего?
Вообще без понятия(
Для Vue есть замечательный Vetur.
Кеп
Спасибо за подборку, утянул чего не хватало - примерно половина у меня уже была))) Что до упомянутого WebStorm он конечно крут, не спорю, но стоит как Крымский мост. А если еще и PhpStorm прикупить, так вообще не гуманно получается, с нашим то курсом
Пожалуйста)
Что скажешь о TABNINE?
Хорошее расширение, правда иногда мешает. Так же к минусам бы отнёс - для его работы нужен интернет
Плагины, конечно, очень крутые. Однако vscode и без того занимает 1 gb в оперативной памяти, если подключить все эти плагины будет сильно хуже в этом смысле??
Мне бы хотелось услышать, почему так популярен VSCode по сравнению с Webstorm ? Такие причины, как меньше ест памяти и возможность бесплатного использования, можен не упоминать)
Ну так 2 самые весомые вы озвучили. Какие ещё нужны?
@@YauhenKavalchuk Ну тогда рассмотрим следующие ситуации. 1) Есть функция, которая возвращает имя, и находится она в отдельном файле. Данная функция используется в 4 файлах. В один прекрасный момент я захотел изменить название функции. С помощью WS это делается одним сочетанием клавиш: SHIFT+F6, как обстоят дела в VS? 2) Я случайно отменил изменения, которые планировал закоммитить. В WS это делается простым нажатием CTRL+Z, как обстоят дела с этим в VS ?
1) в VScode одной клавишей - F2
@@yaroslavfrolov775 частично помогает. Если использовать named exports, то все ок. Но если использовать default exports (Example: export default { .... }), то свойства объекта переименовываются только в текущем файле.
@@leshakorkoza5516 это одна из причин, почему default export - зло.
Николас Закас - уважаемый дядька, подтвердит..)
humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/
Вместо TODO highlight рекомендую поставить better comments
И дополню список расширением TabNine
Да, TabNine отличный вариант, хотя иногда немного и мешает
Юзаю remote development для удаленной работы на сервере
А под php есть что нибудь интересное?
Возможно. В каком нибудь следующем выпуске попробую собрать)
PhpStorm 🔥
Жень, привет! Я написал расширение для vscode, которые позволяет создавать структуру файлов любого вида и использовать сколько угодно шаблонов. Несколько раз пытался отправить сюда ссылку, видимо ссылки удаляются. Попробуйте найти в магазине расширений, расширение с названием "Component Creator", автор dsbasko. Буду очень рад, если сделаете обзор на него, в дополнение к этому видео-ролику. Спасибо.
По сути, это реклама
@@YauhenKavalchuk согласен. Просто проект некоммерческий. Выгоды с него нет. Не думал что это проблема. Хотелось тоже дать немного пользы. Твою позицию прекрасно понимаю. В любом случае, спасибо за Твой вклад в развитие IT сообщества. Смотреть и лайкать не перестану )
Я не сказал нет😉. Посмотрю, если плагин стоящий, расскажу в одном из будущих выпусков
vs code только для js разработчиков?
нет, его много кто и на других языках использует, он хорош тем что там можно дополнения ставить,что позволяют тебе работать комфортно и в других направлениях. Facebook официально утвердила vs code под свой React. Но некоторые на больших проектах предпочитают IDE, позволяет лучше отслеживать и сопровождать код,авто дополнения и всякое такое по факту уже с коробки,что в vs code можно тоже получить установив разширение и настроив его. Как-то так.
нет, я на java, c/c++, python. разрабатывал в vs code, но в большенстве случаев есть редактор, более подходящий для данных технологий.
Нет, этот редактор подходит для многих языков!
Тогда почему в топе все плагины для js? Либо название поменять нужно
@@user-pm8uy5pb3c автор видео Front-End разработчик, а как мы знаем что Web это Js, так что вот так.
интересная идея буткемпа. жаль, что дорого очень для меня(
¯\ _(ツ)_/¯
Евгений, поделитесь темой для вскода, пожалуйста)
Да это стандартные тема)
@@YauhenKavalchuk разве кнопочки установки такие синие? хмм... проблемы с головой видимо 😂
Темы я не менял). Возможно, что-то с цветопередачей.
@@YauhenKavalchuk может потому что мак
Material Gecko, id:carlos-rgl.material-gecko
Сделай для webStorm такое же видео
А смысл? В нём всё нужное идёт из коробки. Я даже на работе ничего для него не устанавливал
Если разработка сайта / приложения для русскоязычных пользователей, то Лорем не даст полноты картины. Лучше использовать «РыбаТекст»
Плагин с AI
Tabnine сделайте обзор
Ок
А как же ESLint? Упомянуть преттир, но не впилить еслинт , ууууу)
🤣👍
Хотелось бы обзор по самим идэешкам и редакторам, Атом, Брекетс, Эклипс, Шторм...твой опыт использования, твои резоны. VSCode понятно что популярен, не пора ли его подвинуть как Илон Маск подвинул Роскосмос?
Неудобные лорем и Эммет - это боль. Советую установить эти плагины например в саблайм, а потом в вс установить плагин, импортирующий конфигурацию саблайма
чем они неудобны?
Plugins:
- Bracket pair colorizer,
- Project manager,
- Error lens,
- html, json biscuits,
- spell checker en,
- copy relative path,
- color manager,
- bracket peek,
- better comments,
- es7 snippets,
- git graph,
- git lens,
- git sweep,
- image preview,
- rainbow csv,
- trailing spaces,
- version lens,
- path intellisense,
- bookmarks,
- todo tree
- import cost,
- bookmarks
👍
в вэбшторме большинство этих фич имеется по дэфолту)
¯\ _(ツ)_/¯
10:38 - Я думаю что этот плагин бесполезный так как Emmet отлично справляеться со вставкой текста Lorem
Ну и тем не менее он существует)
@@YauhenKavalchuk да, я ничего против не имею.
Почему все плагины для JavaScript
Так получилось
Не Pritter, а Prettier)
Да, опечатка
То чувство когда webstorm больше половины эх функций имеет по дефольу
Вот, вот. Чисто для верстки vs code. Но не как ни под проекты тяжелые
¯\ _(ツ)_/¯