Узнайте, как использовать эти 4 расширения VS Code, чтобы значительно улучшить опыт разработчика React

Я думаю, что моя любимая часть использования React - это сообщество людей, которые продолжают раздвигать границы. Это распространяется не только на людей, которые создают для него пакеты NPM (Node Package Manager), но и на сообщество людей, создающих для него расширения в VS Code. VS Code для меня сделал опыт разработчиков React еще лучше, позволив мне писать код быстрее и эффективнее. Вот почему я собираюсь поделиться своими 4 любимыми расширениями для разработки на JavaScript / React, которые полностью изменили правила игры для меня.

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



Загрузить код Visual Studio - Mac, Linux, Windows
Код Visual Studio бесплатно и доступен на вашей любимой платформе - Linux, macOS и Windows. Загрузить Visual Studio… code.visualstudio.com



Брекет-пара Colorizer 2



Bracket Pair Colorizer 2 - Visual Studio Marketplace
Это расширение позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие токены будут соответствовать, и… marketplace.visualstudio.com



Это полезно не только для разработки React, но и для разработки JavaScript в целом. Как вы уже знаете, в коде JavaScript может быть много-много вложенных фигурных скобок и круглых скобок, но благодаря этому расширению теперь легко найти подходящие пары. На скриншоте ниже показаны фигурные скобки и круглые скобки, раскрашенные этим расширением.

ES7 React / Redux / GraphQL / React-Native фрагменты



ES7 React / Redux / GraphQL / React-Native snippets - Visual Studio Marketplace
JavaScript и React / Redux фрагменты в ES7 + с функциями плагина Babel для VS Code Launch Quick Open: Paste … marketplace.visualstudio.com



У этого так много отрывков. Это огромная экономия времени, потому что это действительно помогает с обработкой компонентов React. Не только это, но также есть несколько действительно удобных фрагментов для JavaScript.

Красивее



Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier marketplace.visualstudio.com



Prettier - безусловно, мое любимое расширение в vs-code. Как видно из названия, его единственная цель - сделать ваш код JavaScript «красивым». Это не только хорошо отформатирует ваш код, но и гарантирует согласованность в написании кода, что может значительно сэкономить время при его чтении.

Вот подсказка

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

компоненты в стиле vscode



vscode-styled-components - Visual Studio Marketplace
Подсветка синтаксиса и IntelliSense для стилизованных компонентов. Использует грамматику CSS, созданную на основе language-sass и… marketplace.visualstudio.com



Тем из вас, кто использует стилизованные компоненты в React, вам обязательно понравится этот. Он добавит автозаполнение в ваш код стилизованных компонентов. Я покажу вам пример ниже.

Заворачивать

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