ТОП 16 Плагинов для VS Code в 2020 (VS Code Extensions)

Поделиться
HTML-код
  • Опубликовано: 1 дек 2024

Комментарии • 150

  • @YauhenKavalchuk
    @YauhenKavalchuk  4 года назад +14

    ✒ 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

    • @sharyar_t
      @sharyar_t 4 года назад +4

      Prettier*

    • @andreyzhukov2821
      @andreyzhukov2821 4 года назад +1

      Привет!
      Есть ли такой же список, но для WebStorm?

    • @zhimbura
      @zhimbura 4 года назад

      К Quokka так же Wallaby нужно добавить

    • @zhimbura
      @zhimbura 4 года назад

      @@andreyzhukov2821 там половина есть по дефольу, чего нет по дефолту есть плагины

    • @StanislavK1
      @StanislavK1 4 года назад

      Да, ошибка и в описании видео и тут 6:13 Prettier

  • @userbilas
    @userbilas 4 года назад +22

    Юзаю так же ещё:
    1. Settings Sync (Перенос настроек через облако, если ты работаешь на нескольких машинах или местах) .
    2. htmltagwrap (по написанию когда даёт возможность оборачивать нужный фрагмент в тег-контаенер (div, p и т.д.)) .
    3. Git History Diff (альтернатива работы с Git , что в понятной форме позволяет отслеживать изменения что были добавлены в ходе работы над проектом ).
    4. Code Spell Checker ( указывает на ошибки в слове что было написано на англ языке).

    • @akionka
      @akionka 4 года назад +2

      Первое расширение уже реализовано нативно в вскоде

    • @dimanazdratenko
      @dimanazdratenko 4 года назад

      @@akionka можно подробней? можно удалять расширение? как из коробки сделать?

    • @akionka
      @akionka 4 года назад

      @@dimanazdratenko в 1.44 добавили как превью версию code.visualstudio.com/updates/v1_44#_settings-sync а в 1.46 (инсайдерс) работает вроде нормально уже

    • @АлександрМарченко-ы4к
      @АлександрМарченко-ы4к 4 года назад +1

      htmltagwrap - реализовано в стандартном эмите (необходимо лишь назначить хоткей)

    • @userbilas
      @userbilas 4 года назад

      Александр Марченко Спасибо, чекну сейчас)

  • @OlexandrSerbinov
    @OlexandrSerbinov 4 года назад +2

    очень топ!
    Первый раз вижу подборку из которой я установил почти все расширения👍

  • @kitN
    @kitN 2 года назад

    Спасибо автору, добавил себе пару плагинов, я только недавно начал погружаться в мир веба, потому был приятно удивлен.

  • @srsatt
    @srsatt 4 года назад +3

    Jest - плагин для тестирования
    SCSS intelliSense - плагин для работы с scss
    SVG Preview - открывает svg файлы прямо в редакторе
    TSLint - плагин для корректной работы с typescript
    visual studio IntelliCode - автодополнение кода
    vscode-icons - набор иконок для файлового менеджера на все случаи жизни

  • @ROTOFFLOLKA
    @ROTOFFLOLKA 4 года назад +28

    Lorem из коробки работает через emmet

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад +1

      Точняк, emmet проверил, а lorem забыл)

    • @onlynowmotivation
      @onlynowmotivation 3 года назад +1

      сейчас можно просто лорем написать + цифру и он сработает) А так многие плагины давно искал , спасибо!

  • @ИльяКонев-э1ы
    @ИльяКонев-э1ы 3 года назад

    я наконецто нашел то что надо! лайк и подписка

  • @vl8224
    @vl8224 3 года назад

    Отличное видео и не менее полезные комментарии под ним!

  • @pavel_dev
    @pavel_dev 4 года назад

    Приятно звучишь. Музыка не слишком громко. Нравится

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад

      Спасибо

    • @sffd864
      @sffd864 3 года назад

      @@YauhenKavalchuk да, тоже хотел написать - хорошая манера подачи, спокойно и последовательно...

  • @Refflexes
    @Refflexes 4 года назад +3

    В VS Code можно вставлять lorem написав lipsum. Можно еще добавить количество слов, если необходимо, например: lipsum15 сгенерирует текст из 15 слов

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад +1

      Да, уже в курсе)

    • @EuroDJ
      @EuroDJ 2 года назад

      может наоборот? у меня работает не lipsum15 , а lorem15 ... или они что-то поменяли? )

    • @Refflexes
      @Refflexes 2 года назад +1

      @@EuroDJ мог ошибиться. Возможно, с WS перепутал. Спасибо за исправление.

  • @vyacheslav2750
    @vyacheslav2750 4 года назад +2

    Привет, сними видео об крутых возможностях в vscode. Например я недавно для себя открыл такое, как:
    - workspaces: позволяет обеднить несколько проектов в одно пространство оп которому можно делать поиск, удобно запускать\перезапускать сервисы. (при роботе с микро сервисами незаменимая вещь) и много другого...
    - vs code tasks: это вообще пушка фича. Например мне нужно обновить пакет, а потом сделать yarn upgrade во всех сервисах которые его используют. Не беда написал скрипт, создал таску, прибил ее к комбинации кнопок и все. Теперь трачу 5 секунд пока все обновиться вместо 5 минут брожения по сервисам
    Там есть ещё много крутых штук о которых многие не знают или сложно разобраться

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад +1

      Спасибо за идею, можно подумать)

  • @viktoriaviktoria3178
    @viktoriaviktoria3178 3 года назад

    Спасибо большое!

  • @kerusdc8322
    @kerusdc8322 2 года назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад

      Обычно это устанавливается в файле editorconfig

  • @doomymax577
    @doomymax577 4 года назад +1

    Numbered Bookmarks - делает нумерные закладки
    Markdown Preview Enhanced - превью для md файлов
    Live Share - вроде бы удаленно можно управлять кодом, не проверял

  • @РоманДиохтиовский
    @РоманДиохтиовский 4 года назад

    Про Git Lens добавлю, что он и с gitlab тоже работает и еще в нем есть удобная фича - file history - по коммитам относящимся к этому файлу можно пробежаться и посмотреть что было изменено.

  • @arturnailevich7776
    @arturnailevich7776 2 года назад

    У меня nfm не работает по умолчанию в JavaScript (ES6) code snippets. Нужно отдельно сокращение создавать это?

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад

      Да нет. Возможно ваши локальные настройки что-то блочат. Все сокращения описаны в доке плагина

    • @arturnailevich7776
      @arturnailevich7776 2 года назад

      @@YauhenKavalchuk nfn нужно. Видео несколько раз пересматривал, но там очень быстро и не видно текст.

  • @levovix
    @levovix 3 года назад

    Вместо TODO highlight рекомендую поставить better comments
    И дополню список расширением TabNine

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад

      Да, TabNine отличный вариант, хотя иногда немного и мешает

  • @qorzhique
    @qorzhique 2 года назад

    Помогите, пожалуйста! Сначала поставил nodejs, затем visual studio code, зател плагин code runner, в итоге у меня в окне "output" выводится все крое результата. Пол дня потратил, не могу понять что не так делаю..

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад

      Я тоже без понятия. Как вариант, попробовать переустановить плагин

    • @qorzhique
      @qorzhique 2 года назад

      @@YauhenKavalchuk переустанавливал и нод, и студио код, не помогло

  • @IT-fr5ni
    @IT-fr5ni 4 года назад +1

    Также надо добавить в этот топ плагин jQuery snippets. Очень активно им пользуюсь когда в vs code и работаю с jQuery.

    • @redhook777
      @redhook777 4 года назад

      jQuery морально устарел

    • @IT-fr5ni
      @IT-fr5ni 4 года назад +1

      @@redhook777 Как вы объясните свою точку зрения?

    • @redhook777
      @redhook777 4 года назад

      @@IT-fr5ni ужасная масштабируемость, нет реактивности

    • @IT-fr5ni
      @IT-fr5ni 4 года назад

      @@redhook777 Но не смотря на это он активно используется. Получается, что эти минусы никого не беспокоят, так ведь?

    • @redhook777
      @redhook777 4 года назад

      @@IT-fr5ni нет конечно. Его активно используют в основном новички, так как очень низкий порог входа относительно других библиотек и фреймворков. Также есть старые проекты на jQuery, которые надо поддерживать.

  • @YuriiKratser
    @YuriiKratser 4 года назад

    Спасибо! Жень подскажи пожалуйста а есть ли плагин для разработки на js который делает авто импорт, как тогда когда ты пишешь на ангуларе? Или может вебпак нужно настроить как-то?

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад

      Нет, такой к сожалению, не подскажу(

    • @tgmoon
      @tgmoon 2 года назад

      в WebStorm это нативно реализовано

  • @АлександрМарченко-ы4к

    Хотелось бы также упомянуть SCSS IntelliSense - плагин, выводящий подсказки для scss перменных (функций, миксинов и тд.)

  • @DreamingDolphing
    @DreamingDolphing 4 года назад +3

    Для Vue есть замечательный Vetur.

  • @ВейсалТаштанов
    @ВейсалТаштанов 4 года назад +2

    Так же сюда добавил бы плагин Auto import. Экономит немало времени.

  • @ИннокентийМихельсон

    Сорри что сюда, НО Ребят проблема в VS Code... не появляется выпадающий список например при background: url(' ') со списком папок и файлов на компе... при том в href=" " он появляется... при том на рабочей машине такой проблемы нет.. все выпадает... переустановка проблему не решила.... куда рыть?

    • @kvadro_id
      @kvadro_id 2 года назад

      Решил проблему с выпадающим списком? В чем была проблема?

  • @andreikan7406
    @andreikan7406 3 года назад

    установил Prettier. выставил настройку, как в видео - не срабатывает на нажатие сохранить.

  • @viktorshcheplyagin9576
    @viktorshcheplyagin9576 3 года назад

    Как альтернатива запуска Prettier по сохранению, можно нажимать ALT + Shift + F (Win) для форматирования кода открытого файла

  • @darksgamechannel5484
    @darksgamechannel5484 3 года назад

    как называется плагин с Цветными отступами для vs code? спасибо заранее

  • @РоманДиохтиовский
    @РоманДиохтиовский 4 года назад

    про Version Lens - у меня без него в package json курсор наводишь на библиотеку и там пишет какая доступна последняя версия.

  • @AstaLaVista2321
    @AstaLaVista2321 4 года назад

    Многие не знают про VsCodeVim , очень упрощает процесс разработки.

  • @ВладимирвладимиР-ь8ш

    лайв сервер не работает.
    и обновлял,и переустановил вс код.всё равно не работает.(не появляется на панели значок и всё).пол года работал и просто перестал,есть решение такой проблемы или догадки из за чего?

  • @smile5192
    @smile5192 4 года назад

    Скажите плагин или другие советы, как быстро автоисправлять ошибки или лишние пробелы в коде?

  • @natlusrun
    @natlusrun 4 года назад

    Можете сделать видео про Фриланс? Думаю всем будет полезно. Например что учить новичку, что куда.))

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад

      Подобные видео можно найти на канале в плейлисте frontreview

  • @user-gt2rz8qc3j
    @user-gt2rz8qc3j 4 года назад

    У меня Quokka почему-то не работает. Может быть это другие установленные плагины мешают?

  • @dimanazdratenko
    @dimanazdratenko 4 года назад

    Кто знает, как настроить нормальный поиск как в webstorm? Что бы при наведении списка результатов показывало кусок кода вокруг.

  • @natlusrun
    @natlusrun 4 года назад

    Sublime one love

  • @dmytrob7336
    @dmytrob7336 3 года назад

    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

  • @elmirweb6583
    @elmirweb6583 3 года назад

    Что скажешь о TABNINE?

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад

      Хорошее расширение, правда иногда мешает. Так же к минусам бы отнёс - для его работы нужен интернет

  • @yuuvve
    @yuuvve 4 года назад

    А есть какие-нибудь качественные сниппеты В VSC для HTML?

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад

      Для HTML сниппетов нет, там есть Emmet и он по сути выполняет эту функцию

  • @dsbasko
    @dsbasko 2 года назад

    Жень, привет! Я написал расширение для vscode, которые позволяет создавать структуру файлов любого вида и использовать сколько угодно шаблонов. Несколько раз пытался отправить сюда ссылку, видимо ссылки удаляются. Попробуйте найти в магазине расширений, расширение с названием "Component Creator", автор dsbasko. Буду очень рад, если сделаете обзор на него, в дополнение к этому видео-ролику. Спасибо.

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад +1

      По сути, это реклама

    • @dsbasko
      @dsbasko 2 года назад

      @@YauhenKavalchuk согласен. Просто проект некоммерческий. Выгоды с него нет. Не думал что это проблема. Хотелось тоже дать немного пользы. Твою позицию прекрасно понимаю. В любом случае, спасибо за Твой вклад в развитие IT сообщества. Смотреть и лайкать не перестану )

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад +1

      Я не сказал нет😉. Посмотрю, если плагин стоящий, расскажу в одном из будущих выпусков

  • @leshakorkoza5516
    @leshakorkoza5516 4 года назад

    Мне бы хотелось услышать, почему так популярен VSCode по сравнению с Webstorm ? Такие причины, как меньше ест памяти и возможность бесплатного использования, можен не упоминать)

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад

      Ну так 2 самые весомые вы озвучили. Какие ещё нужны?

    • @leshakorkoza5516
      @leshakorkoza5516 4 года назад

      @@YauhenKavalchuk Ну тогда рассмотрим следующие ситуации. 1) Есть функция, которая возвращает имя, и находится она в отдельном файле. Данная функция используется в 4 файлах. В один прекрасный момент я захотел изменить название функции. С помощью WS это делается одним сочетанием клавиш: SHIFT+F6, как обстоят дела в VS? 2) Я случайно отменил изменения, которые планировал закоммитить. В WS это делается простым нажатием CTRL+Z, как обстоят дела с этим в VS ?

    • @yaroslavfrolov775
      @yaroslavfrolov775 4 года назад

      1) в VScode одной клавишей - F2

    • @leshakorkoza5516
      @leshakorkoza5516 4 года назад

      @@yaroslavfrolov775 частично помогает. Если использовать named exports, то все ок. Но если использовать default exports (Example: export default { .... }), то свойства объекта переименовываются только в текущем файле.

    • @yaroslavfrolov775
      @yaroslavfrolov775 4 года назад

      @@leshakorkoza5516 это одна из причин, почему default export - зло.
      Николас Закас - уважаемый дядька, подтвердит..)
      humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/

  • @astro_papuin
    @astro_papuin 4 года назад

    Спасибо за подборку, утянул чего не хватало - примерно половина у меня уже была))) Что до упомянутого WebStorm он конечно крут, не спорю, но стоит как Крымский мост. А если еще и PhpStorm прикупить, так вообще не гуманно получается, с нашим то курсом

  • @Hello_world_2020A
    @Hello_world_2020A 3 года назад

    Плагин с AI
    Tabnine сделайте обзор

  • @crazy9flip_895
    @crazy9flip_895 4 года назад

    Неудобные лорем и Эммет - это боль. Советую установить эти плагины например в саблайм, а потом в вс установить плагин, импортирующий конфигурацию саблайма

    • @devopsRussia
      @devopsRussia 3 года назад

      чем они неудобны?

  • @andreylear
    @andreylear 4 года назад

    Если разработка сайта / приложения для русскоязычных пользователей, то Лорем не даст полноты картины. Лучше использовать «РыбаТекст»

  • @akionka
    @akionka 4 года назад

    Евгений, поделитесь темой для вскода, пожалуйста)

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад

      Да это стандартные тема)

    • @akionka
      @akionka 4 года назад

      @@YauhenKavalchuk разве кнопочки установки такие синие? хмм... проблемы с головой видимо 😂

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад

      Темы я не менял). Возможно, что-то с цветопередачей.

    • @akionka
      @akionka 4 года назад

      @@YauhenKavalchuk может потому что мак

    • @denchqqq
      @denchqqq 3 года назад

      Material Gecko, id:carlos-rgl.material-gecko

  • @aureliansoul
    @aureliansoul 4 года назад

    интересная идея буткемпа. жаль, что дорого очень для меня(

  • @Влад-и8д6л
    @Влад-и8д6л 4 года назад

    vs code только для js разработчиков?

    • @userbilas
      @userbilas 4 года назад +1

      нет, его много кто и на других языках использует, он хорош тем что там можно дополнения ставить,что позволяют тебе работать комфортно и в других направлениях. Facebook официально утвердила vs code под свой React. Но некоторые на больших проектах предпочитают IDE, позволяет лучше отслеживать и сопровождать код,авто дополнения и всякое такое по факту уже с коробки,что в vs code можно тоже получить установив разширение и настроив его. Как-то так.

    • @uniquenickname
      @uniquenickname 4 года назад +1

      нет, я на java, c/c++, python. разрабатывал в vs code, но в большенстве случаев есть редактор, более подходящий для данных технологий.

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад +1

      Нет, этот редактор подходит для многих языков!

    • @Влад-и8д6л
      @Влад-и8д6л 4 года назад

      Тогда почему в топе все плагины для js? Либо название поменять нужно

    • @userbilas
      @userbilas 4 года назад +2

      @@Влад-и8д6л автор видео Front-End разработчик, а как мы знаем что Web это Js, так что вот так.

  • @excelente9842
    @excelente9842 4 года назад

    А под php есть что нибудь интересное?

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад +1

      Возможно. В каком нибудь следующем выпуске попробую собрать)

    • @ry64k
      @ry64k 4 года назад

      PhpStorm 🔥

  • @ray_sazeks_2727_official
    @ray_sazeks_2727_official 2 года назад

    Почему все плагины для JavaScript

  • @neirubugz8404
    @neirubugz8404 4 года назад +4

    А как же ESLint? Упомянуть преттир, но не впилить еслинт , ууууу)

  • @dmitrym2314
    @dmitrym2314 4 года назад

    Сделай для webStorm такое же видео

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад

      А смысл? В нём всё нужное идёт из коробки. Я даже на работе ничего для него не устанавливал

  • @sergeyaleksandrov6289
    @sergeyaleksandrov6289 4 года назад

    Юзаю remote development для удаленной работы на сервере

  • @serhii_uit
    @serhii_uit 3 года назад

    10:38 - Я думаю что этот плагин бесполезный так как Emmet отлично справляеться со вставкой текста Lorem

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад

      Ну и тем не менее он существует)

    • @serhii_uit
      @serhii_uit 3 года назад

      @@YauhenKavalchuk да, я ничего против не имею.

  • @SlavaCh
    @SlavaCh 4 года назад

    Плагины, конечно, очень крутые. Однако vscode и без того занимает 1 gb в оперативной памяти, если подключить все эти плагины будет сильно хуже в этом смысле??

  • @dennyluckes4783
    @dennyluckes4783 4 года назад

    Хотелось бы обзор по самим идэешкам и редакторам, Атом, Брекетс, Эклипс, Шторм...твой опыт использования, твои резоны. VSCode понятно что популярен, не пора ли его подвинуть как Илон Маск подвинул Роскосмос?

  • @ignatneko1339
    @ignatneko1339 4 года назад

    в вэбшторме большинство этих фич имеется по дэфолту)

  • @Zadrot1080p
    @Zadrot1080p 4 года назад

    Не Pritter, а Prettier)

  • @zhimbura
    @zhimbura 4 года назад +1

    То чувство когда webstorm больше половины эх функций имеет по дефольу

    • @znaivsetv5535
      @znaivsetv5535 4 года назад

      Вот, вот. Чисто для верстки vs code. Но не как ни под проекты тяжелые

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад

      ¯\ _(ツ)_/¯