Самые полезные расширения для visual studio code
Обновлено: 07.07.2024
Представляем вашему вниманию подборку 15 расширений для Visual Studio Code (VSCode), которые пригодятся программисту любого уровня.
Для тех, кто не в курсе, Visual Studio Code – это бесплатный и кроссплатформенный текстовый редактор, созданный компанией Microsoft. Он достаточно быстро стал «народным любимцем», ввиду его высокой производительности и обильного функционала.
Как и большинство современных IDE, VSCode имеет перманентно развивающийся рынок устанавливаемых дополнений, расширяющих исходные возможности редактора. Для того, чтобы разобраться, на какие именно плагины стоит обратить внимания, ресурс «Библиотека программиста» представляет вашему вниманию подборку 15 плагинов для Visual Studio Code, которые будут полезны любому программисту.
По умолчанию, Visual Studio Code не предусматривает возможности открывать файл в любом выбранном браузере. Данное расширение не только добавляет функцию Открыть в браузере по умолчанию, но также позволяет открывать файлы в любом имеющемся у вас браузере (Firefox, Chrome, IE).
[video width="768" height="372" mp4="https://media.proglib.io/wp-uploads/2017/07/open-in-browser.mp4"][/video]
Quokka – это утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода. Она выдает вам результаты выполнения функций и посчитанные значения переменных. Расширение легко настроить, и оно запускается из того же ящика, что и JSX или Typescript проекты.
[video width="768" height="348" mp4="https://media.proglib.io/wp-uploads/2017/07/quokka.mp4"][/video]
Быстро вставляйте случайные данные при помощи знаменитой библиотеки Javascript Faker. Вы можете вставлять произвольные имена, адреса, изображения, телефонные номера и даже отрывки известных литературных произведений. Каждая категория имеет свои подкатегории, что позволяет вам выбрать наиболее подходящий вариант.
[video width="768" height="388" mp4="https://media.proglib.io/wp-uploads/2017/07/faker.mp4"][/video]
С этим плагином вы можете отслеживать определения CSS классов и id таблиц стилей. Для этого просто достаточно кликнуть правой кнопкой мыши на селектор в вашем HTML файле и воспользоваться функцией Перейти к определению или Подсмотреть определение.
[video width="768" height="322" mp4="https://media.proglib.io/wp-uploads/2017/07/css-peek.mp4"][/video]
Это расширение упрощает работу с HTML файлами, избавляя вас от необходимости прописывать теги head и body вручную. Просто наберите в пустом файле html, нажмите на Tab, и VS Code сам сгенерирует шаблон вашего документа.
[video width="768" height="422" mp4="https://media.proglib.io/wp-uploads/2017/07/html-boilerplate.mp4"][/video]
На сегодняшний день, Prettier – самый популярный редактор кода в мире веб-разработки. Он позволяет приводить код, написанный несколькими людьми, к единообразному виду. В настройках Prettier можно установить автоматический запуск, что позволяет моментально форматировать JS и CSS документы.
[video width="1300" height="796" mp4="https://media.proglib.io/wp-uploads/2017/07/prettier.mp4"][/video]
Небольшой плагин, который даёт вам возможность получать краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как этот цвет выглядит, а также получить всю информацию о трансляции данного цвета в разные форматы (hex, rgb, hsl и cmyk).
[video width="768" height="366" mp4="https://media.proglib.io/wp-uploads/2017/07/color-info.mp4"][/video]
Это расширение привносит в VS Code возможность работать с SVG файлами. С помощью SVG Viewer, вы можете редактировать SVG файлы, конвертировать их в PNG и создавать data URL схемы.
[video width="768" height="390" mp4="https://media.proglib.io/wp-uploads/2017/07/svgviewer.mp4"][/video]
[video width="768" height="378" mp4="https://media.proglib.io/wp-uploads/2017/07/todo-highlight.mp4"][/video]
Небольшое дополнение, добавляющее в VS Code поддержку около 20 популярных шрифтов, в частности, Font Awesome, Ionicons, Glyphicons, and Material Design.
[video width="768" height="348" mp4="https://media.proglib.io/wp-uploads/2017/07/icon-fonts.mp4"][/video]
Minify является утилитой, предлагающей массу возможностей по оптимизации и сжатию размеров кода. Minify работает с HTML, JS и CSS файлами и также отлично сочетается с такими плагинами, как uglify-js, clean-css и html-minifier.
[video width="768" height="370" mp4="https://media.proglib.io/wp-uploads/2017/07/minify.mp4"][/video]
Так, пришло время немного расслабиться. Если все рассматриваемые до этого расширения были ориентированы на какое-то практическое применение, то эта утилита позволяет немного побаловаться с регистрами. По умолчанию, VS Code имеет только функции приведения к верхнему и нижнему регистру, но, установив себе Change Case, вы получите доступ к довольно обширному количеству регистров, к примеру, змеиный регистр, верблюжий регистр и прочее.
[video width="768" height="328" mp4="https://media.proglib.io/wp-uploads/2017/07/change-case.mp4"][/video]
Очень полезный инструмент, который позволяет вам работать с регулярными выражениями прямо в текстовом редакторе. Он принимает на вход два регулярных выражения и выдаёт результаты сравнения. Принцип работы чем-то похож на RegExr.
[video width="768" height="364" mp4="https://media.proglib.io/wp-uploads/2017/07/regex-previewer.mp4"][/video]
VS Code поддерживает большое количество языков и Фреймворков, но далеко не все. Если по каким-то причинам, используемая вами технология не попала в этот список, то вы всегда можете скачать нужное вам расширение с поддержкой таких приятных фич, как автозаполнение, правильные отступы и тому подобное.
Вот и дошли до самого вкусного. Ведь вы собираетесь много работать в VS Code, так почему бы для начала не сделать его красивым? Есть тонны отличных тем, но мы отобрали 4 фаворита:
Все от опытных разработчиков до начинающих джунов хотят упростить себе жизнь. Правильные инструменты могут помочь с этим.
Если в качестве среды разработки вы используете Visual Studio Code, вам повезло. Вы можете установить кучу плагинов и облегчить себе жизнь по максимуму.
Плагины очень влияют на продуктивность и подход к работе. Именно это мы обсудим ниже.
«Сперва мы меняем инструменты, а потом они меняют нас»
— Джефф Безос
Все плагины бесплатны и доступны на Visual Studio Marketplace.
Visual Studio Intellicode
Это самый часто скачиваемый плагин для Visual Studio (более 3 200 000 скачиваний). И, на мой взгляд, самый полезный.
Этот плагин создан, чтобы помогать разработчикам писать код. Он поддерживает огромное количество языков программирования. Visual Studio Intellicode использует методы машинного обучения. Он ищет и анализирует шаблоны, используемые в многочисленных проектах GitHub с открытым исходным кодом, и предлагает их вам, когда вы пишите код.
Статья переведена при поддержке компании EDISON Software, которая разрабатывает приложения и сайты, а также инвестирует в стартапы.
Git Blame
Время от времени вам нужно знать, кто написал определенный кусок кода. Git Blame вам в помощь. Git Blame сообщает вам, когда и кем редактировалась каждая строка файла в последний раз.
Это полезная информация, особенно когда вы работаете с ветвями функций. Так как Git Blame сообщает вам, в каком коммите (то есть в какой ветке) была изменена строка кода, вы знаете, какой тикет вызвал это изменение. Это поможет вам лучше понять причины изменений.
Prettier
Prettier — один из лучших плагинов для разработчиков, которым необходимо следовать четко сформулированному набору правил при разработке. Это замечательный плагин, который позволяет вам использовать пакет Prettier. Prettier — отличный инструмент для структурирования кода.
Prettier совместим с JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL и другими современными инструментами и позволяет правильно форматировать код.
JavaScript (ES6) Code Snippets
Каждый разработчик, который хоть немного старается быть в теме, вероятно, работал с одним из стеков JavaScript. Неважно какой фреймворк вы предпочитаете. Общий код в разных проектах должен упростить вам жизнь.
The JavaScript (ES6) code snippets — удобный плагин, который предоставляет некоторые очень полезные фрагменты кода JavaScript для ленивого разработчика. Он связывает стандартные вызовы функций с горячими клавишами. Как только вы с этим разберетесь, ваша продуктивность увеличиться в разы.
Как вы, наверное, уже догадались, этот плагин помогает разработчикам, которые работают с таблицами стилей. Как только вы начнете создавать таблицы стилей для своего приложения, вы определенно захотите использовать этот плагин. Sass поддерживает подсветку синтаксиса, автозаполнение и форматирование.
Path Intellisense
Path Intellisense — верный способ увеличить вашу продуктивность во время написания кода. Если вы работаете над многими проектами одновременно и используете слишком много разных технологий, вам наверняка понадобится удобный инструмент, который сможет запомнить для вас имена путей файла. Этот плагин сэкономит вам кучу времени, которое в противном случае было бы потрачено впустую на поиск нужного каталога.
Path Intellisence задумывался как простое расширение для автозаполнения имен файлов. Но с тех пор он стал ценным помощником в наборе инструментов большинства разработчиков.
Debugger for Chrome
Необязательно уходить из Visual Studio Code, если нужно дебажить JavaScript. Debugger for Chrome, выпущенный Microsoft, позволяет отлаживать исходные файлы непосредственно в Visual Studio Code
ESLint
Плагин ESLint встраивает ESLint в Visual Studio Code. ESLint это инструмент, который статически анализирует ваш код, чтобы быстро находить проблемы.
Большинство проблем, обнаруженных ESLint, могут быть исправлены автоматически. Исправления ESLint учитывают синтаксис, и поэтому вы не столкнетесь с ошибками, вызванными традиционными алгоритмами поиска и замены. Кроме того, ESLint гибко настраиваемый.
SVG Viewer
Расширение SVG Viewer добавляет ряд утилит для работы с SVG в Visual Studio Code. Этот плагин позволяет отображать файлы SVG и просматривать их внешний вид, не выходя из редактора. Кроме того, этот плагин позволяет конвертировать файлы в PNG и создавать URI схемы данных.
Themes
Темы — последние в списке, но не по значимости. Поскольку вы будете смотреть на свой редактор каждый день, почему бы не сделать его максимально красивым? Существует множество плагинов для настройки, которые меняют цветовую схему и значки на боковой панели. Некоторые популярные темы доступны бесплатно: One Monokai, One Dark Pro и Material Icon.
Давайте поговорим о Code — Visual Studio Code.
Наш VSC будет пятирогим лазеростреляющим единорогом —после того как мы снабдим его самыми полезными расширения, которыми я пользуюсь каждый день.
О, а если вы еще не используете замечательный редактор VSC, под картинкой выше есть ссылка на официальный сайт, с которого его можно загрузить.
Самая эпичная тема для Visual Studio Code:
Автома т ически находит, парсит и дополняет названия методов и событий для всех доступных файлов. Поддерживает Typescript и TSX.
Это расширение отобразит в редакторе размер импортируемого пакета в одной строчке с соответствующим методом. Расширение использует Webpack с babili-webpack-plugin для обнаружения импортируемого объекта и оценки его размера.
Простое расширение, которое делает отступы более читабельными.
Расширение VSCode, которое автоматически дополняет название CSS-класса для HTML-атрибута class на основе определений, найденных в вашей рабочей области или внешних файлов, на которые ссылается элемент link .
Простой способ предпросмотра SVG.
Не могу жить без него — пакет VSCode для форматирования JavaScript / TypeScript / CSS с использованием Prettier.
Подсказки, отладка и встроенные команды для React Native.
Это расширение позволяет в VSCode использовать горячие клавиши Sublime Text 3. Попробуйте потестировать его, открыв консоль сочетанием клавиш:
cmd ⌘ + P — Mac
ctrl + P — Windows
В этой консоли можно быстро перейти к файлам, а также, если добавить символ > перед поисковой строкой, можно искать действия, такие как переключение встроенного терминал, установку расширения и так далее.
Очень удобная штука для тех из нас, кто привык к ST3. 🎉
Плагин VSCode, который автоматически дополняет имена модулей npm в операциях импорта.
Добавляет подсветку синтаксиса и поддержку разметки HTML внутри строк JavaScript и TypeScript, как это используется в lit-html и других фреймворках.
Это расширение предназначено для подсветки парных открывающих или закрывающих тегов — функциональности, отсутствующей в VSCode, но которая должна бы быть встроена в редактор из коробки.
Это расширение перезагружает встроенные возможности Visual Studio Code по работе с Git. Оно в наглядном виде предоставляет информацию об авторстве изменений в Git, а также облегчает перемещение по репозиториям и позволяет отслеживать историю изменений файлов или веток, использовать команды сравнения кода и многое другое.
Git Project Manager (GPM) — это расширение Microsoft VSCode, которое позволяет вам открыть новое окно на основе git-репозитория непосредственно из VSCode.
Просмотр логов git и истории изменения файлов и сравнение веток или коммитов.
Удобный способ создания, дублирования, перемещения, переименования и удаления файлов и каталогов.
Настраиваемое расширение для раскрашивания парных скобок. Крайне полезно при работе с большим количеством обратных вызовов.
Это расширение подсвечивает CSS / веб-цвета, найденные в вашем документе.
Переход к CSS-свойствам идентификаторов (id) и классов непосредственно из файлов HTML. Поддерживает переключение и между файлами и быстрый переход из одного в другой.
Инструмент для отладки JavaScript-кода или любого другого кода в браузере Chrome.
Выполняет JavaScript-код в консоли параллельно с тем, как вы его пишете. (Полезно для быстрых демонстраций).
Мгновенно выделяет и удаляет конечные пробелы.
Это расширение пригодится всем, кто пишет на TypeScript и хочет, чтобы VSC организовал импорты за него.
Метрики, инсайты и отслеживание времени, автоматически генерируемые на основании статистики вашей работы по программированию.
Поддержка Vue для VSCode
Запустите фрагмент кода или целый файл сразу в нескольких языках.
Расширенная поддержка автозаполнения и рефакторинга кода на PHP.
Иконки для редактора VSCode.
Пользуйтесь Jest от Facebook с удовольствием.
Сниппеты кода для разработки на React.js в синтаксисе ES6.
Благодарю вас за то, что прочитали эту статью! Переходите по ссылке в твиттере, чтобы узнать о других расширениях VSCode. Знаете еще какие-то полезные плагины, которые не упомянуты здесь? Пожалуйста, пишите их в комментариях❤
Если статья оказалась полезной для вас, не забудьте поаплодировать оригиналу и переводу. Вы также можете подписаться на твиттер автора , где он часто публикует другие полезные подборки.
Я просмотрел несколько статей, посвященных расширениям VS Code. Должен сказать, не все эти расширения произвели на меня хорошее впечатление, однако я все же отобрал несколько и пополнил список используемых мной плагинов.
Я думаю, эти расширения будут полезны для любого фронтенд-разработчика, который хочет по максимуму использовать возможности Visual Studio Code. Некоторые из расширений в моем списке относятся к самым рекомендуемым, так что они наверняка у вас уже есть, но какие-то, возможно, будут для вас новостью.
Легкость чтения
Beautify – облегчает чтение HTML, CSS и JS путем де-минимизации и применения подходящих отступов в вашей ужасной разметке.
Better Comments – создание более дружественных к человеку комментариев в вашем коде. Я использую его все время. В нашей команде разработчиков это обязательное расширение.
Bookmarks – помогает перемещаться по вашему коду, легко и быстро передвигаясь между важными позициями. Я использую это расширение в связке с MetaGo, чтобы не задействовать мышь при написании кода.
MetaGo – для быстрого перемещения курсора и выделения при помощи клавиатуры. Это расширение навсегда изменило мой подход к использованию VS Code. Серьезно.
Log File Highlighter – название говорит само за себя. Предоставляет поддержку .log-файлов, благодаря чему вы сможете читать дампы логов без крови из глаз.
Guides – теперь вам не нужно закрывать и открывать заново все элементы для определения их вложенности. Этот инструмент особенно хорошо работает с уже упомянутым Beautify и Rainbow Brackets, о котором говорится ниже.
Rainbow Brackets – подсвечивает текущий набор скобок, в котором вы находитесь, а для лучшего определения местоположения еще и расцвечивает прочие скобки в другие цвета. Это прекрасное расширение VS Code для JS-разработчиков.
Image Preview – предоставляет возможность предпросмотра изображения при наведении курсора. Это позволяет легко проверить, на правильное ли изображение поставлена ссылка.
GitLens – безусловно, одно из самых широко используемых расширений. GitLens это просто must have для VS Code. Он существенно улучшает работу с Git. Для лучшего покрытия можно использовать GitLens вместе с расширениями .gitignore и .diff.
Более быстрое написание кода
CSS Peek – вдохновением для этого расширения послужила похожая фича Brackets – CSS Inline Editors. Теперь одна из моих любимых функций Brackets есть и в VS Code.
Stylelint – мы контролируем наш JS на соответствие стандартам, так почему же не делать того же с LESS/SASS/CSS? Отличный инструмент для быстрой чистки небрежно написанного CSS.
Live Sass Compiler – конечно, у вас есть Gulp, Webpack, NPM, Grunt, но иногда вам нужно компилировать/транспилировать ваши SASS/SCSS файлы в файлы CSS в режиме реального времени, с «живой» перезагрузкой браузера. Для этого и нужен Live Sass Compiler.
Live Server – лучший локальный сервер разработки с функцией живой перезагрузки для статических и динамических страниц (даже PHP!).
Version Lens – обновление зависимостей до последней версии для определенного package.json.
DotENV – добавляет поддержку и подсветку .env-файлов. Я очень полагаюсь на это расширение VS Code, когда заливаю код на Heroku, Netlify и т. п.
Красивые скриншоты
Polacode – подсвечивает код и делает действительно красивый снимок с цветами вашей темы. Отлично подходит для создания руководств или документации, где вы хотите приложить примеры кода.
Множественные экземпляры
Settings Sync – позволяет синхронизировать настройки, сниппеты, темы, иконки файлов, запуск, сочетания клавиш, рабочие окружения и расширения между несколькими экземплярами VS Code. Я использую это расширение для синхронизации всего вышеперечисленного на моем ноутбуке, рабочем и домашнем компьютерах. А делается все с помощью всего двух команд.
EditorConfig – перезаписывает пользовательские настройки и настройки рабочего окружения, заменяя их настройками, найденными в файлах .editorconfig. Я использую это расширение VS Code для применения специфических правил в отдельных проектах на машинах всей команды.
Надеюсь, эти расширения пригодятся вам в вашей ежедневной работе с VS Code! Если знаете и другие полезные плагины, поделитесь в комментариях.
Читайте также: