company_banner

7 расширений для VS Code, установив которые, вы не захотите выходить из редактора

Автор оригинала: Daan
  • Перевод
…Даже простейшие инструменты могут давать людям возможность делать великие дела.
Биз Стоун, «Решайся! Заряд на создание великого от основателя Twitter»

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



Многие программисты используют в наши дни Visual Studio Code. Этот редактор кода поддерживает установку расширений. Существует столько подобных расширений, что можно говорить о том, что возможности настройки VS Code практически безграничны.

Но на Visual Studio Marketplace, на площадке, где публикуются расширения для VS Code, опубликовано просто невероятное количество расширений. А это значит, что программистам сложно находить именно то, что им действительно пригодится. Если некое расширение показалось кому-то полезным, то оно, вполне возможно, принесёт пользу и другим людям. Поэтому я расскажу здесь о 7 расширениях для VS Code, которые способны значительно облегчить работу программиста. Всё это — бесплатные расширения. Любой может свободно их загружать и использовать.

1. REST Client


Расширение REST Client позволяет, прямо из VS Code, отправлять HTTP-запросы, и тут же просматривать ответы на них. Это расширение позволяет попрощаться с внешними приложениями, которые иначе пришлось бы использовать для выполнения запросов к серверам.

Это расширение, учитывая то, что у него более миллиона загрузок, весьма популярно. Им пользуется множество программистов. Я уже довольно давно пользуюсь REST Client и полагаю, что это — замечательный инструмент.

С его помощью очень просто и удобно создавать и отправлять запросы. При работе с ним используются чёткие синтаксические конструкции, облегчающие его применение в самых разных ситуациях. Например, для отправки простого GET-запроса достаточно одной строки кода, в которой имеется ключевое слово GET и присутствует URL.

В общем, рекомендую испытать это расширение всем, кому нужен функционал REST-клиента.


Работа с REST Client

2. CSS Peek


Если вы занимаетесь веб-разработкой, то CSS Peek — это расширение, которое обязательно должно присутствовать в вашем наборе инструментов. Данное расширение позволяет быстро просматривать CSS-правила, применяемые к различным HTML-элементам. Для того чтобы увидеть соответствующий CSS-код, достаточно навести указатель мыши на имя класса элемента или на его ID.

Ниже показан процесс работы с CSS Peek.


Работа с CSS Peek

Но возможности этого расширения идут дальше просмотра стилей. Оно, кроме прочего, позволяет быстро переходить к коду CSS-правил, используемых для стилизации элементов. Это позволяет экономить массу времени при поиске соответствующих селекторов.

3. Beautify


Если вам нравится чистый код, то вам, определённо, придётся по душе расширение Beautify. Оно позволяет форматировать код. Beautify поддерживает JavaScript, HTML, CSS, Sass и JSON.

Самое приятное в этом расширении то, что оно поддаётся глубокой настройке. Например, сюда входит настройка размеров отступов и указание того, должны ли файлы завершаться переводом строки. Beautify подойдёт тем, кто пишет код на разных языках программирования, для каждого из которых можно задавать собственные настройки.

Beautify, с более чем 5 миллионами загрузок, входит в топ-20 самых популярных расширений.

4. Auto Rename Tag


Расширение Auto Rename Tag решает весьма простую задачу, но, несмотря на это, оно способно занять достойное место в наборе инструментов программиста. А именно, оно автоматизирует задачу переименования HTML-тегов. В частности, если переименовывают открывающий тег, меняется и закрывающий тег. То же самое происходит и при переименовании закрывающего тега.

Если вам нужно, чтобы после ввода скобки, завершающей открывающий тег, автоматически вводился бы закрывающий тег, взгляните на расширение Auto Close Tag. Если у вас есть оба эти расширения, это хорошо поможет вам в написании HTML-кода, сделав ваш труд эффективнее, а результаты вашей работы — единообразнее.


Работа с Auto Rename Tag

5. Quokka.js


Расширение Quokka.js — это нечто вроде «песочницы» для экспериментов с кодом, встроенной прямо в редактор. Она позволяет работать с файлами, выводя соответствующие подсказки непосредственно в коде. Эти подсказки появляются в процессе ввода текста программы, что очень удобно.


Работа с Quokka.js

6. Night Owl


