Plugin ITDS Snippets

ITDS Snippets es una extensión para Visual Studio Code diseñada para facilitar el desarrollo de aplicaciones React utilizando el sistema de diseño ITDS. Esta extensión proporciona una colección de fragmentos de código (snippets) optimizados que te ayudarán a implementar componentes ITDS de manera rápida y eficiente, manteniendo la coherencia en el estilo y los patrones de diseño de tu proyecto.

Características

Snippets para Componentes Comunes: Accede a fragmentos de código predefinidos para los componentes React más utilizados en ITDS, como botones, formularios, y más.
Estilos Consistentes: Aplica automáticamente los estilos CSS estándares de ITDS, garantizando una integración fluida con el sistema de diseño.
Productividad Mejorada: Reduce el tiempo de escritura repetitiva y minimiza errores comunes al utilizar fragmentos de código predefinidos.
Actualizaciones Regulares: Mantén tus snippets actualizados con las últimas versiones de ITDS y los cambios en los patrones de diseño.

Instalación

Abre Visual Studio Code.
Ve a la pestaña de Extensiones (o presiona Ctrl+Shift+X).
Busca "ITDS Snippets" e instala la extensión.
Reinicia VSCode si es necesario.

Uso de los Snippets

Una vez que hayas instalado la extensión, puedes empezar a usar los snippets en tus archivos de código:
Escribe el prefijo del snippet en un archivo .tsx donde quieras insertar un componente. Por ejemplo, para insertar un componente Background, escribe @bg.
Presiona Tab para autocompletar el snippet.
Personaliza los valores generados por el snippet según tus necesidades.
A continuación, se presenta una lista de los snippets disponibles y su correspondiente prefijo:

Available Snippets

Component	Prefix	Description
Background	`@bg`	Inserts a `Background` component with an image.
Button	`@btn`	Inserts a `Button` component.
Icon Button	`@ibtn`	Inserts an `IconButton` component.
Text Input	`@input`	Inserts a `TextInput` component.
Select	`@select`	Inserts a `Select` component with predefined options.
Checkbox	`@checkbox`	Inserts a `Checkbox` component.
Radio Button	`@radio`	Inserts a `RadioButton` component.
Toggle Button	`@toggle`	Inserts a `ToggleButton` component.
Modal	`@modal`	Inserts a `Modal` component with action buttons.
Card	`@card`	Inserts a `Card` component with headline, image, and description.
Table	`@table`	Inserts a `Table` component with columns and rows.
Accordion	`@accordion`	Inserts an `Accordion` with multiple items.
Breadcrumbs	`@breadcrumbs`	Inserts a `Breadcrumbs` component with items.
Loader	`@loader`	Inserts a `Loader` component with progress.
Tag	`@tag`	Inserts a `Tag` component with a label and color.
Stepper	`@stepper`	Inserts a `Stepper` component with steps.
Alert	`@alert`	Inserts an `Alert` component with actions.
Avatar	`@avatar`	Inserts an `Avatar` component with an image.
Badge	`@badge`	Inserts a `Badge` component with a counter.
Bottom Navigation	`@bottomnav`	Inserts a `BottomNavigation` component with items.
Bottom Sheet	`@bottomsheet`	Inserts a `BottomSheet` component with actions.
Carrousel	`@carrousel`	Inserts a `Carrousel` component with images.
Counter	`@counter`	Inserts a `Counter` component with min/max values.
Currency Input	`@currency`	Inserts a `CurrencyInput` component with currency symbol.
Date Input	`@dateinput`	Inserts a `DateInput` component with date range.
Divider	`@divider`	Inserts a `Divider` component with a label.
Drawer	`@drawer`	Inserts a `Drawer` component with content and actions.
Empty State	`@emptystate`	Inserts an `EmptyState` component with actions.
File Input	`@fileinput`	Inserts a `FileInput` component with helper text.
Filter Panel	`@filterpanel`	Inserts a `FilterPanel` component with actions.
Flex	`@flex`	Inserts a `Flex` container with customizable layout.
Grid	`@grid`	Inserts a `Grid` component with responsive columns.
Headline	`@headline`	Inserts a `Headline` component with title and subtitle.
Help Text	`@helptext`	Inserts a `HelpText` component with a message.
Icon	`@icon`	Inserts an `Icon` component with size and variant.
Image	`@image`	Inserts an `Image` component with an alt description.
Image Upload	`@imageupload`	Inserts an `ImageUpload` component with preview.
Item List	`@itemlist`	Inserts an `ItemList` component with items.
Layout	`@layout`	Inserts a `Layout` component with header and footer.
Link	`@link`	Inserts a `Link` component with an icon.
Menu	`@menu`	Inserts a `Menu` component with items and actions.
Multi-Select	`@multiselect`	Inserts a `MultiSelect` component with options.
Navbar	`@navbar`	Inserts a `Navbar` component with user information.
Notification	`@notification`	Inserts a `Notification` snippet to add a notification.

Example

Here’s an example of how to use the @btn snippet:

@btn

Demostración de la extensión