15 React Productivity VSCode Extensions (Pack)

Во-первых, позвольте мне представиться. Меня зовут Джем. В настоящее время я работаю FullStack-инженером в Берлине. В этой статье я расскажу о расширениях VSCode, которые я использовал для разработки и продуктивности реакта. Надеюсь, вы сможете найти для себя интересные расширения 🙂

Ссылки

Github: https://github.com/ickarakurt/vscode-react-productivity-pack

*Extension Pack: *https://marketplace.visualstudio.com/items?itemName=ickarakurt.react-productivity-pack

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

Расширение добавляет теги закрытия HTML/JSX автоматически, как это делает Visual Studio IDE или Sublime Text.
Auto Close Tag — Visual Studio Marketplace

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

Автоматическое переименование парных тегов HTML/JSX, как это делает Visual Studio IDE.
Тег автоматического переименования — Visual Studio Marketplace

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

Улучшите комментирование кода, аннотируя его с помощью предупреждений, информации, TODO и многого другого!
Better Comments — Visual Studio Marketplace

Color Highlight

Это расширение стилизует CSS/web цвета, найденные в вашем документе.
Color Highlight — Visual Studio Marketplace

Docker

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

DotENV

Расширение делает файлы окружения более читаемыми за счет использования цветовой схемы.
DotENV — Visual Studio Marketplace

ESLint

Интегрирует ESLint в VS Code. Если вы новичок в ESLint, ознакомьтесь с документацией.
ESLint — Visual Studio Marketplace

ES7+ React/Redux/React-Native сниппеты

Расширения для React, React-Native и Redux в JS/TS с синтаксисом ES7+. Настраиваемые. Встроенная интеграция с prettier.
Сниппеты ES7+ React/Redux/React-Native — Visual Studio Marketplace

Gitlens

GitLens улучшает Git внутри VS Code и раскрывает неиспользованные знания в каждом репозитории. Он поможет вам с первого взгляда визуализировать авторство кода с помощью аннотаций Git blame и CodeLens, легко перемещаться и исследовать репозитории Git, получать ценные сведения с помощью богатых визуализаций и мощных команд сравнения, и многое другое.
GitLens — Git supercharged — Visual Studio Marketplace

GitHub Copilot

GitHub Copilot — это парный программист с искусственным интеллектом, который предлагает завершения строк и целые тела функций по мере того, как вы набираете текст. GitHub Copilot работает на базе системы искусственного интеллекта OpenAI Codex, обученной на публичных текстах Интернета и миллиардах строк кода.

Я недавно начал использовать Github Copilot. Пока что он работает очень хорошо.
GitHub Copilot — Visual Studio Marketplace

Радуга отступов

Это расширение изменяет цвет отступов перед вашим текстом, чередуя четыре разных цвета на каждом шаге. Это действительно полезное расширение для того, чтобы сделать отступы более заметными.
indent-rainbow — Visual Studio Marketplace

Менеджер проектов

Расширение добавляет новое меню на боковую панель VsCode. Вы можете добавлять свои проекты и легко переключаться между ними.
Менеджер проектов — Visual Studio Marketplace

Интеллисенс путей

Расширение автодополняет имена файлов. Это очень полезно при импорте компонента.
Path Intellisense — Visual Studio Marketplace

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

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

Журнал турбо-консоли

Используя простую комбинацию клавиш, вы можете добавить лог консоли в удобочитаемом формате
Turbo Console Log — Visual Studio Marketplace

Заключение:

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

15 React Productivity VSCode Extensions (Pack)