Лучшие VS Code расширения / ТОП-10 крутых плагинов для Visual Studio
Visual Studio Code – программа с удобным интерфейсом и множеством функций. Каждый пользователь может добавить функционал при помощи расширений. В статье мы рассмотрим ТОП-10 крутых плагинов.
VS code Icons
Начнем мы подборку с плагина, что является «must have» плагином для любого разработчика и не важно на каком языке вы пишите. За счет плагина VS code Icons все ваши файлы, в том числе папки, будут обладать иконками в зависимости от кода что прописан внутри них.
Этот плагин добавляет крутую визуализацию внутрь ваших проектов и помогает вам быстрее ориентироваться среди сотен различных файлов и папок.
Также рекомендуем посмотреть на расширение Material Icon Theme. Он также позволяет добавить стильные иконки к вашим папкам и файлам.
Prettier
Следующий на очереди плагин Prettier. Он позволяет в автоматическом формате форматировать ваш код с соблюдением всех отступов, пробелов и табов. Другими словами, за счет Prettier ваш код становиться красивым и верным каждый раз когда вы сохраняете файл.
Для работы вам нужно его установить и зайти в настройки. Откройте их в формате кода JSON. В настройки допишите строку «editor.formatOnSave» со значением true. Далее перезапустить всю программу. В таком случае при сохранении файлов они у вас будут форматироваться.
Это максимально удобный плагин, является одним из наиболее популярных плагинов в VS code.
Live Server
Live Server предоставляет возможность любому запустить локальный сервер для своего проекта. Для запуска сервера вам достаточно установить расширение, а далее внутри нужного файла нажмите правой кнопкой мыши и выберите опцию «Open with Live Server».
Большим плюсом сервера является его автоматическая перезагрузка. Вы можете писать код, сохранять файл, а сервер обновиться автоматически в соответсвии с кодом внутри файла.
Bracket Pair Colorizer
Еще один максимально удобный плагин – Bracket Pair Colorizer. Он добавляет подсветку для фигурных скобок и тем самым позволяет вам быстро ориентироваться среди них.
Данный плагин максимально удобен для всех языков программирования, возможно, лишь за исключением Python, Golang и тому подобных языков, где нет фигурных скобок.
Indent Rainbow
Нельзя пройти мимо расширения под названием Indent Rainbow. За счет расширения вы получаете цветовое оформление для отступов внутри проекта.
Каждый отступ выделяется своим цветом и вы никогда не запутаетесь в коде. Этот плагин отлично использовать в связке с прошлым плагином.
GitLens
GitLens – прекрасное расширение для работы c Git. Данное расширение предоставляет вам полную информацию относительно репозитория вашего проекта, а также всех комитов и комментариев что были внесены и оставлены.
При помощи GitLens вы в удобной форме можете наблюдать какие участки кода были добавлены в проект и при этом какие комментарии были оставлены при добавлении того или иного участка кода. Прекрасный плагин для визуализации Git.
Peacock
Цветовая гамма кажется чем-то простым, но все же ей стоит уделять время. Если цвета в редакторе вам нравятся, то вам значительно проще будет даваться написание кода.
За счет плагина Peacock вы можете устанавливать глобальную цветовую гамму для редактора. Вы можете поменять не только цвет текста и цвет заднего фона, но также сможете изменить боковую панель в Visual Studio code.
Faker
Думаю вам часто приходилось выдумывать имена, адреса или прочую информацию лишь с целью чтобы протестировать участок кода в вашем проекте.
Более вам такое делать не придется, так как при помощи плагина Faker вы можете создать фейковую информацию и сразу же подставить её внутрь некой переменной.
Lorem ipsum
Помимо подстановки фейковых данных часто необходимо подставить текст. Для этого можно использовать плагин Lorem ipsum, что подставляет текст рыбу или другими словами текст заглушку.
Better Comments
И конечно же, как мы можем обойтись без комментариев. Сами по себе комментарии обычно невзрачны и их не всегда удобно читать. При помощи плагина Better Comments вы можете создать действительно более хорошие комментарии.
Данный плагин позволяет оформить комментарии в разные цветовые решения, тем самым вы можете более четко выделять важные и не важные участки комментария
Видео на тему
Ниже предлагаем просмотреть соответствующее видео по данной тематике:
Больше интересных новостей
6 лучших расширений VS Code для организации задач и кода
10 фильмов про искусственный интеллект
Зарплаты Python-разработчиков в России
Где применяется язык Python? Сферы применения
Комментарии (1)
HALID 16 февраля 2023 в 12:45
Установка и настройка VS code
Редактор кода Visual Studio Code или просто VS Code — бесплатный, мощный, очень популярный редактор кода разработанный корпорацией Microsoft.
VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.
Установка VS code
1) Переходим на официальный сайт и жмем «Download» (Скачать).
Сохраняем инсталятор (файл.exe ) в выбранную папку на своем ПК.
2) Запускаем скаченный инсталлятор (VSCodeUserSetup-версия.exe) и следуем инструкциям: принимаем, добавляем все галочки, далее, ждем пока программа установится на наш ПК.
3) VS Code установлен!
Запуск VS code
Жмем на ярлык:
При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые.
Вид стартовой страницы после установки VS code.
Весь интерфейс VS code на английском языке.
Для того чтобы интерфейс стал на русском языке, нужно установить расширение (приложение/плагин) для русского языка.
Уснановка расширений VS code
Уснановка расширения производится в следующем порядке:
- Открыть список расширений. Значок на левой боковой панели;
- В строке поиска набрать имя (или часть имяни) расширения;
- Из списка найденных расширений выбирать нужное;
- Устанавить выбранное расширение (кнопка «install»/»установить»).
Пример
Установка русского языка в VS code
После установки расширения (плагина) для русского языка интерфейс VS code переводится на русский язык.
Вид стартовой страницы после установки русского языка.
Использование расширения Visual Studio Code
Действует с 12 октября 2022 г, в качестве порталов для Power Apps используется Power Pages. Дополнительная информация: Microsoft Power Pages теперь доступен для всех (блог)
Скоро мы мигрируем и объединим документацию порталов Power Apps с документацией Power Pages.
Обзор
Visual Studio Code (VS Code) — это лаконичный, но мощный редактор исходного кода, который работает на вашем рабочем столе и доступен для Windows, macOS и Linux. Он поставляется со встроенной поддержкой JavaScript, TypeScript и Node.js и имеет богатую экосистему расширений для других языков (таких как C++, C#, Java, Python, PHP и Go) и сред выполнения (таких как .NET и Unity). Дополнительные сведения см. в статье о начале работы с VS Code.
VS Code позволяет расширить ваши возможности за счет расширений. Расширения VS Code могут добавить больше функций к общему взаимодействию. С выпуском этой функции теперь вы можете использовать расширение VS Code для работы с порталами Power Apps.
Расширение VS Code для порталов
Power Platform Tools добавляет возможность настраивать порталы с помощью VS Code и использовать встроенный язык Liquid IntelliSense для упрощения завершения кода, с подсказками и помощью при настройке интерфейса порталов с помощью VS Code. Используя расширение VS Code, вы также можете настраивать порталы через поддержку порталов для Microsoft Power Platform CLI.
Предварительные условия
Перед использованием расширения VS Code для порталов Power Apps необходимо:
- Загрузить, установить и настроить Visual Studio Code. Дополнительные сведения: Загрузка Visual Studio Code
- Настройте свою среду и систему для порталов Power Apps с поддержкой CI/CD с помощью интерфейса командной строки. Больше информации: Поддержка порталов для Microsoft Power Platform CLI (предварительная версия)
Установка расширения VS Code
После установки Visual Studio Code необходимо установить расширение для подключаемого модуля порталов Power Apps для VS Code.
Для установки расширения VS Code:
- Откройте Visual Studio Code.
- Выберите
(Расширения ) в левой области. 
- Выберите
в правом верхнем углу панели расширений. - Найдите и выберите Power Platform Tools.
- Выберите Установить.
- Убедитесь, что расширение успешно установлено по сообщениям о состоянии.
Загрузите контент порталов
Для аутентификации в среде Microsoft Dataverse и чтобы загрузить контент порталов, обратитесь к учебнику Использование интерфейса командной строки Microsoft Power Platform с порталами — загрузка контента порталов.
Расширение Power Platform Tools автоматически позволяет использовать команды интерфейса командной строки Microsoft Power Platform из VS Code через встроенный терминал Visual Studio.
Поддержка фрагмента кода
При настройке загруженного контента с помощью VS Code теперь вы можете использовать IntelliSense для порталов Power Apps — теги Liquid.
Значки файла
Расширение VS Code для порталов автоматически определяет и отображает значки файлов и папок внутри загруженного содержимого порталов.
VS Code использует тему значка файла по умолчанию, которая не показывает значки, относящиеся к порталам. Чтобы просмотреть значки файлов, специфичные для ваших порталов, вам придется обновить экземпляр VS Code, чтобы использовать тему значков файлов, специфичную для порталов.
Для включения темы значков файлов, специфичных для порталов:
- Откройте Visual Studio Code.
- Перейдите Файл >Параметры >Тема значка файла
- Выберите тему для значков порталов Power Apps.
Предварительная версия в реальном времени
Расширение Visual Studio Code включает возможность предварительного просмотра в реальном времени для просмотра страницы с содержимым портала внутри интерфейса Visual Studio Code прямо во время разработки.
Для предварительного просмотра выберите в правом верхнем углу, если HTML-файл открыт в режиме правки.
Область предварительного просмотра открывается с правой стороны редактируемой страницы.
Функция предварительного просмотра требует, чтобы другие файлы также были открыты в той же сессии VS Code, которые составляют HTML-разметку для отображаемого предварительного просмотра. Например, если открыт только файл HTML, а структура папок не открыта с помощью VS Code, вы увидите следующее сообщение.
Когда эта проблема возникает, откройте папку с помощью команды Файл > Открыть папку и выберите загруженную папку содержимого портала, чтобы открыть ее, прежде чем пытаться снова открыть предварительный просмотр.
Автозавершение
Возможность автозавершения в расширении VS Code показывает текущий редактируемый контекст и соответствующие элементы авторазрешения через IntelliSense.
Ограничения
Следующие ограничения в настоящее время применяются к Power Platform Tools для порталов:
- Функции поддержки фрагмента кода и автозавершения поддерживают только ограниченную функциональность.
- Предварительный просмотр в реальном времени не поддерживает пользовательские темы или Liquid-объекты.
Расширения VS Code, которые необходимо установить в первую очередь.
Сейчас среди разработчиков очень популярны продукты компании JetBrains, они предлагают отличные инструменты для разработки под различные языки программирования.
Правда большинство пользователей использует лишь часть возможностей IDE. Сразу возникает вопрос, если пользоваться ее возможностями на 20 — 30%, то какой смысл платить за нее ежегодно?
Почти все возможности, которым требуются большинству пользователей IDE, можно получить в бесплатном редакторе кода Visual Studio Code или просто VS Code с помощью плагинов.
Ниже я опишу плагины, которые я рекомендую установить сразу же после установки VS Code. Эти плагины я считаю универсальными и они будут помогать вам в не зависимости от того, с каким языком программирования вы работаете.
Другими словами, это список «обязательных» плагинов для VS Code, а дальше каждый выбирает себе дополнительные плагины под конкретные задачи.
Как устанавливать расширения VS Code?
Все расширения устанавливаются автоматически из маркетплейса https://marketplace.visualstudio.com/.
По комбинации клавиш Ctrl+Shift+X переходим во вкладку с расширениями, в строке поиска вводим название нужного расширения (все названия я указал ниже) и нажимаем Install. Иногда после установки расширения потребуется перезагрузить VS Code.
«Обязательные» расширения для VS Code
Русский язык для VS Code
Этот плагин я не считаю обязательный, но многие его устанавливают в первую очередь, он называется Russian Language Pack for Visual Studio Code — это русификатор VS Code.
Auto Complete Tag
В это расширение входят 2 очень полезных плагина Auto Close Tag и Auto Rename Tag. Первый чтобы автоматически закрывать теги не только в html, но и в многих других языках. Второй для автоматического переименования тегов. Например вы меняете открывающий тег и сразу автоматически меняется закрывающий.
Bracket Pair Colorizer
Разукрашивает скобки, в том числе квадратные и фигурные, в разные цвета в зависимости от вложенности. Это улучшает ориентацию в коде.
Better Comments
Для лучшего визуального выделения каких либо пометок в комментариях рекомендую использовать этот плагин.
С помощью этого расширения можно выделить комментарий, TODO, вопрос.
Для этого в начале комментария нужно поставить соответствующий знак:
- ! — текст будет красный
- ToDo — оранжевый
- ? — синий.
Indenticator
Это расширение так же помогает улучшить восприятие кода, оно визуально выделяет текущую глубину отступа. Это помогает различать блоки, расположенные на разных уровнях.
Project Manager
Добавляет функционал по управлению проектами в VS Code, как во всех IDE. Установим его и в панели действий появится иконка папочек. Это и есть наш Project Manager.
Bookmarks
Еще одна вещь, которой я постоянно пользуюсь в PHP Storm, это закладки в коде. В VS Code такой функционал можно добавить с помощью расширения Bookmarks.
IntelliJ IDEA Keybindings
Если до этого вы работали с какой нибудь из IDE от JetBrains и привыкли к ее горячим клавишам, рекомендую установить это расширение.
Если найду какие то еще интересные расширения, которые можно будет отнести к «обязательным», то дополню статью.
Только не забывайте, что чем больше установлено расширений, тем больше оперативной памяти отжирается и медленней работает VS Code, поэтому периодически проверяйте, если у вас установлены расширения, которыми вы не пользуетесь, удаляйте их. В любом случае, если вам понадобится их вернуть, сделать это не сложно.
Категории
Свежие записи
- Таблицы в админке WordPress (часть 1)
- Импорт/экспорт Linux WSL
- Не печатаются заглавные буквы в PowerShell
- 1С-Битрикс: Ошибка авторизации! Срок действия пароля истек, необходимо сменить пароль.
- Несколько конфигураций для проекта Django
- Django inclusion_tag с разными шаблонами