Наиболее полезные расширения для кода Visual Studio

Обновлено: 28.06.2024

В настоящее время Visual Studio Code широко используется для написания программного обеспечения. Он очень расширяемый, и есть много участников, которые создают для него полезные расширения, чтобы дать этому редактору сверхвозможности. Это не шутка, вы действительно можете ускорить свою разработку с помощью этих инструментов и увеличить вклад с товарищами по команде.
Вот мои 10 лучших расширений, которые вы должны попробовать в Vs Code:

Видео

Если вы предпочитаете смотреть видео, а не читать, вы можете посмотреть видео, которое я сделал по этой теме на моем канале YouTube:

Топ-лист расширений VsCode

10. Гитленс

GitLens — это расширение с открытым исходным кодом, которое сочетает в себе возможности Git и VsCode. Одной из лучших функций этого расширения является возможность визуализировать авторство кода с помощью аннотаций вины Git и линзы кода. Вы также можете перемещаться по истории файла вперед и назад, чтобы увидеть внесенные в него изменения. С претензией на текущую строку у вас есть возможность щелкнуть одну строку в коде, и вы можете увидеть последний коммит, который ее изменил, а также получить ссылку на запрос на вытягивание, который внес это изменение. В целом, действительно полезный инструмент, если вы используете git в качестве системы контроля версий.

9. Живой сервер

О, я бы очень хотел, чтобы это расширение существовало, когда я начал изучать веб-разработку. Он запускает легкий сервер nodejs и обслуживает ваш html-файл и все ресурсы из данного каталога. Кроме того, любые сохраненные изменения, которые вы вносите на свой веб-сайт, будут немедленно отражены в браузере, что обеспечивает действительно быструю и приятную работу разработчика. Вы можете найти эту функциональность в инструментах для современных фреймворков и библиотек, таких как Angular и React, но с этим расширением вы можете использовать те же функции в любом проекте веб-разработки.

8. Стоимость импорта

Вам знакомо это чувство, когда вы смотрите на сайт npm и видите классный пакет, сразу же устанавливаете его и импортируете в свой проект. Я тоже, проблема в том, что мы часто не думаем о накладных расходах, которые это может вызвать. Вот почему это небольшое расширение так важно. Это позволяет вам отслеживать размер импортируемых пакетов и библиотек, поэтому вы можете контролировать объем импортируемого кода. Особенно в веб-разработке вы должны следить за каждым байтом, который вы импортируете, поскольку они негативно повлияют на скорость загрузки вашего сайта, могут повредить пользовательскому опыту и даже рейтингу SEO.

7. красивее

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

6. Значки

Это не конкретное расширение, а набор расширений. Если вы установите расширение значков, VsCode будет отображать маленькие значки перед именами ваших каталогов и именами файлов. Каждое расширение файла будет иметь собственный значок, который в 10 раз упростит навигацию по коду и поиск файла или папки, которые вы искали. Даже каталоги могут иметь свои специальные значки, основанные на их именах и назначении. Мой любимый вариант — это Material Icon Theme, но есть и другие действительно классные, такие как vscode-icons, Simple Icons, Material Theme Icons. Узнайте, какой из них подходит вам больше всего.

5. MarkDown все в одном

Написание документации — часть работы разработчика, нравится вам это или нет. Наиболее часто используемая разметка для написания документации или даже сообщений в блогах — это уценка. Все в одном Markdown делает этот процесс более приятным, предоставляя полезные ярлыки, функции автозаполнения и предварительного просмотра в реальном времени. Это действительно ускоряет написание документации, поэтому вы можете вернуться к разработке новых функций гораздо быстрее.

4. Улучшенные комментарии

Улучшенные комментарии помогут вам писать более понятные и понятные комментарии. Комментарии помогают понять ваш собственный и чужой код. Это расширение помогает визуально упорядочить ваши комментарии, так что они будут более удобоваримыми. Вы можете разделить свои аннотации на выделенный текст, ошибки и предупреждения, вопросы, зачеркивание и TODO. Благодаря визуальному разделению этих отформатированных аннотаций вы не пропустите ни одного комментария, который обязательно нужно прочитать.

