company_banner

10 расширений для VS Code, без которых я не могу программировать

Автор оригинала: Sahil Bondre
  • Перевод
VS Code — мой любимый редактор кода. Это — самый популярный из существующих редакторов, возможности которого можно расширять практически до бесконечности. И, что удивительно, разработала его компания Microsoft. Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code. Одна из сильных сторон VS Code — это система расширений. Она позволяет создавать расширения буквально на все случаи жизни. Хочу рассказать вам о моём топ-10 расширений для VS Code.



1. Beautify



Для установки расширения воспользуйтесь в VS Code клавиатурным сокращением CTRL+P, введите в открывшееся поле нижеприведённую команду и нажмите Enter.

ext install HookyQR.beautify

Расширение Beautify позволяет форматировать html-, js-, css-, JSON- и sass-код. Параметрами форматирования можно управлять. Это расширение является надстройкой над стандартной системой js-beautify и позволяет разработчику форматировать код именно так, как ему нужно.

2. Better Comments



ext install aaron-bond.better-comments

Расширение Better Comments позволяет расширить возможности по работе с комментариями. В частности, оно позволяет делить комментарии на категории. Это могут быть уведомления, запросы, списки дел, примечания.


Использование Better Comments

3. Bookmarks



ext install alefragnani.Bookmarks

Расширение Bookmarks — это настоящий спасательный круг для программистов. Особенно для тех, которые потерялись среди тысяч строк кода. Это расширение позволяет прикреплять к строкам кода закладки. Если у строки кода есть закладка — к этой строке можно легко перейти, воспользовавшись списком закладок.


Закладки в коде

4. Bracket Pair Colorizer 2



ext install CoenraadS.bracket-pair-colorizer-2

Расширение Bracket Pair Colorizer 2 позволяет раскрашивать скобки, что облегчает нахождение пар открывающих и закрывающих скобок. Это очень полезно в тех случаях, когда приходится работать с вложенными друг в друга программными конструкциями.


Пары скобок выделены цветами

5. Format in Context Menus



ext install lacroixdavid1.vscode-format-context-menu

Расширение Format in Context Menus позволяет форматировать файлы, выделяя их в боковой панели и вызывая команду контекстного меню. Это особенно удобно в тех случаях, когда имеется множество файлов, которые нужно отформатировать, но при этом в имеющемся окружении нет поддержки средств для форматирования и линтинга кода.


Работа с Format in Context Menus

6. Git Graph



ext install mhutchie.git-graph

Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.


Работа с Git Graph

7. GitLens



ext install eamodio.gitlens

Расширение GitLens помогает выяснять авторство кода с использованием аннотаций git blame и линз. Это расширение, кроме прочего, позволяет очень удобно просматривать содержимое репозиториев и узнавать полезные сведения о коде.


Работа с GitLens

8. Indent Rainbow



ext install oderwat.indent-rainbow

Расширение Indent Rainbow позволяет раскрашивать отступы, выделяя разными цветами отступы разных уровней. Это особенно полезно при работе с глубоко вложенными конструкциями в языках наподобие Python.

9. Path Intellisense



ext install christian-kohler.path-intellisense

Расширение Path Intellisense оснащает редактор возможностями по автозавершению путей к файлам. Хотя VS Code поддерживает автозавершение путей и без расширений, эта возможность ограничена только HTML-, CSS- и JavaScript-файлами. Благодаря данному расширению автозавершением путей можно пользоваться при работе с любыми файлами и любыми языками.


Работа с Path Intellisense

10. Total Lines



ext install praveencrony.total-lines

Расширение Total Lines — это маленький удобный инструмент, который выводит в статус-баре сведения о количестве строк в открытом файле. Это — приятное дополнение к моей коллекции расширений.

А какими расширениями для VS Code пользуетесь вы?

Напоминаем, что у нас продолжается конкурс прогнозов, в котором можно выиграть новенький iPhone. Еще есть время ворваться в него, и сделать максимально точный прогноз по злободневным величинам.

RUVDS.com
RUVDS – хостинг VDS/VPS серверов

