Скрытые возможности WebStorm для React-разработчиков

WebStorm — одна из лучших IDE для разработки на React, благодаря своей производительности, удобству использования и множеству встроенных функций. Однако даже опытные разработчики могут не знать обо всех её возможностях. В этой статье мы рассмотрим несколько скрытых функций WebStorm, которые помогут повысить продуктивность React-разработчиков.

Поддержка React-specific Snippets

WebStorm автоматически генерирует шаблоны кода для компонентов React, включая функциональные и классовые компоненты. Например, вы можете создать новый функциональный компонент, введя rsf, а затем нажав Tab.

Естественно, кроме этого сниппета, поддерживается множество других. Полный список можно найти в настройках: Editor > Live Templates.

Встроенная поддержка JSX и TypeScript

WebStorm предлагает автозавершение и проверку синтаксиса для JSX и TypeScript из коробки. Если в вашем проекте настроен TypeScript, IDE автоматически распознаёт типы и показывает ошибки без необходимости дополнительной настройки.

Например, при передаче пропсов в компонент вы получите предупреждение, если переданный тип не соответствует ожидаемому:

Live Templates для React

Live Templates — это мощный инструмент для ускорения разработки. В WebStorm вы можете настроить свои шаблоны кода для повторяющихся операций, например создания хуков или добавления обработчиков событий. Шаблоны доступны в разделе Preferences > Editor > Live Templates.

Пример пользовательского шаблона для создания React-хука:

use$NAME$ = () => {
    const [$STATE$, set$STATE$] = React.useState($INITIAL_VALUE$);
    return [$STATE$, set$STATE$];
};

Выберите контексты, где будет срабатывать этот шаблон нажав на кнопку указанную на скриншоте:

Подойдёт JavaScript Top Level Statement и TypeScript Top Level Statement.

Теперь просто введите useHook, и WebStorm автоматически подставит шаблон, попросив ввести 3 указанных в шаблоне переменных.

Подсветка пропсов и проверка их использования

WebStorm автоматически подсвечивает пропсы, используемые в компонентах, и предупреждает, если какой-либо пропс не передан или передан неверно. Это особенно полезно при работе с большими компонентами.

Например, если пропс отмечен как обязательный, но не передан, WebStorm сообщит об ошибке:

Подключение ESLint и Prettier

WebStorm поддерживает интеграцию с ESLint и Prettier для обеспечения единого стиля кода и автоматической проверки качества. Настроить их можно в разделе Preferences > Languages & Frameworks > JavaScript > Code Quality Tools.

Полезные плагины для React

WebStorm поддерживает установку плагинов, которые упрощают разработку на React. Вот несколько полезных плагинов:

• React Buddy —  предоставляет визуализацию дерева компонентов, поддержку PropTypes и типов, встроенные проверки пропсов и шаблоны для быстрого создания компонентов.
• Tailwind Fold — улучшает читаемость кода, автоматически сворачивая длинные атрибуты class в HTML и JavaScript/TypeScript файлах, содержащих шаблоны.

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