3. Фрагменты

Это опять же не отдельное расширение, а набор расширений. Использование фрагментов кода — действительно хороший способ сэкономить время при разработке и повысить производительность.Например, если вы используете реакцию и устанавливаете сниппет ES7/React/redux/GraphQL/React-native, вы можете просто ввести «rfc» и нажать Enter, чтобы импортировать React и создать функциональный компонент. Вы также можете найти расширения фрагментов кода для angular, vue, python, html и т. д.

2. Интеллектуальный смысл пути

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

1. Автоматическое переименование тега

Это обязательное расширение для веб-разработчиков. Как следует из названия, он автоматически переименовывает второй тег, если изменяется первый, и наоборот. В больших проектах, где у вас есть вложенные теги и элементы, ручное обновление может быть трудным и утомительным. И самое замечательное, что он работает с JSX, так что вы можете использовать его и с React!

Где вы можете узнать больше от меня?

Я создаю образовательный контент, посвященный веб-разработке, на нескольких платформах, не стесняйтесь 👀 ознакомиться с ними.

Я также создаю информационный бюллетень, в котором делюсь созданным мной образовательным контентом за неделю или две недели. Никакой ерунды💩 только образовательный контент.

Расширения для вашей IDE незаменимы для ускорения вашей работы без снижения качества результатов. Учитывая, что Visual Studio Code — самая популярная IDE, вот 20 расширений VSCode, которые сделают вас более продуктивным разработчиком. Эти расширения в основном предназначены для веб-разработчиков, но есть и расширения общего назначения, которые пригодятся и всем остальным.

Вот какие расширения VSCode мы рассмотрим:

Синхронизация настроек

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

Таким образом, у вас будет доступ к предпочитаемой среде IDE с любого устройства, вместо того, чтобы программировать из обычной среды VSCode на новых устройствах или заново настраивать все вручную.

Сервер в реальном времени

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

Каждый раз, когда вы сохраняете свой код, вы сразу же видите изменения, отраженные в браузере. Вы будете намного быстрее замечать ошибки, и вам будет намного проще проводить быстрые эксперименты с вашим кодом.

Удаленное — SSH

Расширение Remote — SSH позволяет использовать любой удаленный компьютер с сервером SSH в качестве среды разработки. Это значительно упрощает разработку и/или устранение неполадок в самых разных сценариях.

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

Красивее

Тратьте меньше времени на форматирование кода

Prettier – это средство форматирования кода, которое особенно хорошо работает, если над одним проектом работает несколько человек, поскольку расширение обеспечивает единый стиль.

Вы можете настроить его таким образом, чтобы он форматировал код при каждом его сохранении, что значительно сокращает время, необходимое для форматирования кода.

Раскрашивание пары скобок

Все любят сочетать цвета

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

Также можно настроить пользовательские скобки и добавить цвет фона для активной области.

Автоматическое переименование тега

В то время как VSCode по своей сути выделяет совпадающие теги и сразу же добавляет закрывающие теги всякий раз, когда вы вводите открывающий тег, Auto Rename Tag автоматически переименовывает теги, которые вы изменяете.

Расширение работает с HTML, XML, PHP и JavaScript и избавляет от необходимости дважды менять имена тегов.

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

GitLens

GitLens дополняет возможности Git Visual Studio Code. Это мощное расширение позволяет вам увидеть, кто, почему и как строки кода изменились с течением времени (среди множества других функций).

GitLens — это расширение с широкими возможностями настройки. Если вам не нравится какой-либо параметр, вы можете легко отключить его в настройках.

История Git

Подобно GitLens, история Git представляет собой расширение VSCode, которое дает визуальное представление журнала git.Вам больше не нужно просматривать журнал git в терминале.

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

Просмотр CSS

