Guía de Archittect

Existen dos formas en las que puedes comenzar a usar Archittect, dentro de nuestra web o descargándote nuestra extensión en VSCode. Sin embargo, te recomendamos que uses la segunda para aprovechar mayor número de funcionalidades.

Para comenzar, descarga VSCode y dirígete a la sección de extensiones. Escribe el nombre de nuestra herramienta “Archittect” y dale al botón install.

Una vez que tengas instalada nuestra extensión, podrás ver nuestro ícono en la “Activity Bar” de VSCode, dale clic para comenzar a usar la herramienta.

Regístrate con tu cuenta de Github o correo electrónico

Scaffolds:

Usa los Scaffolds cuando necesites crear archivos y carpetas. Si solo deseas insertar fragmentos de código, usa Snippets.

En la pantalla de inicio podrás ver la pestaña de Scaffold y el botón Create new scaffold. Crea una estructura de archivos con las especificaciones que requieras de acuerdo a tu proyecto.

Selecciona uno de los nodos que agregaste dentro de tu estructura, dale clic a la sección de editar contenido e inserta el código. Repite con cada uno de los nodos que tienes en tu Scaffold, toma en cuenta que algunos nodos son de tipo archivo, en esos no podrás agregarles código.

Para transformar tu código en plantillas dinámicas agrega variables. Para hacerlo elige el nombre del nodo que quieres configurarlo como variable, en la barra del lado derecho haz clic derecho y elige la opción variable, a continuación elige el tipo de “casing” que quieres tener.

También puedes crear una variable dentro del código que insertaste dentro de tu nodo:

• Selecciona el texto
• Dale clic derecho y selecciona el texto desplegado: Transform ‘selection’ into a variable

Elige el tipo de variable que quieres insertar, por ejemplo: de tipo string, number o boolean; y escribe el valor por defecto que le quieres dar, el valor que le des a tu variable será el que se vea reflejado siempre que uses la variable creada.

Por ejemplo: Si el valor por defecto que le estás dando a tu variable language es (English o En), siempre que uses esta variable, el texto que se refleje será: En

En caso de que no agregues el valor de la variable en este paso, lo podrás agregar después al generar código a partir de tu scaffold o snippet.

Dirígete a la estructura de archivos de tu proyecto, ahora da clic derecho en el lugar en el que quieres insertar tu plantilla y selecciona la opción (Archittect insert scaffold), de esta manera podrás insertar en tu proyecto el scaffold que creaste con Archittect

Snippets:

Los snippets, a diferencia de los scaffolds, están orientados a ser usados directamente en tus archivos ya creados.

En primer lugar es importante entender que los Snippets vienen agrupados. Esto te ayudará a tener juntos los fragmentos de código que consideres parte de una misma categoría. Para crear tu primer snippet sigue los siguientes pasos:

• Dale clic a la pestaña de snippets y luego da click en 'create new snippet group'
• Ingresa el código que desees como snippet

Por defecto el grupo vendrá con un snippet vacío para que tu lo edites. Da clic al ícono de lápiz si necesitas cambiar su nombre o agregar una descripción.

• Elige la sintaxis que quieres usar para resaltar el código que agregues en tu snippet.
• Ingresa el código que desees como snippet
• Puedes seguir agregando snippets en el grupo que estás creando, por ejemplo: hooks de react que usamos con frecuencia. Renombraremos el grupo a React Hooks. Ahora en cada snippet introduciremos el código de estas funciones.

Una vez que termines de crear tu snippet puedes agregarlo dentro de tu proyecto:

También te permitimos crear un Scaffold o un Snippet a partir de carpetas, archivos y código que ya tengas en un proyecto y que quieras definirlo como boilerplate y transformarlo en una plantilla dinámica, usando Archittect.