Чего стоит оптимизация VS Code без использования изумительной темы? Программисты проводят очень много времени, работая в редакторе, поэтому — чем привлекательнее выглядит редактор — тем лучше. 

Night Owl — это одна из замечательных тем, используемых многими программистами. В описании к ней сказано, что она рассчитана на тех, кто засиживается за компьютером до поздней ночи.


Тема Night Owl

Но если вам эта тема не нравится — ничего страшного. Существует ещё очень много хороших тем, одна из которых вам точно подойдёт.

7. JavaScript (ES6) code snippets


Расширение JavaScript (ES6) code snippets, завершающее этот материал, предлагает разработчику набор сниппетов, которые позволяют быстро создавать современные JavaScript-конструкции.

Например, если, пользуясь этим расширением, ввести clg и нажать Enter — в код попадёт console.log. Для того чтобы освоить все имеющиеся в этом расширении сниппеты может понадобиться некоторое время. Но тот, кто внедрил в работу JavaScript (ES6) code snippets, сможет по-настоящему быстро писать современный JS-код. Это окупает время, потраченное на изучение данного расширения.

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

RUVDS.com
VDS/VPS-хостинг. Скидка 10% по коду HABR

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

    +36

    Вы определитесь, пожалуйста, Auto Rename Tag (Auto Close Tag) — расширение для VS Code, установив которое, я не захочу выходить из редактора или ненужное расширение.

      0
      Вроде встроенный недавно завезли. Но работает хуже — много мелких багов. Я удалил, а сейчас думаю вернуть Auto Rename Tag.
        0

        Можно через F2 переименовывать попарно, или через Ctrl+D если сразу несколько элементов.

        0
        расширение для VS Code, установив которое, я не захочу выходить из редактора или ненужное расширение

        Ну логика в этом есть определенная. Расширение, которое будет держать вас постоянно в VS Code явно не нужное и даже вредное. Отдыхать все же надо.
          0
          Особенно если учесть, что Auto Rename Tag и Auto Close Tag — это адовые плагины, которые просто ложат CPU своей нагрузкой :)
          Если еще и зайти на их страницы Issues на Github, то там вообще жесть.
          +3
          На мой взгляд Insomnia лучший рест клиент! интуитивный и не перегруженный!
            +1
            Это расширение? Или отдельная прога? Пользовались REST Client? В принципе, единственное неизвестное мне расширение из подборки.
            –7
            Расширение REST Client позволяет, прямо из VS Code, отправлять HTTP-запросы, и тут же просматривать ответы на них

            Оно позволяет форматировать код. Beautify поддерживает JavaScript, HTML, CSS, Sass и JSON

            ничего не имею против vscode, но в vim для такого даже расширения не нужны :)

              +1

              Да что уж там) Лучше сразу на ассемблере писать, тогда и запросы не нужны :)

              0
              Недавно наткнулся на лучшее, что мне попадалось, расширение для рефакторинга Abracadabra. Не такое популярное, но реально удобное. Хочу туда контрибьютнуть Extract class в ближайшее время, если кому интересно.
                +1
                CSS Peak — классная штука. Но конфликтовал с Angular файлам, пришлось удалить. Не знаю, пофиксили уже или нет.

                Beautify — слишком много настроек… Заменил на Prettier и счастлив.

                Извините, если много спама к одному посту
                  0
                  Напротив, спасибо, только недавно с Jet Brains перешел на VSCode и вся эта информация очень ценна.
                    0
                    О! А я наоборот, не могу перейти в WebStorm) Он манил меня некоторыми фичами, но UI/UX… Чувствую себя у штурвала космического корабля.

                    По мне, главное, при начале работы с VSCode, настроить авто форматирование при сохранении, и авто исправление ошибок. Исправление ошибок делают расширения Eslint, Tslint. Настроив это, VSCode превращается в пушку, которая пишет код за тебя. (Предполагаю, что WebStorm умеет не хуже, но много раз встречал людей, у которых и половины функционала из VSCode не работало в платной WebStorm)
                      +1
                      Web Storm пока заметно удобней для написания кода. Не критично, но заметно. Его единственный минус по моему опыту (помимо платности, которую думаю любой работающий программист даже не заметит) это некоторая тормознутость, вызванная видимо тем, что там нормальный интеллисенс, а не по факту употребления идентификатора. Я перешел по своим причинам, не связанным с функциональностью.
                        0
                        Поделитесь преимуществами, чтобы мне захотелось получше его пощупать. А я попробую аналогичную функциональность из VSCode привести. Чтобы и мне и вам)
                          0
                          К сожалению не могу прямо сейчас вспомнить, три месяца назад, когда начал пользоваться, периодически натыкался на какие то неудобства при работе с кодом, которые storm сглаживал, но поскольку они были как писал выше некритичны, то сейчас пытаюсь вспомнить и воспроизвести и не могу, только общее ощущение, что vscode просто хорошая среда а storm настоящая конфетка, но может кто-то увидит ваш вопрос и перечислит по пунктам.
                            0

                            На самом деле у Web Storm есть только один большой плюс, все идет из коробки, не надо искать плагины. Есть всякие мелкие плюшки (навигация из шаблонов класс для Angular), которых нет в VSC, удобная работа с VCS (это на любителя конечно), Code Inspection отличный, рефакторинги (вот этого не хватает в VSC).

                              0
                              Я бы посоветовал начать с горячих клавиш. Сразу наглядно видно много возможностей. А в целом, WebStorm это полноценная IDE, в которой сразу есть и работа с контролем версий и деплой на сервер и поддержка многих фреймворков из коробки.
                                +2

                                Я, конечно, не он, но тем не менее:


                                • интеллисенс, как его обозвал комментатор выше. Шторм лучше анализирует проект ну или вообще как минимум анализирует. VSCode даже с плагинами не дотягивает.
                                • Более человечный рефакторинг и другие различные действия над проектом (напр. предложение переименовать название класса, при смене названия файла, обновить импорты при перемещении и так далее). Хотя скорее это вытекает из первого пункта.
                                • история изменений файла/папки/мбчегоеще. Для меня это киллер фича, когда пробуешь 100500 подходов, но иногда надо вернуть одну из реализаций. Также спасает от случайных удалений и прочих событий. Опять же, для VSCode вроде находил плагин, но чём-то не устроил.
                                • Много всего из коробки, что для VSCode надо ставить плагинами
                                • UX некоторых инструментов все-таки удобней. Тот же git
                                • Горячие клавиши. Есть предустановленные. Мне как бывшему пользователю NetBeans, наличие его раскладки греет душу

                                В целом, шторм ощущается именно как IDE — полноценная среда для разработки, в которой есть все, а чего нет — можно доставить плагином.
                                Я много раз пробовал в VSCode, но в конечном счете он как был, так и остался для меня редактором. Да, с плагинами можно подтянуть его за уши, но воткнув в него столько плагинов, чтобы он хоть как-то походил на IDE, приходишь к выводу что шторм не такой уж и медленный а UX не такой уж и ужасный. Это тот момент, который часто опускают любители VSCode.

                                  0

                                  Пока настроишь vscode, перебрав глючные и неработающие плагины, настроишь их хоткеи, выработаешь привычки по их использованию — в webstorm уже проект напишешь

                                    0
                                    интеллисенс

                                    Вот тут в точку. Шторм не юзал, но в с пайчармом VSC тяжело тягаться. Особенно в фреймворках вроде Django, там интелисенс от VSC вообще ничего не делает.
                                  0
                                  это некоторая тормознутость, вызванная видимо тем, что там нормальный интеллисенс

                                  Тормознутость есть, но это не только интеллисенс, но еще и JavaScript. WebStorm пытается много всего проанализировать, а с типизацией js это все не так просто сделать в принципе. Поэтому попытка быть «умным» сказывается на производительности иногда. В старшем брате IDEA в этом плане все дела обстоят лучше просто потому, что выстраивать связи на строгой типизации проще.
                                    0

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

                                      0
                                      В новом шторме все довольно лаконично стало + можно настраивать. Темы есть и темные, а также неплохие шрифты и т.д.
                                      но я разбивался об миллиард и одну кнопочку

                                      Тут, как говорится, или шашечки или ехать. Мне в первую очередь нужен удобный функционал, а потом внешний вид. Вообще, это на любителя, конечно же. Но у меня не возникает боли при виде последнего шторма.
                                        0
                                        Я пользуюсь Rider, но, насколько мне известно, у всех IDE от JetBrains единый механизм тем. Так вот, есть что-то вроде маркетплэйса с темами, там есть рейтинг, скрины, вот это всё. Нашёл там тему One Dark с хорошим рейтингом, сижу, радуюсь)
                                +2
                                Только вопрос — можно ли как-то использовать CSS Peaks, если работаешь с css-modules и задание классов в тэгах выгладит как
                                <div className={styles.SomeClass}>
                                Или здесь наука бессильна?
                                  0
                                  Не работал с CSS modules… Возможно, там вообще на уровне js/ts авто дополнение должно работать.
                                +4

                                Змейки нет? Нахрен! :)

                                  0
                                  я тоже почему то ожидал интеграцию сбербанка и хабра прямо в студию
                                  –3
                                  А в чем прелесть этого редактора?
                                  Знакомые js-ники его любят. И не могу понять, за что. Среди профессиональных программистов на «взрослых» языках ни знаю ни одного, кто бы использовал всерьез VS Code. Для редактора он тяжеловесен (ибо Electron и все вытекающие), а до полноценной IDE не дорос.
                                    +2
                                    это вы еще идею не запускали)
                                    а если серьезно, то не только js ники, vscode отличный легкий редактор, в нем и питон/голанг/терраформ вполне хорошо пишется.
                                      0
                                      Что касается тяжеловесности, всё относительно. Я до VsCode довольно долго пользовался Sublime (он практически перестал развиваться с какого-то момента), некоторое время Webstorm (мне показался громоздким и запутанным). По моим субъективным ощущениям, VsCode где-то между ними двумя. Тем и нравится, собственно, что это просто очень навороченный редактор, который можно заточить под себя. А не что-то большее.
                                      Короче говоря — некая золотая середина.
                                      p.s. использую для js и ассемблеров.
                                        +1
                                        использую для js и ассемблеров

                                        Интересный у вас набор.

                                          +2
                                          Одно для работы, второе для души (условно говоря :)
                                          Вообще, могу сказать, что для ассемблеров VsCode вполне популярен. Народ пишет в нём очень серьёзные проекты. Если посмотреть в расширения то, например, есть аж целых три (от разных авторов) для очень специфичного Kick Assembler. У самого популярного из этих расширений — 6 тыс. инсталляций.
                                        +1

                                        Очень быстр. С npm дружен "в дёсны". Легко расширяем, поэтому море плагинов с открытым кодом. Свой запилить на раз-два.
                                        COBOL 60-летний достаточно взросл? Open mainframe project и IBM преподают курсы на базе VSCode.

                                          +1
                                          Еще в нем просто отличная поддержка TS и писать там код для AWS CDK на TS просто праздник какой-то (кто писал шаблоны для CloudFormation на yaml/json — тот понимает мой боль).
                                            0

                                            А ws не пробовали? Я просто пока не могу понять чем поддержка ts в vscode лучше чем ws. Автодополнение работает и там и там. А вот переименовать свойство сразу во многих местах, включая например те которые находятся в Omit у меня дейтище мелкомягких не смогло. Причём это самое изменение свойства в ws работает просто везде где только видно.

                                              0
                                              Нет, не пробовал — для моих задач VSCode за глаза.
                                            +1
                                            Бесплатный, открытый, есть всё нужное?
                                              +1

                                              Отлично работает для .net core. Вообще VSC хорошо подходит для языков с обширным туллингом.
                                              Основная проблема VSC, как ты Гамма не старался это исправить, это все тот же eclipse. Чем больше плагинов, тем хуже все работает и сложнее настраивать

                                              –2
                                              Одно из различий между очень хорошими и хорошими программистами заключается в том, какие инструменты они используют.

                                              Это точно. Очень хорошие отлично выполнят работу с любыми иструментами, просто хорошие могут и не справиться без инструментов.

                                                –1

                                                Опять подборка бессмысленных плагинов. Самые полезные:


                                                • gitlens
                                                • eslint
                                                • Закладки (не помню как пишется)
                                                • для uppercase / lowercase (тоже не помню название)

                                                остальные на доп языки или синтаксис.

                                                  0
                                                  Еще пара полезных расширений:

                                                  — IntelliJ IDEA Keybindings — для тех, кто привык к горячим клавишам, как в IntelliJ IDEA;

                                                  — Syncing — синхронизация настроек VS Code между разными ПК (lj сих пор не привык к отсутствию привычного импорта-экспорта настроек как в IDEA);
                                                    0

                                                    Сложно ли переходить из идеи? И почему решились на такой шаг? Второй год думаю, закончится лицуха — посталю VSCode. Но приходит время, лицуха дохнет — хватаюсь за голову. Нужно перетащить все настройки, деббаггеры, бызы данных и прочую хрень… На вскидку не меньше недели адаптации. Забиваю и продливаю лицуху :)

                                                      0
                                                      VSCode — отличный редактор, но больше пользуюсь несколькими JetBrain-овскими (и на работе, и продлеваю свою лицензию ежегодно). Смотрю как коллеги работают на VSCode (успешно, но с усилием и трюками) и как-то не хочется на все это постоянно отвлекаться.
                                                      Однако для программирования в контейнерах через SSH — VSCode пока наиболее доступен.
                                                        0

                                                        Да я и не переходил. Когда учил Java, присматривался к Pyton, — использовал Intellij IDEA и PyCharm.


                                                        Потом Android — соответственно, Android Studio с теми же горячими клавишами.


                                                        Сейчас смотрю на Flutter — там уже выбор, Android Studio или VSCode. Выяснилось, что VSCode мне не очень удобен, именно в силу сложившихся привычек. Продолжаю использовать Android Studio. Но все это — чисто хобби.


                                                        А вот на работе мне часто нужен PowerShell — и там я с удовольствием пользуюсь VSCode. Но горячие клавиши пришлось перенастроить, чтобы не ломать привычки. Сначала правил руками, потом нашел это расширение.

                                                        0
                                                        Кстати, синхронизацию настроек недавно встроили в VsCode
                                                          0
                                                          синхронизация в vscode «из коробки», без плагинов
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                            +1
                                                            Я уж думал, там будет видеоплеер с браузером и торрент-клиентом. Вот тогда я бы действительно оттуда не выходил.
                                                              0

                                                              Такое только в EMACS… ;)

                                                              +3
                                                              Вы хотя бы пишите, что это очередная* подборка для фронтенда. Вполне можно собрать десяток расширений, которые пригодятся всем разработчикам, а не только фронтендерам. Например GitLens, TabNine, wakatime и прочие.

                                                              Если вам нравится чистый код, то вам, определённо, придётся по душе расширение Beautify.

                                                              А чем не устраивает стандартное форматирование в vs-code?

                                                              * — раз, два, три, четыре, пять, шесть, семь… И это все только от вашего блога.
                                                                0

                                                                И ни одного упоминания инструментов рефакторинга! Извините, но что за write only проекты люди в vscode пишут, если нет возможности даже банально поменять местами два аргумента или вынести пару методов в отдельный класс?

                                                                  0
                                                                  Все эти плагины языкоспецифичны, поэтому и не приводят.
                                                                  0
                                                                  TabNine просто мастхев, очень сокращяет написание кода, И поговаривают (сам видел только раз на стриме) что про версия настолько умна, что прямо формирует готовые варианты кода из вашего же кода как подсказку к авто дополнению.

                                                                    0
                                                                    Я взял про-версию в бета, когда она была бесплатная, и подтверждаю – это просто какая-то магия. Рекомендую!
                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                      0

                                                                      Хм, не удивили, я по-прежнему с pycharm никуда не собираюсь уходить, поддержка питона на vscode так себе.

                                                                        0
                                                                        Night Owl, многими программистами, засиживается до поздней ночи
                                                                        *разработчик выбирает за основу синие холодные оттенки*
                                                                          0
                                                                          О, прям как в vim! Просто шутка, не бейте
                                                                            0

                                                                            Статья выглядит как описание базового функционала продуктов компании jetbrains

                                                                              0
                                                                              Стоит Night Owl уже год советую всем достаточно удобно и глаза не режет
                                                                                0
                                                                                А как передать правильно 'form-parameter' в REST Client?
                                                                                  0
                                                                                  Практически все расширения для веб в статье. Так что я точно захочу выйти :)
                                                                                  А вообще этот редактор для средних/тяжелых проектов — странный выбор. Для простых сойдет, как-то сам писал на go в нем свой пет-проект.

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

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