Это расширение бесценно для разработчиков интерфейсов. Вдохновленный аналогичной функцией Brackets IDE, CSS Peek позволяет вам расширять ваши файлы HTML и ejs, чтобы отображать код CSS/SCSS/LESS в исходном коде.

Это также позволяет быстро перейти к нужному коду CSS, если вы знаете название класса или идентификатора.

Фрагменты кода JavaScript

Дополнительные функции JS

Хотя VSCode включает встроенный JS IntelliSense, JS Code Snippets расширяет возможности, добавляя множество триггеров импорта/экспорта, помощников классов и триггеров методов.

Расширение поддерживает JS, TypeScript, JS React, TS React, HTML и Vue. В VSCode Marketplace также легко доступны фрагменты кода для других разновидностей, таких как Angular.

Павлин

Изменить цвет экземпляра VSCode

Вот симпатичный. Peacock позволяет изменить цвет среды Visual Studio Code, чтобы вы могли быстро определить, на какой экземпляр вы только что переключились.

Раскрасить

Придерживаясь цветов, Colorize мгновенно визуализирует цвета CSS в файлах CSS/SASS/Less/. файлы. Это позволяет сразу увидеть, какие цвета и где используются.

Проверка орфографии кода

Хотя это не опасно для жизни, я предпочитаю, чтобы в моем коде не было орфографических ошибок. Code Spell Checker подчеркивает слова, которые не распознаются в файлах словаря.

Расширение доступно на многих языках и поддерживает жаргон, например медицинские термины.

Отладчик для Chrome

Отладка кода JS в VScode

Отладчик для Chrome, разработанный Microsoft, позволяет отлаживать код JS в VSCode. В отличие от отладчиков в других IDE, он на удивление плавный.

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

Шрифты значков

Icon Fonts предлагает фрагменты для различных шрифтов значков, включая популярный пакет значков Font Awesome v5.

Для тех из вас, кто не использует VSCode, этот пакет также доступен для Atom и Sublime Text.

Журнал Turbo Console

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

Выделить TODO

Мгновенно находите TODO в коде

Признаюсь. Я был виновен в том, что писал TODO в своих комментариях, чтобы затем полностью забыть о них. TODO Highlight делает их еще более заметными.

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

иконки vscode

Вы бы не подумали, что значки имеют большое значение, но они действительно имеют значение (по крайней мере, для меня). VSCode-icons добавляет красок и симпатичных маленьких значков в вашу IDE, которые мне очень понравились.

Предварительный просмотр регулярных выражений

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

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

Закладки

Добавьте закладки в свой код

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

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

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

Томас Де Мур

Еженедельник X-Team

Наш новостной бюллетень о программировании, продуктивности и вдохновении.
Будьте в курсе культуры X-Team.

При создании кода продуктивное рабочее пространство включает в себя не только поиск подходящего редактора кода. По умолчанию VS Code создается разработчиками для разработчиков. Согласно опросу StackOverflow 2021 года, 71,06 % всех респондентов используют Visual Studio Code в качестве предпочтительной IDE.

Что делает VS Code таким популярным, так это количество расширений, доступных в Marketplace. Сейчас в обращении более 30 000 расширений, поэтому возможности кажутся почти безграничными и в то же время огромными.

По данным WakaTime, инструмента учета времени для программистов, в 2020 году Visual Studio Code отработала более 18 миллионов часов разработки. Кроме того, на Visual Studio Code приходилось 46 % всего времени, отслеживаемого во всех редакторах, используемых разработчиками.

Какие расширения выбрать? Какие расширения лучше всего подходят для продуктивности? Версия кода? Эстетика? Форматирование и линтинг? Если вам это нужно, возможно, где-то в Marketplace есть расширение.

Здесь представлено более 40 расширений VS Code. Они подобраны, отсортированы и распределены по категориям, чтобы помочь вам повысить продуктивность и эффективность работы разработчика.

Производительность

