Archittect Guide

There are two ways you can start using Archittect, either within our website or by downloading our VSCode extension. However, we recommend the latter to take advantage of a greater number of functionalities.

To get started, download VSCode and go to the extensions section. Type the name of our tool 'Archittect' and click the install button.

Once you have our extension installed, you will see our icon in the VSCode Activity Bar. Click on it to start using the tool.

Sign up with your Github or email account.

Scaffolds:

Use Scaffolds when you need to create files and folders. If you only want to insert code snippets, use Snippets.

On the home screen, you will see the Scaffold tab and the Create new scaffold button. Create a file structure with the specifications you need for your project.

Select one of the nodes you added within your structure, click on the edit content section, and insert the code. Repeat with each node in your Scaffold, keeping in mind that some nodes are file-type, and you can't add code to them.

To transform your code into dynamic templates, add variables. To do this, choose the name of the node you want to configure as a variable. On the right-hand sidebar, right-click and choose the variable option. Next, select the type of "casing" you want to have.

You can also create a variable within the code you inserted into your node:

• Select the text.
• Right-click and select the option: Transform ‘selection’ into a variable.

Choose the type of variable you want to insert, for example: string, number, or boolean; and write the default value you want to give it. The value you give to your variable will be reflected every time you use the created variable.

For example: If the default value you are giving to your 'language' variable is (English or En), every time you use this variable, the displayed text will be: En.

If you don't add the variable's value at this step, you can add it later when generating code from your scaffold or snippet.

Go to your project's file structure, now right-click where you want to insert your template and select the option (Archittect insert scaffold). This way, you can insert the scaffold you created with Archittect into your project.

Snippets:

Snippets, unlike scaffolds, are intended to be used directly in your already created files.

First, it's essential to understand that Snippets come grouped. This will help you keep together code snippets that you consider part of the same category. To create your first snippet, follow these steps:

• Click on the snippets tab and then click 'create new snippet group'.
• Enter the code you would like as a snippet.

By default, the group will come with an empty snippet for you to edit. Click the pencil icon if you need to change its name or add a description.

• Choose the syntax you want to use to highlight the code you add to your snippet.
• Enter the code you want as a snippet.
• You can continue to add snippets to the group you are creating, for example: frequently used React hooks. Rename the group to React Hooks. Now, in each snippet, we will input the code for these functions.

Once you finish creating your snippet, you can add it to your project.

We also allow you to create a Scaffold or a Snippet from folders, files, and code that you already have in a project and that you want to define as boilerplate and turn into a dynamic template, using Archittect.