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

15 ИЮНЯ 2022

------------------------------------------------------------------------

Наш телеграм-канал: t.me/@mailsgun_online

Youtube: youtube.com/@mailsgun_online

------------------------------------------------------------------------

…Даже простейшие инструменты могут давать людям возможность делать великие дела.
Биз Стоун, «Решайся! Заряд на создание великого от основателя 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 пользуетесь вы?

  • PATRICK17

    сегодня в 16:21

    +5

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

    • Justerest

      сегодня в 17:04

      0

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


  • Diaskhan

    сегодня в 16:27

    0

    На мой взгляд Insomnia лучший рест клиент! интуитивный и не перегруженный!

    • Justerest

      сегодня в 17:08

      0

      Это расширение? Или отдельная прога? Пользовались REST Client? В принципе, единственное неизвестное мне расширение из подборки.


  • lrrr11

    сегодня в 16:37

    –2

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

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

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

  • Justerest

    сегодня в 16:57

    0

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

  • Justerest

    сегодня в 17:13

    0

    CSS Peak — классная штука. Но конфликтовал с Angular файлам, пришлось удалить. Не знаю, пофиксили уже или нет.

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

    Извините, если много спама к одному посту


    • dimoff66

      сегодня в 17:27

      0

      Напротив, спасибо, только недавно с Jet Brains перешел на VSCode и вся эта информация очень ценна.

      • Justerest

        сегодня в 17:41

        0

        О! А я наоборот, не могу перейти в WebStorm) Он манил меня некоторыми фичами, но UI/UX… Чувствую себя у штурвала космического корабля.

        По мне, главное, при начале работы с VSCode, настроить авто форматирование при сохранении, и авто исправление ошибок. Исправление ошибок делают расширения Eslint, Tslint. Настроив это, VSCode превращается в пушку, которая пишет код за тебя. (Предполагаю, что WebStorm умеет не хуже, но много раз встречал людей, у которых и половины функционала из VSCode не работало в платной WebStorm)


        • dimoff66

          сегодня в 17:58

          0

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

          • Justerest

            сегодня в 18:01

            0

            Поделитесь преимуществами, чтобы мне захотелось получше его пощупать. А я попробую аналогичную функциональность из VSCode привести. Чтобы и мне и вам)


            • dimoff66

              сегодня в 18:24

              0

              К сожалению не могу прямо сейчас вспомнить, три месяца назад, когда начал пользоваться, периодически натыкался на какие то неудобства при работе с кодом, которые storm сглаживал, но поскольку они были как писал выше некритичны, то сейчас пытаюсь вспомнить и воспроизвести и не могу, только общее ощущение, что vscode просто хорошая среда а storm настоящая конфетка, но может кто-то увидит ваш вопрос и перечислит по пунктам.


    • dimoff66

      сегодня в 17:30

      0

      Только вопрос — можно ли как-то использовать CSS Peaks, если работаешь с css-modules и задание классов в тэгах выгладит как

      <div className={styles.SomeClass}>

      Или здесь наука бессильна?

      • Justerest

        сегодня в 17:46

        0

        Не работал с CSS modules… Возможно, там вообще на уровне js/ts авто дополнение должно работать.

  • roller

    сегодня в 18:23

    +1

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

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

Source: habr1

Ну и напоследок напоминаю вам о нашем новом проекте vkserfing bot.