С более чем полумиллионом загрузок на торговой площадке VS Code, GraphQL является многообещающим расширением плагина, за которым стоит следить. Популярность и внедрение самого GraphQL также растет, а это означает, что если вы когда-нибудь столкнетесь с ним для своего следующего проекта, расширение GraphQL для VS Code станет обязательным.

Этот плагин поддерживается официальным фондом GraphQL, что означает, что он активно поддерживается и поддерживает последнюю реализацию.

Tabnine — это больше, чем просто автозаполнение. Это уникальная функция автозавершения кода на основе искусственного интеллекта, которая повышает вашу продуктивность по мере того, как вы ее используете.

С этой настройкой вы можете запустить компьютер в облаке, централизовав рабочий процесс в одном источнике, и вам не нужно иметь исходный код на компьютере, на котором вы работаете.

Работаете на нескольких устройствах? Синхронизация настроек решает досадную проблему, связанную с тем, что ваше рабочее пространство недоступно для вас. С помощью Settings Sync вы можете переносить фрагменты, темы, значки файлов, привязки клавиш и расширения туда, где они вам нужны, с помощью GitHub Gists.

Самое приятное в Settings Sync то, что оно абсолютно бесплатное, с открытым исходным кодом и имеет более 2 миллионов установок.

Спонсируемый TabNine, Auto Rename Tag был впервые представлен на Marketplace в 2016 году. С тех пор число загрузок превысило 6 миллионов. Разработчики активно используют его для решения простой, но часто утомительной задачи по переименованию парных тегов HTML/XML. .

Мы все когда-то пытались отыскать пары тегов, особенно когда есть гнезда, > и логические условия, только для того, чтобы в отчаянии опустить руки из-за того, насколько это делается вручную. Тег автоматического переименования экономит время и рассудок разработчика.

Если вы работаете во внешнем интерфейсе, CSS – неотъемлемая часть рабочего процесса. По мере роста проекта ваш стиль будет соответствовать требованиям. CSS по своей природе линеен, что может разочаровать, особенно если вы хотите проверить стиль без необходимости прокручивать и просматривать все различные файлы, чтобы найти то, что вам нужно.

CSS Peek — это расширение VS Code, которое позволяет перейти к определению и символу CSS в рабочей области всего за несколько кликов.

Иногда вам не нужно запускать весь проект, достаточно лишь его небольшого фрагмента. Здесь на помощь приходит Code Runner. Этот подключаемый модуль VS Code поддерживает широкий спектр языков и может запускать выделение кода либо с помощью предопределенных сочетаний клавиш, либо с помощью мыши.

Он поставляется со встроенной поддержкой синтаксиса Kubernetes и имеет пять основных функций: проверку, структурирование документов, автозаполнение, дополнительную поддержку для отображения описаний, если они предусмотрены схемой, и средство форматирования.

Эстетический рабочий процесс

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

Давайте будем честными: в какой-то момент мы все потеряли скобки и скобки. Ситуация усугубляется, когда вы имеете дело с вложенностью и логическими условиями. Bracket Pair Colorizer решает проблему поиска пары скобок в нашем коде, добавляя к каждой паре разные цвета.

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

Иногда вам нужно открыть несколько экземпляров VS Code. Возможно, вы одновременно работаете над несколькими кодовыми базами или вам нужно быстро переключаться между проектами, не открывая и не закрывая их.

Благодаря цвету Peacock упрощает идентификацию рабочих мест. Все, что вам нужно сделать, это открыть рабочее пространство VS Code, нажать F1, чтобы открыть палитру команд, ввести Peacock и выбрать один из предопределенных цветов для вашего редактора.

Использование цветов – мощный инструмент повышения производительности. Когда он включен в ваш код, он может ускорить ваш рабочий процесс. Colorize создан с учетом CSS и помогает мгновенно визуализировать цвета CSS с помощью цветного фона для переменных CSS, переменных препроцессора, цветов hsl/hsla, кросс-браузерных цветов, exa, rgb, rgba и argb.

