Boilerplate! Variable examples

variable-examples.md

Variable Showcase Template

This template demonstrates the enhanced variable system in the File Template extension.

Basic Variables

The value of filename is: ${input.filename}

String Transformations

• Uppercase: ${filename:uppercase}
• Lowercase: ${filename:lowercase}
• Capitalize: ${filename:capitalize}
• CamelCase: ${filename:camelcase}
• PascalCase: ${filename:pascalcase}
• snake_case: ${filename:snakecase}
• kebab-case: ${filename:kebabcase}

Date and Time

• Today's date: ${date:YYYY-MM-DD}
• Current time: ${date:HH:mm:ss}
• Full timestamp: ${date:YYYY-MM-DD HH:mm:ss}

UUIDs

• Standard UUID: ${uuid}
• Short UUID: ${uuid:short}

Counter Examples

• Simple Counter: ${counter}
• Counter with Start: ${counter:start=10}
• Counter with Padding: ${counter:padding=3}
• Counter with Step: ${counter:step=5}
• Combined Counter: ${counter:start=100:step=10:padding=4}

Environment Information

• User's HOME: ${env:HOME:/not-found}
• Username: ${env:USERNAME:anonymous}

Git Information

• Branch: ${git:branch}
• Repository: ${git:repo}
• Author: ${git:author}
• Email: ${git:email}

JavaScript Evaluation

You can also use JavaScript expressions with the {{{ }}} syntax:

{{{
	// This will be executed as JavaScript
	variables.calculatedValue = 40 + 2;
	variables.timestamp = Date.now();
	variables.randomNumber = Math.floor(Math.random() * 100);
}}}

Calculated value: ${{ variables.calculatedValue }} Timestamp: ${{ variables.timestamp }} Random number: ${{ variables.randomNumber }}

Combining with Conditionals

You can use the JavaScript evaluation to create conditionals:

{{{
	// Example conditional logic
	// Initialize the filename variable if it doesn't exist
	variables.filename = variables.filename || '';

	if (variables.filename.toLowerCase().includes('component')) {
		variables.fileType = 'Component';
	} else if (variables.filename.toLowerCase().includes('service')) {
		variables.fileType = 'Service';
	} else {
		variables.fileType = 'Generic';
	}
}}}

This file is a: ${{ variables.fileType }}

Regular Template Variables

Any variables defined in your settings.json will also be available:

• Example: ${foo}

{filename}-component.ts

/**
 * ${filename:pascalcase} Component
 * Created on ${date:YYYY-MM-DD} by ${git:author}
 * Generated ID: ${uuid:short}
 */

export class ${filename:pascalcase}Component {
    private id = '${uuid}';
    private createdAt = new Date('${date:YYYY-MM-DD}');

    constructor() {
        console.log('${filename:pascalcase}Component initialized');
    }

{{{
      // Generate methods based on the filename
      // Initialize variables.filename if it doesn't exist
      variables.filename = variables.filename || '';

      if (variables.filename.toLowerCase().includes('form')) {
        variables.methods = `
    // Form-specific methods
    validate(): boolean {
        return true;
    }

    submit(): void {
        console.log('Form submitted');
    }
        `;
      } else if (variables.filename.toLowerCase().includes('list')) {
        variables.methods = `
    // List-specific methods
    fetchItems(): void {
        console.log('Fetching items');
    }

    refresh(): void {
        console.log('Refreshing list');
    }
        `;
      } else {
        variables.methods = `
    // Generic methods
    initialize(): void {
        console.log('Initializing component');
    }
        `;
      }
}}}
    ${{ variables.methods }}
}