11 лучших расширений кода VS, которые вам нужны в 2022 году! — «Позвольте мне потерпеть неудачу»

Топ обязательных расширений для вашего следующего проекта

Visual Studio Code, несомненно, является самым популярным редактором кода на сегодняшний день. Это легкий редактор кода, разработанный Microsoft для Windows, Linux и macOS. Он включает в себя различные функции, такие как подсветка синтаксиса, отладка, интеллектуальное завершение кода, фрагменты кода, встроенный Git, рефакторинг кода и многое другое. VS Code обеспечивает лучшую производительность и стабильность по сравнению с другими редакторами кода на рынке.

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

В этом руководстве мы рассмотрим следующие расширения.

1. Git Lens
2. Павлин
3. Попутный ветер CSS IntelliSense
4. Раскрашивание пары скобок
5. Фрагменты ES7+ React/Redux/React-Native
6. Prettier — форматировщик кода
7. Автоматическое переименование тега
8. Живой обмен
9. Vscode-Иконки
10. ТОДО Изюминка
11. Автозаполнение Tabnine AI для Javascript, Python, Typescript, PHP, Go, Java, Ruby и др.

Git Lens

• Издатели: GitKraken
• Установки: 12 650 938 установок
• Версия: 11.7.0, последнее обновление 18.11.2021 Бесплатно

Обзор

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

Вот лишь некоторые из уникальных функций, которые предоставляет GitLens.

• Легкая ревизионная навигация (назад и вперед) по истории файла

• Линза кода авторства, показывающая самую последнюю фиксацию и количество авторов в верхней части файлов и/или в блоках кода.

• Аннотация обвинение в строке состояния, показывающая фиксацию и автора, который последним изменил текущую строку.

• Код changes — выделяет любые локальные (неопубликованные) изменения или строки, измененные самой последней фиксацией.

• Тепловая карта — показывает, насколько недавно и часто изменялись строки по отношению ко всем остальным изменениям в файле и к текущему моменту (горячее или холодное).

Павлин

• Издательство: Джонпапа
• Установки: 1 449 402 установки
• Версия: 4.0.0, последнее обновление 17.11.2021 Бесплатно

Обзор

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

Установка и настройка

1. Создать/Открыть рабочее пространство VSCode (Павлин работает только в рабочем пространстве)
2. Нажмите F1, чтобы открыть палитру команд.
3. Введите Peacock
4. Выберите Peacock: Change to a favorite color
5. Выберите один из предустановленных цветов и посмотрите, как он изменит ваш редактор.

Попутный ветер CSS IntelliSense

• Издатели: Tailwind Labs
• Установки: 871 182 установки
• Версия: 0.7.6, последнее обновление 17.01.2022 Бесплатно

Обзор

TailwindCSS — это CSS-фреймворк, ориентированный на утилиты, который привлекает огромное внимание веб-разработчиков. Если вы любите Tailwind CSS, то это обязательное расширение. Это бесплатное расширение, опубликованное Tailwind Labs (bradlc). Это расширение обеспечивает автозаполнение, подсветку синтаксиса и линтинг для классов Tailwind. С этим расширением разработчикам не нужно запоминать точное написание всех служебных классов или тратить время на их ввод.

Линтинг

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

Автозаполнение

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

Установка и настройка

Чтобы расширение активировалось, у вас должен быть установлен tailwindcss и файл конфигурации Tailwind с именем tailwind.config.js или tailwind.config.cjs в вашей рабочей области.

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

• Издатели: CoenraadS
• Установки: 7 279 363 установки
• Версия: 1.0.62, последнее обновление 13.12.2021 Бесплатно

Обзор

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

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

Установка и настройка

Установите последнюю версию Bracket Pair Colorizer из пакета кода VS. После установки, если вы хотите настроить:

• Откройте Настройки, нажав Код › Настройки › Настройки.
• Поиск раскраски
• Нажмите Изменить в settings.json под элементом bracket-pair-colorizer: Colors.

Фрагменты ES7+ React/Redux/React-Native

• Издатели: дсзнайдер
• Установки: 4 344 921 установка
• Версия: 4.1.0, последнее обновление 20.01.2022 Бесплатно

Обзор

Если вы настоящий разработчик React JS, то этот фрагмент должен быть для вас обязательным, потому что он просто подходит именно вам. Этот плагин предоставляет вам фрагменты JavaScript и React/Redux в ES7 с функциями плагина Babel для VS Code.

Здесь вы можете увидеть пару популярных примеров PrefixMethod для разработчиков React, а полный список можно увидеть на официальной странице Github.

Чтобы создать новый компонент класса, просто запустите:

rce→

rce→

Чтобы создать функциональный компонент, просто запустите:

rfce

Функция создается, как показано. (Вы можете дать любое имя функции)

import React from 'react'; 
 
function $1() {   
  return <div>$0</div>; 
} 
 
export default $1;

Установка и настройка

Вставьте следующую команду и нажмите Enter:

ext install dsznajder.es7-react-js-snippets

Prettier — форматировщик кода

• Издатели: Красивее
• Установки: 18 020 985 установок
• Версия: 9.1.0, последнее обновление 03.01.2022 Бесплатно

Обзор

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

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

Вы можете настроить Prettier для форматирования файлов при их сохранении или передаче в систему контроля версий (например, Git, SVN). Таким образом, вам не нужно беспокоиться о форматировании исходного кода, а Prettier позаботится об этом.

Установка и настройка

Установить через расширения VS Code. Найдите Prettier - Code formatter