Он поддерживает стандартные CSS, SASS, LESS, post CSS, перо и XML.

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

Используете ли вы Font Awesome в своих проектах? Или вы используете иконки Android? Вы хотите создавать прототипы без необходимости быстро обращаться к документации? Icon Fonts – это рабочий инструмент для повышения производительности, который включает в себя автозаполнение и IntelliSense для добавления широкого спектра шрифтов значков в HTML-код вашего внешнего интерфейса.

Подключаемый модуль Icon Font, поддерживающий основные шрифты значков, такие как Creative Commons Icon Fonts, Font Logos и Bootstrap Glyphicons, необходим для продуктивной работы.

SASS — это отличный способ централизованного и организованного CSS. Тем не менее, это также может быть проблемой, когда у вас нет перезагрузки в реальном времени. Live SASS Compiler позволяет легко увидеть, как ваши изменения влияют на визуальный вывод.

Код, управление версиями и совместная работа

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

Git History – это подключаемый модуль расширения VS Code, который позволяет просматривать историю и с легкостью выполнять поиск коммитов, сообщений, веток, файлов и авторов. В дополнение к этому, он позволяет вам выбирать коммиты, сравнивать файлы, программный и аппаратный сброс, возвращать, объединять и перебазировать с помощью нескольких простых щелчков и команд.

Задумывались ли вы, сколько времени вы тратите на программирование? Несмотря на переход на удаленную работу, мы по-прежнему можем так же легко отвлекаться на такие жизненные вещи, как дети, доставка посылок и даже собака, — как мы, когда сидим в офисе среди коллег и импровизированных встреч. Code Time позволяет вам контролировать свою продуктивность, отслеживая ваше время, и может помочь вам определить, над каким проектом вы работаете больше всего.

Такие функции, как «Войти в непрерывный режим», помогут вам сэкономить время и отслеживать показатели разработки, чтобы отслеживать показатели кодирования в виде статистической тенденции.

Хотите поделиться фрагментом кода? Хотите, чтобы это выглядело профессионально? Polacode — это классный небольшой плагин, который позволяет вам делать «полароиды» вашего кода без необходимости использовать инструмент для обрезки. Вы выделяете нужный код, и автоматически создается отформатированный файл кода.

Docker — отличная идея, но держать в курсе всех ваших образов, хабов и реестров может быть сложно. Docker Explorer упрощает работу и напрямую подключается к Реестру контейнеров Azure для оперативного управления.

Итак, у вас есть код. Или, может быть, у вас есть контейнер. Удаленная разработка позволяет подключать, разрабатывать и развертывать среды. Этот подключаемый модуль, разработанный и выпущенный Microsoft, находится в активной фазе разработки и поддерживает подключение WSL, SSH и контейнеров для удаленной разработки приложений.

Форматирование и анализ

Если вы хотите быть бунтарем, Beautify – это альтернатива Prettier. Beautify установили более 7 миллионов раз. Это еще один надежный инструмент для улучшения качества кода, который анализирует и форматирует ваш код с минимальным вмешательством.

У всех нас есть рабочий список того, что нужно сделать в коде. Мы также часто оставляем заметки для себя и других в виде комментариев. Однако комментарии часто тускнеют и уходят на второй план. TODO Highlight — это плагин VS Code, который позволяет нам использовать комментарии в нашем коде для повышения производительности. Он работает, выделяя аннотации кода и сопоставляя их цветом с исходным списком дел.

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

Если вы работаете с данными, высока вероятность того, что вы также столкнетесь с электронной таблицей Excel в той или иной форме. Excel Viewer упрощает работу с данными Excel в редакторе VS Code, форматируя длинные строки, разделенные запятыми, в табличный формат. Это может творить чудеса с расширениями .csv, .tsv и .tab.

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

Отладка

Этот подключаемый модуль VS Code помог более чем 3 миллионам установленных пользователей выявлять орфографические ошибки до того, как они станут проблемой в рабочем процессе написания кода.

