15 расширений VSCode для повышения вашей продуктивности в React

В этой статье я расскажу о расширениях VSCode, которые я использовал для реактивной разработки и производительности. Я надеюсь, что вы можете найти вкусные расширения для использования :)

Тег автозакрытия

[Расширение тега AutoClose] (https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) автоматически добавляет закрывающие теги HTML/JSX, как это делает Visual Studio IDE или Sublime Text.

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

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

Лучшие комментарии

Расширение Better Comments поможет вам улучшить комментирование кода, добавляя предупреждения, информацию, TODO и многое другое!

Подсветка цветом

Расширение Color Highlight стилизует CSS/веб-цвета, найденные в вашем документе.

Докер

[Это расширение] (https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) добавляет меню Docker на боковую панель VsCode. С помощью этого меню вы можете создавать контейнерные приложения, управлять ими и развертывать их из Visual Studio Code. Он также обеспечивает отладку одним щелчком мыши для некоторых языков.

DotENV

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

ESLint

Это расширение помогает интегрировать ESLint в VS Code. Если вы новичок в ESLint, ознакомьтесь с документацией.

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

Это расширения для React, React-Native и Redux в JS/TS с синтаксисом ES7+. Они настраиваются и поставляются со встроенной интеграцией с Prettier.

Гитленс

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

Второй пилот GitHub

[GitHub Copilot] (https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) — это программа для создания пар AI, которая предлагает завершение строк и целые тела функций по мере ввода. GitHub Copilot работает на основе системы искусственного интеллекта OpenAI Codex, обученной общедоступному интернет-тексту и миллиардам строк кода.

Недавно я начал использовать Github Copilot. Пока это работает очень хорошо.

Отступ Радуга

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

Руководитель проекта

[Расширение Project Manager] (https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) добавляет новое меню на боковую панель VsCode. Вы можете добавлять и легко переключаться между проектами.

Путь Intellisense

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

Prettier — средство форматирования кода

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

Журнал Turbo Console

[Расширение журнала консоли Turbo] (https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) позволяет добавлять строку журнала консоли в удобочитаемом формате с помощью простых сочетаний клавиш.

В заключение:

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

Вы также можете найти пакет расширения на GitHub и Visual Studio Marketplace.