Комментарии 42

    +41

    Если "я не могу программировать" без знаний количества строк кода в текущем файле — значит что-то пошло не так.


    А если серьезно — заканчивайте использовать кликбейт в заголовках. Читаешь заголовок, читаешь статью, чувствуешь что тебя обманули. Когда это повторяется несколько раз это вызывает раздражение и к статье и к бренду (что прямо противоположено цели написания статьи).


    Зачем вам это?

      –3
      Сейчас бы за приемы автора на перевод агриться. Видимо на Хабре нужно выделять слово перевод и имя автора сотым кеглем вверху материала. Чтобы вот такого негатива не было.
        +12

        Погодите. Компания добровольно выбарала что переводить. Добровольно выбрала как переводить. так что все честно — кто принимает решение, тот все и получает. Как хорошее так и плохое.

          –10
          Серьезно? Это все равно, что предъявлять российским переводчикам Гарри Поттера за то, что Джоан Роулинг использовала «странные» слова, называя заклинания в книге. Не могли поблагозвучнее сделать, перевели как есть, негодники :-)
            +13

            Т.е. как нашли хороший материал, достойно перевели — так молодцы, а как оплошали — так это оригинал такой? Так не должно работать.

              –3

              Торбинс, Бэггингс, Сумникс, Сумкин… действительно, какая разница, это автор сделал такое странное имя, ему и пинки.
              Перевод — это скорее пересказ той-же истории другим языком. Особенно когда это не технический текст, а более описательный. И выбор этого языка и конкретных слов — на переводчике.


              У меня заголовок вызывает первые три пункта "Мозг, Руки, Электричество". При том, что внутри действительно полезные расширения названы, аналогами которых я пользуюсь в PyCharm и MSVS.
              Но сама формулировка именно заголовка — "мда..." и печаль. И то, что она и у исходного автора такая же, мало что меняет.

        +9
        Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code.
        Половина из перечисленного в JetBrains работает без расширений из коробки. Вторая половина так же ставится через расширения. И это лишь крупица всех возможностей.
          +3
          Вот только JetBrains — платный, в отличии от VSCode. А это, зачастую, решающий фактор.
          А ещё VSCode, за счет расширений, имеет поддержку сотен языков программирования (И даже отладки!). А в JetBrains придется ставить несколько отдельных приложений.
            +1
            Вот только JetBrains — платный
            Разве там нет Community версии?

            А ещё VSCode, за счет расширений, имеет поддержку сотен языков программирования
            Разве такого нет в JetBrains?
              0
              Разве там нет Community версии?

              Либо я плохо искал, либо Community есть только для Idea (Java/Android).
              Для остальных языков — только платные редакции.
                0
                Либо я плохо искал, либо Community есть только для Idea (Java/Android)
                Нет, вы правы, не для всех продуктов. Для питона еще бесплатная есть.
                Я ошибался, думая, что на все продукты одинаковый тип лицензирования.
                  0
                  для всех фанатов метода Pomodoro абсолютно бесплатно. После окончания триала коммерческие версии работают по 30 минут без вылета, так? А это и есть техника pomodoro! 25 мин сессия + 5 мин перерыв
                    0
                    Только что проверил — Community-версия есть как минимум у PyCharm. Из плагинов разве что нет цветных скобочек, и лично мне не хватает «зебры» на фоне для методов, но это решается в общем фолдингом.

                    Просто на фоне комбайна типа PyCharm, vsCode выглядит как та самая «маленькая тележка»…

                    PS: Думал что и у WebStorm и CLion есть communuty-версии, ан нет, оказывается. Странно даже.
                    0

                    Например WebStorm — есть только триал — пруф

                      0
                      Да, действительно. Я думал, на все продукты есть community версия.
                        0

                        Еще есть программа EAP (Early Access Program), но она не всегда действует(

                    0
                    «Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code.»тогда это утверждение крайне не верное. WebStorm умеет большинство из описанных с коробки, я ничего нового такого для себя не нашел как активному пользователю веб-шторма. Единственный плагин что я ставлю для шторма, это материал дизайн, все сотальное что вы описали уже с коробки.
                    Возможно VS Code лучший среди бесплатный, но до полноценной платной iDE далеко еще.
                      +5

                      Поддержка может быть и сотен, только необходимые работают ужасно и через одно место. Был опыт работы с хваленой поддержкой питона в VS Code. И вот после того как вылезаешь из этой IDE и видишь статью или коммент в подобном формате — возникает некоторый диссонанс.


                      Немного об опыте: юзал VS Code в качестве основной IDE для Python примерно 1 — 1.5 года (до первой половины 2019, если не изменяет память), далее и по настоящее время — PyCharm.


                      Всё было отлично, но после той же полноценной студии (в контексте юзания для .NET) VS Code казалась немного странной. Как китайский аппарат на андроиде с оболочкой iOS. С одной стороны навигация максимально удобная (до сих под юзаю эти шорткаты во всех любых IDE). С другой — поддержка языка слабовата. Много всего в плане интеграции с языком/фреймворком (django) приходилось делать ручками (настройка дебаггера и т.п.), нормального рефакторинга по нетипизированной части кода — и не надеялся, и всегда пользовался только поиском текста по проекту, после того как очередное переименование (средствами ide) поломало что-нибудь. Виртуальные окружения (venv) — сейчас и не вспомню, но что-то с ними было конкретно не так (естесно, речь все еще о интеграции с ide, ибо из консоли с этим все в порядке). Хотя, честно признаюсь, я тогда восхвалял VS Code и считал её идеальной.


                      А потом появилась лицензия на PyCharm. И вот тут то я понял, что все это время я занимался явно не тем. Поддержка языка — отличная. Всякие штуки типа раннеры тестов — идеально. Виртуальные окружения (venv) — вообще никаких проблем, всё просто автоматом работает, даже забываешь об этом иногда, а поначалу так вообще тупыми вопросами задавался (после опыта от vs code), типа — вот эта кнопочка для запуска теста, а она точно САМА ПОЙМЁТ что в проекте есть venv и сможет его активировать? И куча куча мелочей, которые перестали вообще вызывать вопросов. Просто запустил — просто работает.


                      Так что с VS Code не всё так однозначно.


                      В защиту VS Code могу сказать что — поддержка Angular/Typescript проектов — идеальная на том же уровне, на котором Python интегрирован в PyCharm, а это — отличные реально работающие рефакторинги по ts-коду, интеграция с шаблонами, с навигацией/автокомплитом между HTML <-> ts, подсказки по html и что-то, и все время работы с PyCharm — работу с фронтовыми проектами на Angular/Typescript продолжаю вести на VS Code (но тут уже просто во-первых привычка во-вторых — ограниченные ресурсы личной тачки, по ощущениям VS Code более плавно себя ведёт.


                      Но есть один нюанс — в том же PyCharm который хоть и позиционируется как IDE для Python — по факту всё вот это вышеописанное про angular/ts и многое другое не описанное тут — подключается тоже плагинами, и в итоге можно в том же PyCharm спокойно пилить какой-нибудь nodejs проект на TS с Vue на фронте без единой строки питонячего кода, и не чувствовать при этом себя не в том месте.


                      Личный вывод для себя — теперь VS Code заняла у меня почетное место блокнота (потеснив старый добрый Nodepad++), благодаря более обширному кол-ву фич из коробки, благодаря тому что спокойно пережевала огромные файлы с логами (когда npp не смог). Однако до полноценной IDE она ещё не дотягивает (и сейчас иногда открываю питонячьи проекты на VS Code — ничего нового, то же самое дубовое поведение без намека на юзерфрендли и развитие).

                        0

                        MSVS тоже сильно проигрывает PyCharm в работе с питоном. Ну вот просто пайчарм настолько лучше практически во всём с питоном(да плюс ещё расширения, дающие и другие языки) — и всё тут. Другой вопрос, если надо подключиться к процессу и отлаживать пошагово питон-код — тут бесплатный вижуал справляется, а пайчарм нужен в Pro лицензии и донастройка требуется.

                          +2

                          Ох, как же я вас понимаю.
                          У себя в команде хотел всех с PyCharm перекинуть на VSCode. Мы честно проработали почти полгода и я сам же сдался и поставил PyCharm. Теперь думаем Pro лицензии закупить, но придётся копить (под стартап не попадаем, потому что юр.лицо слишком давно сделали).
                          Из того что раздражало:


                          1. Навигация по коду ну очень медленная. Даже куча тонких настроек тормозили процесс работы очень сильно.
                          2. Запуски тестов и отладчик и быстрее, и удобнее.
                          3. Настройка разных окружений для проектов и подпроектов.
                          4. Не надо обращаться к гуглу, чтобы понять какие настройки есть и где их настраивать.

                          Правда были вещи в VSCode, которые успели понравиться:


                          1. Преднастроенные тесты реально можно положить в гит и они будут рабочими.
                          2. Не знаю как называется: на Ctrl+P команды быстрого запуска/поиска/ввода, которые удобны любителям консоли как я.
                          3. Запускается быстрее чем PyCharm даже с горой плагинов и ест меньше памяти.

                          Но в целом, работа на PyCharm выполняется быстрее и комфортнее. Цены бы ещё по коммунистичнее...

                            0

                            Именно о Ctrl+P / Ctrl+Shift+P я имел в виду, когда говорил о шорткатах. у PyCharm есть возможность сделать так же, но набор Action's с одной стороны неполный (в разных Tool Window'ах присутствуют кнопки, до которых из actions, похоже, не достучаться, и с другой — вперемешку с кучей toggle'ов из настроек (хотя иногда это удобно, но чаще всего они просто мешаются в списке и дезориентируют, благо в окне настроек поиск работает отлично)

                          +2
                          А в JetBrains придется ставить несколько отдельных приложений.

                          Это не так. Все отдельные приложения (ну может не все, но 90%) которые есть у JB доступны в виде плагинов в Intellij IDEA. Просто обновления до них доходят с небольшой задержкой (что в общем маловажно, если используете stable канал). Когда-то давно я для проектов на разных языках держал открытыми несколько разных редакторов, сейчас использую только IDEA и в зависимости от необходимости, включаю/выключаю разные языковые плагины.
                          Да, она всё ещё сильно заточена под Java, потому в меню могут быть некоторые пункты, которые работают только там (даже если поотключать Java-related плагины), но со временем перестаёшь их замечать.

                            +2
                            Ой да ладно, за нормальный инструмент который приносит тебе деньги заплатить $6 в месяц — вообще ерунда. Да еще и распродажи раз в год со скидками 50%
                              +1
                              Вот только JetBrains — платный, в отличии от VSCode
                              Тогда так и надо было написать в статье:
                              Я полагаю, что ни один из БЕСПЛАТНЫХ редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code.
                                +1
                                И все равно неверно-очень сильно зависит от языка.
                                Поддержка джавы в бесплатной версии IDEA явно лучше чем в VS code. Или в том же полутрупе в виде нетбинса.
                                Для многих других языков ситуация аналогичная, есть та же очень мощная visual studio community, н хочу холиварить что лучше но «не может дать разработчику хотя бы половину того, что способен дать ему VS Code.» явно неверно будет.

                                Если что сам сижу на vscode и вполне доволен им, но утверждение явно спорное.
                              0
                              Раз сравниваем IDE, то только в VS Code есть дебаггер для Javascript в бесплатной версии (насколько в курсе). А с недавних пор в insiders-версии в дебаггере прикрутили ещё и профилирование

                              И кстати, новый дебаггер с профайлером уже можно установить как расширение на stable-версию: marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly

                              А так конечно же вопрос личных предпочтений, и у JetBrains продукты вполне достойные
                              0

                              Я еще использую Code runner, очень удобная штука. Не надо лезть в терминал и запускать скрипт вручную.

                                0

                                Еще питоновское расширение от Майкрософт позволяет неплохо с Jupyter блокнотами работать.


                                И доступ по SSH очень удобная вещь :)

                                  0
                                  Bracket Pair Colorizer 2 хорош, кроме тех случаев когда фот светлый а скобка желтая, и ты никак не можешь понять то ли это круглая скобка, то ли фигурная
                                    +2
                                    Товарищи, подскажите пожалуйста, как в редакторе Visual Studio Code увеличить шрифт в панели (поиск<->замена) и включить подсветку синтаксиса регулярок (если это вообще возможно) (как это есть в sublime text) [скрин прикладываю].
                                    Заметил только что если увеличить масштаб интерфейса до неимоверных размеров то и увеличивается сам шрифт в панели поиск<->замена, но это не то. И подсветки регулярок нет. В гугле тоже внятных ответов не нашел.
                                    sublime text and vs code reg ex
                                      0

                                      Я конечно понимаю, что вопрос не совсем в тему, но всё таки спрошу от лица трудящихся:
                                      Почему была удалена недавняя статья о том, как попасть в Facebook?
                                      Где видео по этой же теме на Вашем Youtube канале (которое было обещано через неделю после выхода статьи)?

                                        0
                                        Вот же она.
                                        Видео планируется :-)
                                        +3
                                        Закладки в коде

                                        image


                                        Простите

                                          +2
                                          Мне не хватало поделок типа Better Comments, надо было что-то серьезное, чтобы ссылки прямо в комментариях работали, и комментарии не устаревали, поэтому я запилил такое расширение:

                                          marketplace.visualstudio.com/items?itemName=nur-publisher.hypercomments-vscode

                                            +2
                                            Я последние два года, очень часто меняю инструменты, языки и специфику работы.
                                            Qt, C++, C#, Python, UE4, cocos2d-x, godot, gdscript, lua и т.д.
                                            И сколько раз пытался перейти на VSCode, столько же раз не мог с ним освоится. В ручную прописывать пути до инструментов, библиотек и хедеров.
                                            В ручную постоянно прикручивать отладчики, анализаторы и прочее.
                                            Плюс еще нужно читать монструозную документацию по VSCode, ибо все параметры в нем по сути, ты настраиваешь в json формате, в каких то конфигах. После настройки среды, ты забываешь про нее на пол год, а через пол года, надо все с начала настраивать, вспоминать, искать докуменацию. Короче на VSCode уходит не оправдано много времени, если ты не сидишь на одном стеке технологий и прыгаешь между стартапами, инди проектами и т.п.

                                            А вот скилл, работать из блокнота — очень полезен. Когда нет времени развертывать сложную среду, что бы настроить 3 скрипта для Nakama Сервера, на Go
                                              0
                                              Я ещё Indent One Space использую (https://marketplace.visualstudio.com/items?itemName=usernamehw.indent-one-space). Тема Night Owl (https://marketplace.visualstudio.com/items?itemName=sdras.night-owl). А так на вкус и цвет, конечно, но у меня vscode вполне прижился (в основном я его для C# использую — он сам подтягивает всё необходимое.). Скачал достаточно легковесные .NET Core SDK да VScode и можно начинать работать. Я и xaml в нём же редактирую и лишь изредка Студию запускаю в особо тяжёлых случаях. Консоль под рукой, с git всё ОК. Как по мне так офигенно удобно, хотя и не без мелких багов.
                                                0
                                                hediet.vscode-drawio — интеграция с draw.io, диаграммы, заменяющие MS Visio (если вы им пользуетесь только как рисовалкой)
                                                  0
                                                  кто использует vue даже не думайте ставить Beautify, это ужас, для vue ставьте Prettier
                                                    0
                                                    Для меня серьезным недостатком является слабая работа Go To Definition для JavaScript.

                                                    В деталях:
                                                    qna.habr.com/q/617745

                                                    На последних версиях все еще не работает. Суть проблемы исходит из того, что в качестве сервиса анализа JavaScript используется сам tsc (сам транслятор typescript), и ему плохо дается анализ динамических конструкций.
                                                    Была идея вместо tsc прикрутить какой-нибудь другой анализатор, но это сулит кучу работы.
                                                      0
                                                      Лучше tsc ничего не найдете. Чтобы улучшить помощь редактора — либо в начало JS файла ставьте
                                                      // @ts-check
                                                      либо в настроках VSCode поставьте
                                                      javascript.implicitProjectConfig.checkJs": true
                                                      А лучше просто использовать Typescript
                                                        0

                                                        Можно использовать JsDoc. Из бонусов — генерация документации.
                                                        https://habr.com/ru/company/ruvds/blog/493704/

                                                          0
                                                          Была идея вместо tsc прикрутить какой-нибудь другой анализатор, но это сулит кучу работы.

                                                          Я в N++ нафигацию по коду сделал с пом.: jN + ctags + http://script-coding.com/svcsvc.html
                                                          Не Бог весть что, но достаточно.


                                                          ПС. Некоторые плагины из статьи делаются в N++ через jN на коленке. Что-то типа "Path Intellisense" я делал пару месяцев назад.

                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                        Самое читаемое