В Visual Studio Marketplace есть несколько отладчиков JavaScript. Надёжным расширением плагина, которое стоит проверить, является JavaScript Debugger. Этот отладчик JavaScript на основе DAP может отлаживать Node.js с помощью процессов, отображаемых в терминале.

Журналы консоли могут как повысить, так и снизить вашу продуктивность. Turbo Console Log — это активный плагин для VS Code, который позволяет вам выбирать переменную для предмета вашей отладки и автоматически добавляет сообщения журнала к ближайшей относительной строке. Это позволяет быстро выполнять отладку без написания кода console.log.

Регулярные выражения иногда могут сбивать с толку. Вот почему Regex Previewer — такой удобный инструмент расширения для вашей настройки VS Code. Он показывает совпадение регулярного выражения с параллельным окном с обновлением в реальном времени на основе вашего регулярного выражения.

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

npm, grunt, sass, yarn, docker и все, что вам нужно, можно эффективно и действенно выполнять с помощью Task Explorer. Этот плагин VS Code расширяет боковую панель и/или обозреватель возможностью запуска задач. Так что теперь вам не нужно выходить из рабочей области VS Code, чтобы что-то сделать.

Тестирование может быть ручным процессом, если не сложным. Пользовательский интерфейс TEST Explorer — это расширение, предоставляющее разработчикам пользовательский интерфейс для выполнения тестов в Visual Studio Code. Это расширение подключаемого модуля поддерживает множество языков и включает JavaScript, ABAP, C, C++, Exlir, Elm, Go, Haxe, Java, Python, Ruby, REST/GraphQL и другие популярные языки и реализации.

Для конкретного языка

JavaScript повсюду, а сниппеты ES7, React, Redux и GraphQL охватывают почти все, что вам нужно, чтобы эффективно начать разработку современных приложений. Это расширение плагина является отличной альтернативой любым другим фрагментам кода на основе JavaScript, которые вы, возможно, уже используете.

Если вы работаете над проектом React, фрагменты кода Reactjs могут помочь улучшить ваш рабочий процесс и скорость кода, предоставляя аккуратно упакованные и предварительно написанные шаблоны для использования. Все, что вам нужно сделать, это начать вводить триггерные команды, и вы получите полезные фрагменты кода.

Что такое современная разработка приложений без HTML и CSS? Поддержка HTML CSS — это ваш лучший инструмент Intellisense для HTML и CSS в VS Code. Функции включают завершение атрибутов идентификатора и класса, связанные и встроенные таблицы стилей, наследование и проверку селекторов CSS.

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

Нет никаких сомнений в том, что VSCode является одним из лучших редакторов кода на рынке сегодня, и в отличие от некоторых других редакторов кода, которые вы, вероятно, пробовали, он явно разработан для современного стека технологий и обладает огромным качеством жизни. функции, о необходимости которых вы, вероятно, никогда не подозревали.

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

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

Итак, без лишних слов, давайте взглянем на лучшие расширения VSCode на 2021 год.

Квокка.js

Квокка.js

Если вы предпочитаете язык JavaScript или TypeScript, вам понравится Quokka.js. Это расширение предназначено для ускорения разработки за счет отображения значений времени выполнения в вашей среде IDE по мере написания кода, чтобы вы могли сосредоточиться на написании кода, а не создавать собственные конфигурации, просто чтобы попробовать что-то новое.

Это простое и легкое расширение, которое идеально подходит как для опытных разработчиков, так и для новичков. Это также бесплатно для использования сообществом, но если вы являетесь профессионалом в области JavaScript/TypeScript, вы также можете приобрести лицензию Pro, которая позволяет вам изменять значения среды выполнения без изменения кода.

Стоимость импорта

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

Стоимость импорта — это расширение VS Code, которое отображает размер импортируемых пакетов прямо в процессе разработки, поэтому вы точно знаете, сколько будет стоить импорт этого пакета в процессе разработки. Таким образом, это поможет вам лучше оптимизировать свои приложения и веб-сайты, особенно для мобильных пользователей, которые обычно больше страдают из-за раздувания.