Visual Studio Code Market Place: Prettier — средство форматирования кода

Вы также можете установить в VS Code: Запустите VS Code Quick Open (Ctrl+P), вставьте следующую команду и нажмите Enter.

ext install esbenp.prettier-vscode

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

• Издатели: Джун Хан
• Установки: 7 766 922 установки
• Версия: 0.1.9, последнее обновление 12.10.2021 Бесплатно

Обзор

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

Тег автоматического переименования предоставляет нам функцию, благодаря которой при изменении начального тега он автоматически переименовывает парный тег HTML/XML, как это делает среда IDE Visual Studio, что упрощает переименование тегов.

Установка и настройка

Вы можете просто установить плагин с помощью расширений кода VS. После установки добавьте запись в auto-rename-tag.activationOnLanguage, чтобы установить языки, на которых расширение будет активировано. По умолчанию это [“*”] и будет активировано для всех языков.

{ 
    "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"] 
}

Живой обмен

• Издатели: Microsoft
• Установки: 7 397 050 установок
• Версия: 1.0.5273, последнее обновление 20.01.2022 Бесплатно

Обзор

Еще один большой вклад Microsoft. Live Share позволяет редактировать и отлаживать код совместно с другими разработчиками в режиме реального времени. С помощью этих инструментов стало удобнее парное программирование, когда разработчики могут мгновенно и безопасно делиться проектом с другими разработчиками.

Он включает в себя общие функции: сеансы отладки, терминальные экземпляры, локальные веб-приложения, голосовые вызовы и многое другое!

Он разделяет все их значение контекста редактора, другие разработчики не беспокоятся о клонировании каких-либо репозиториев или установки SDK для проверки кода и процесса отладки.

Установка и настройка

1. При необходимости установите Visual Studio Code для Windows (7+), macOS (Sierra+) или Linux (подробности).
2. Загрузите и установите расширение Visual Studio Live Share для Visual Studio Code.
   Если вы хотите интегрировать голосовые вызовы, установите пакет расширений VS Live Share, который включает расширения Live Share и Live Share Audio.
3. Позвольте Visual Studio Live Share завершить установку зависимостей.
4. После завершения вы увидите Live Share в строке состояния. Теперь вы можете сразу начать сотрудничать с другими!

Быстрый старт (присоединение)

1. Щелкните URL-адрес сеанса, отправленный вам «хостом», который откроет его в браузере. При появлении запроса разрешите вашему браузеру запустить VS Code.
2. Вам будет предложено войти в систему при первом совместном использовании (используя учетную запись GitHub или Microsoft), что позволит другим идентифицировать вас при совместной работе.
3. Вот и все! После того, как вы присоединитесь, вам сразу же будет представлен файл, открытый «хостом», и вы сможете увидеть их курсор и любые изменения, которые они вносят. Кроме того, вы начинаете «следовать» за хостом, поэтому, когда они прокручивают или перемещаются между файлами, вы будете следовать за ними. Это позволяет легко сориентироваться в проблеме/вопросе/задаче, над которой вы собираетесь начать сотрудничество.

Vscode-Иконки

• Издатели: Команда VSCode Icons
• Установки: 9 823 196 установок
• Версия: 11.8.0, последнее обновление 04.12.2021 Бесплатно

Обзор

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

Установка и настройка

Чтобы установить расширение, просто выполните следующую команду в палитре команд Visual Studio Code:

ext install vscode-icons

После установки и после перезагрузки vscode вам будет представлено сообщение на Activate значках.

Если этого не произошло, перейдите к:

• Linux & Windows => Файл › Настройки › Тема значков файлов › Значки VSCode.
• MacOS => Code › Настройки › Тема значков файлов › Значки VSCode.

ТОДО Изюминка

• Издатели: Вайоу Лю
• Установки: 2 270 992 установки
• Версия: 11.8.0, последнее обновление 04.12.2021 Бесплатно

Обзор

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

Установка и настройка

• TODO:,FIXME: — это встроенные ключевые слова.
• Вы можете переопределить внешний вид, настроив параметр.
• Чтобы настроить ключевые слова и другие вещи,
• команда + ,
• (Windows/Linux: Файл -> Настройки -> Настройки пользователя)
• откройте файл vscode settings.json.

Автозаполнение Tabnine AI для Javascript, Python, Typescript, PHP, Go, Java, Ruby и др.

• Издатели: TabNine
• Установки: 3 112 708 установок
• Версия: 3.5.16, последнее обновление 12.01.2022 Бесплатно

Обзор

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

В Tabnine используются сложные модели машинного обучения. Он обучен более чем миллиарду строк открытого исходного кода из GitHub.

Tabnine предлагает и прогнозирует код по мере того, как вы пишете. Это мощное расширение ускорит вашу разработку, сэкономит массу времени и вдвое сократит время написания кода. В настоящее время он поддерживает почти все популярные языки программирования, включая Python, Javascript, Java и React.

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

Установка и настройка

• Нажмите Cmd+P (mac) или Ctrl+P (Windows) в коде Visual Studio, введите ext install Tabnine.tabnine-vscode и нажмите Enter.
• Нажмите кнопку Обновить на вкладке расширений.
• Поведение Tabnine по умолчанию использует клавишу Enter для подтверждения завершения. Если вы предпочитаете использовать клавишу Enter для начала новой строки, перейдите в раздел Настройки → Редактор: Принимать предложение при вводе и отключите его.

Заключение

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

Первоначально опубликовано на https://letmefail.com 22 января 2022 г.