Editing Stubs/Templates


Video tutorial coming soon...


With the Templates Editor, you can change the way that Vemto generates the code. All templates use Vemto Template Engine, so if you don't know how it works, you can learn more about it here.

{info} Currently, on version 1.0.0, not all templates are available to edit. We will continuously add templates to the editor until we cover all the Code Generation process


image


Considerations

Before starting to edit Vemto Templates, there are some considerations to take in advance:


1- It is highly recommended to learn VET (Vemto Template Engine) before editing the stubs. You can use the Playground mode to play with VET and to test templates when creating plugins.


2- All pre-defined data used by a Template come from the current project. It is not possible to access data from another project in the Templates Editor screen.


3- All Vemto templates have some data injected by default, using the VET Data-Injection mechanism:

  • this.project - a Project instance representing the current project
  • this.projectHelper - A ProjectHelper instance that you can use to generate namespaces and other utilities
  • this.fileNameWithoutExtension - The name of the file that is being generated, but without extension. For example, if the file is UserController.php, this property value will be UserController.
  • this.generatorSettings - A GeneratorSettings object with all the settings chosen in the Generate Code screen


3- It is not necessary to enable the indent-back mode, as Vemto templates have a pre-defined Formatter that formats it after the generation following some patterns.

Coding Style


Although VET doesn't define a specific code style, we created some rules to follow with the Vemto templates. It helps to improve their readability and maintainability.

{info} Vemto templates are generally a mix of two types of code: the code you want to generate, and the code from VET, that controls the flux. So, if you don't follow some patterns, it is easy to end with spaghetti code

Here are some of the best practices:


1- Use indentation in logic blocks whenever possible
2- Create internal variables in templates to make the code easier to read (add global template variables to the <# TEMPLATE VARIABLES #> section)
3- Use comments <# --- #> to separate different blocks of code
4- Use comments to explain more complex sections of code (unlike the common code for applications we are used to, templates code can quickly turn into something complex, so sometimes comments will be of tremendous help)


image

Data Editor

The data editor is a small screen used to "mock" the data used to compile each template. All the data here is directly passed to the VET template and could be accessed using the "this" identifier.


When working on Playground Mode, you have total control over the data. When editing the Data from a Vemto modified template, you can change the values, but not the keys (neither add other keys).


image


The data in the image above can be accessed using the following identifiers inside the template:


this.crud
this.settings

// Usage examples
this.crud.name

if(this.settings.requests) {
    // ...
}

Formatters

Formatters defines the way Vemto formats the code after it is compiled by VET. The following Formatters are available:


  • PHP Formatter - formats the code as a valid PSR-2 PHP Code
  • JS Formatter - formats the code as javascript
  • HTML Formatter - formats the code as HTML
  • Blade Formatter - formats the code as Blade


{warning} You can change the Formatter to see how it works, but Vemto will always use the default Formatter when generating the code from default templates, even if modified.

Handling Errors

When changing the template code, Vemto automatically compiles it to show in the right editor. If an error is found, it will be shown on the Errors tab.


image


{info} Vemto does not open the errors tab by default because it is common to find errors while typing the code. So, don't worry much about this tab. You can open it only when necessary to find a specific error.

Playground Mode

On the Playground Mode, you can freely write VET code and define data on the Data Editor. This mode is util for learning VET, testing hypotheses, and creating templates for custom plugins.


image