Вкладка

Вкладка

Tabnine – это чрезвычайно популярный помощник на основе искусственного интеллекта для VSCode, который работает со всеми основными языками программирования, поэтому, несомненно, вы найдете его полезным вне зависимости от ваших навыков.

Изучая общедоступные кодовые базы, Tabnine использует алгоритмы глубокого обучения, чтобы прогнозировать, что вам нужно, и предлагает завершение кода одним щелчком, чтобы вы могли работать над своим проектом быстро и эффективно. Для программистов-новичков это упрощает обучение, поскольку дает вам пространство для экспериментов с идеями без необходимости запоминать синтаксис кодирования или выполнять поиск в StackOverflow.

А если вы опытный разработчик, то вы обнаружите, что Tabnine экономит вам кучу времени на том, над чем вы работаете, предоставляя вам строительные блоки, необходимые для запуска.

GitLens

GitLens

Если вы регулярно используете Git профессионально или в своих собственных проектах, GitLens еще больше упростит интеграцию вашей IDE с Git.

С помощью GitLens вы можете быстро узнать, кто, почему и когда изменил код в том или ином проекте. Кроме того, вы можете вернуться к предыдущим изменениям, чтобы узнать, почему другие разработчики изменили этот код, и провести параллельное сравнение, чтобы лучше понять, почему что-то изменилось.

Его также можно настроить, поэтому вам не нужно беспокоиться о том, что GitLens будет слишком навязчивым в вашей IDE.

Раскрашивание пары скобок

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

Независимо от того, работаете ли вы со спагетти-кодом, разбираетесь в чужом коде или просто хотите упростить чтение кода, это расширение очень полезно. Также очень легко настроить параметры этого расширения, так что вы даже можете заставить его работать, если используете пользовательские символы квадратных скобок. И если вам нужны определенные цвета или вы хотите, чтобы несвязанные скобки отображались отдельным цветом, это тоже легко сделать.

Интеллектуальное определение пути

Являетесь ли вы опытным разработчиком или новичком в игре и считаете количество вещей, которые вам нужно помнить, ошеломляющим, вы не будете знать, как раньше жили без Path Intellisense.

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

Кроме того, если вы используете скрытые файлы, Path Intellisense также может помочь вам в этом.

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

Красивее

Красивее

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

Prettier – это расширение для форматирования, которое автоматически форматирует ваш код каждый раз, когда вы его сохраняете, поэтому вам не нужно беспокоиться о том, что вы время от времени забываете делать отступы. Кроме того, если вы все еще учитесь программировать, Prettier поможет вам сэкономить массу свободного времени, позволив вам сосредоточиться на своем проекте, а не на том, как сделать код читабельным.

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

Удаленное — SSH

Если вы сейчас работаете удаленно из-за COVID-19, возможно, у вас дома нет подходящих инструментов для работы. Или вам может понадобиться работать с программным обеспечением, которое находится на устройстве в удаленном месте. Удаленный доступ — SSH вам в помощь.

Удаленное: SSH позволяет удаленно подключаться к среде разработки любого компьютера, чтобы выполнять свою работу, и быстро переключаться между различными средами для обновления кода. Все, что вам нужно для удаленной работы — SSH, — это расширение на вашем компьютере и удаленном устройстве, и все готово.

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

Живой компилятор Sass

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

Живой компилятор Sass. ну, компилирует файлы SAAS или SCSS в CSS. Жить. Независимо от того, требуется ли Sass для вашего проекта или вам просто нравится форматирование, это расширение может сэкономить вам массу времени (и головных болей!), взяв на себя всю тяжелую работу за вас.

Вы даже можете получить предварительный просмотр скомпилированного CSS-файла в браузере или приложении Live Sass Compiler, поэтому, если возникнут какие-либо проблемы, вы сможете исправить их до того, как зарегистрируете свой код.

