VS Code Extension для приоритета React Props в автодополнении

Когда пишешь React-компоненты, особенно с TypeScript, автодополнение в VS Code иногда раздражает. Представьте: вы пишете <Button, и первыми в списке предлагаются disabled, onClick и aria-label. А вам нужны кастомные пропсы вроде variant или size. Приходится прокручивать список или вводить их вручную. Знакомая боль? Я тоже с этим сталкивался.

Недавно наткнулся на расширение React Props First, которое обещает решить эту проблему. Решил попробовать и поделиться впечатлениями.

Как работает расширение

Расширение меняет порядок автодополнения в JSX/TSX файлах. Вместо стандартного порядка, где сначала идут наследованные DOM-атрибуты, оно выводит кастомные пропсы компонента наверх. Например, если у вас есть компонент Button с пропсами variant, size и loading, они будут первыми в списке автодополнения.

Это особенно полезно, когда компонент расширяет DOM-пропсы (например, через React.ComponentProps<'button'>). В таких случаях кастомные пропсы часто теряются в море стандартных атрибутов.

Установка и использование

Установка проста:

1. Открываем VS Code.
2. Переходим в Extensions (Ctrl+Shift+X).
3. Ищем “React Props First” и устанавливаем.

После установки расширение работает из коробки. Никакой конфигурации не требуется. Просто начинаете писать JSX/TSX, и кастомные пропсы появляются первыми.

Пример

Допустим, у вас есть такой компонент:

interface ButtonProps extends React.ComponentProps<'button'> {
  variant: 'primary' | 'secondary';
  size: 'small' | 'medium' | 'large';
  loading?: boolean;
}

function Button({ variant, size, loading, ...rest }: ButtonProps) {
  return <button {...rest} />;
}

Без расширения, когда вы пишете <Button, автодополнение может выглядеть так:

1. disabled
2. onClick
3. aria-label
4. variant
5. size
6. loading

С расширением порядок меняется:

1. variant
2. size
3. loading
4. disabled
5. onClick
6. aria-label

Плюсы и минусы

Плюсы:

• Экономия времени. Не нужно прокручивать список или вводить пропсы вручную.
• Удобство. Кастомные пропсы всегда под рукой.
• Простота. Никакой сложной настройки — установил и забыл.

Минусы:

• Не всегда предсказуемо. Если у вас много компонентов с похожими пропсами, иногда сложно понять, какой именно пропс предлагается.
• Не работает с библиотеками вроде Material-UI или Ant Design, где пропсы часто динамически генерируются.

Вывод

React Props First — это небольшое, но полезное расширение, которое делает работу с React-компонентами чуть более комфортной. Оно не революционное, но решает конкретную проблему, которая может раздражать при ежедневной разработке.

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

Однако, если вы работаете с библиотеками вроде Material-UI или Ant Design, польза может быть ограничена. В таком случае, возможно, стоит поискать другие решения или адаптировать расширение под свои нужды.

В целом, React Props First — это пример того, как небольшие инструменты могут сделать жизнь разработчика чуть проще. Иногда именно такие мелочи помогают сохранить фокус и продуктивность.

Источник: https://www.reddit.com/r/reactjs/comments/1u7pfvp/vs_code_extension_that_puts_react_props_first_in/