Автоматическое закрытие тега

Вы когда-нибудь часами задавались вопросом, почему, черт возьми, ваш код не работает, только чтобы понять после трех чашек кофе и много ругательств, что это потому, что вы не закрыли тег? Да, мы все были там.

Расширение Auto Close Tag, как и следовало ожидать, автоматически закрывает теги HTML или XML в среде IDE. Итак, когда вы вводите открывающий тег, это расширение создаст для вас закрывающий тег. Все, что вам нужно сделать, это написать свой код между ними, и все готово.

И теперь вы можете быть уверены, что любые ошибки, возникающие у вас на пути, не связаны с отсутствием тегов HTML/XML. Это полезно.

Проверка орфографии кода

< бр />

Проверка орфографии кода

Если английский не является вашим родным языком или вы работаете программистом в старой доброй Великобритании, Канаде или Австралии, есть вероятность, что вы допустили ошибку в своем коде и потратили слишком много. время задаваться вопросом, почему ваш код продолжает выдавать ошибки.

Это расширение указывает на орфографические ошибки в вашем коде с помощью полезной волнистой линии, которая вернет вас во времена работы с текстовыми редакторами. И, если вы разрабатываете язык, который работает с вариантами правописания британского английского, можно легко переключить Code Spell Checker для работы с ним. Он работает даже с camelCase!

Легко сделать опечатку, особенно когда вы яростно печатаете, потому что внезапно поняли, как заставить что-то работать. Расширение Code Spell Checker позволяет легко обнаружить эти опечатки.

Уточка

Утка

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

Duckly – это инструмент видеочата, который позволяет разработчикам общаться, делиться своим кодом и совместно работать над разработкой в режиме реального времени напрямую через IDE и независимо от того, какую IDE использует ваша команда. Правильно, вы можете использовать VSCode, а ваши коллеги — WebStorm.

Поскольку удаленная работа становится все более популярной в мире технологий, еще до пандемии COVID-19 мы создали Duckly, чтобы люди могли легко сотрудничать со своей командой. Расширение Duckly позволяет вам делиться своим кодом в режиме реального времени с вашей командой, чтобы они могли следить за вами или писать код вместе с вами (например, Документы Google).

Мы также знаем, что безопасность очень важна, особенно когда мы все работаем удаленно. В Duckly все сеансы связи и обмена кодами являются P2P и зашифрованы, и только члены команды могут присоединиться к вашим звонкам.

Отладчик для Chrome

Разработчики веб-сайтов и мобильных устройств найдут это расширение чрезвычайно полезным. Если вы являетесь разработчиком JavaScript, отладчик для Chrome сэкономит вам массу времени на поиск ошибок.

С помощью отладчика для Chrome вы можете редактировать свой код JavaScript непосредственно в браузере Chrome или через приложение. Это мощное расширение найдет, в каких строках кода скрываются ошибки, поэтому легко найти то, что вам нужно исправить. Он также совместим с некоторыми расширениями для удаленной работы, такими как Remote — SSH, что делает его одним из лучших расширений VSCode, которые вам нужны в жизни.

Изменить регистр

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

Change Case решает эту проблему, позволяя изменить регистр слова, просто выделив его и набрав простую команду. Таким образом, не имеет значения, если вы случайно использовали camelCase вместо константы, потому что с этим расширением вам не нужно все это удалять и вводить заново.

Gif-иллюстрация Пако.

Jиз блока

Прочитайте больше сообщений этого автора.

Совместный просмотр: интерактивный показ экрана

Демонстрация экрана без взаимодействия похожа на разговор по рации вместо разговора в реальном времени.

Объявление о новых функциях парного программирования и стартовом раунде

Инструменты, которые мы используем, определяют то, как мы думаем и работаем. У разработчиков есть свои уникальные инструменты, и мы считаем, что их средства коммуникации не должны быть такими же, как у всех остальных.

Читайте также: