Template Manager

Create and manage template files with variables across your VS Code workspace.

Transform repetitive file creation into a one-click process. Define templates once, use them everywhere with automatic variable replacement.

🚀 Quick Setup

1. Install & Initialize

1. Install the Template Manager extension
2. Open any workspace in VS Code
3. Ctrl+Shift+P → Type "Initialize Templates" → Press Enter
4. Click "Open .templates folder" to see the created example templates

That's it! You now have a working template system with examples.

2. First Template Usage

1. Create a folder (e.g., src/components)
2. Right-click the folder → "New From Template"
3. Select react-component.tsx.template
4. Enter filename: Button.tsx
5. ✨ Instant component created with proper naming!

📋 Frequent Tasks

Create File from Template

Right-click folder → "New From Template" → Select template → Enter filename

Create Template from Existing File

Right-click file → "Create Template" → Enter template name

Use Default Template for a Folder

Right-click folder → "Create Default Template" → Enter filename

Set Up New Template System

Ctrl+Shift+P → "Initialize Templates"

✨ Key Features

🎯 Smart Filename Variables

Templates automatically adapt to your filename:

• ${_filename} → "Button.tsx"
• ${_filenameWithoutExt} → "Button"
• ${_fileExtension} → ".tsx"

📁 Organized Template Storage

workspace/
├── .templates/
│   ├── variables.json          # Your custom variables
│   ├── defaults.json          # Folder-specific templates
│   ├── react-component.tsx.template
│   ├── service.ts.template
│   └── your-custom.template
└── src/

🔧 Context Menu Integration

• Folders: New From Template, Create Default Template
• Files: Create Template
• Command Palette: Initialize Templates

⚡ Path-Based Defaults

Automatically use the right template based on folder location:

{
  "src/components": {
    "template": "react-component.tsx.template",
    "setForAllChildren": true
  }
}

📖 Template Examples

React Component Template

// react-component.tsx.template
import React from 'react';
import './${_filenameWithoutExt}.css';

interface ${_filenameWithoutExt}Props {
  className?: string;
  children?: React.ReactNode;
}

/**
 * ${_filenameWithoutExt} component
 * @author ${author}
 * @created ${currentYear}
 */
export const ${_filenameWithoutExt}: React.FC<${_filenameWithoutExt}Props> = ({ 
  className = '',
  children,
  ...props 
}) => {
  return (
    <div className={`${componentPrefix.toLowerCase()}-${_filenameWithoutExt.toLowerCase()} ${className}`} {...props}>
      <h2>${_filenameWithoutExt} Component</h2>
      {children}
    </div>
  );
};

export default ${_filenameWithoutExt};

Creating "Button.tsx" generates:

import React from 'react';
import './Button.css';

interface ButtonProps {
  className?: string;
  children?: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({ 
  className = '',
  children,
  ...props 
}) => {
  return (
    <div className={`ac-button ${className}`} {...props}>
      <h2>Button Component</h2>
      {children}
    </div>
  );
};

export default Button;

🔧 Configuration

Variables (.templates/variables.json)

Define reusable values for all templates:

{
  "author": "Your Name",
  "email": "your.email@company.com",
  "projectName": "MyProject",
  "currentYear": "2024",
  "license": "MIT",
  "company": "Your Company",
  "componentPrefix": "YC"
}

Default Templates (.templates/defaults.json)

Assign templates to specific folders:

{
  "src/components": {
    "template": "react-component.tsx.template",
    "setForAllChildren": true
  },
  "src/services": {
    "template": "service.ts.template", 
    "setForAllChildren": true
  },
  "src/utils": {
    "template": "utility.ts.template",
    "setForAllChildren": false
  }
}

Inheritance Rules:

• setForAllChildren: true → All subfolders inherit this template
• setForAllChildren: false → Only this exact path uses the template
• More specific paths override less specific ones

🎯 Advanced Usage

Template Variables Reference

Built-in Filename Variables

• ${_filename} - Complete filename (e.g., "Button.tsx")
• ${_filenameWithoutExt} - Filename without extension (e.g., "Button")
• ${_fileExtension} - File extension only (e.g., ".tsx")

Custom Variables

Use any variables defined in variables.json:

{
  "author": "John Doe",
  "license": "MIT",
  "version": "1.0.0"
}

Use in templates: ${author}, ${license}, ${version}

Creating Custom Templates

Basic Template

// my-module.js.template
/**
 * ${_filenameWithoutExt} Module
 * @author ${author}
 * @created ${currentYear}
 */

export class ${_filenameWithoutExt} {
  constructor() {
    console.log('${_filenameWithoutExt} initialized');
  }
}

export default ${_filenameWithoutExt};

Service Template

// api-service.ts.template
/**
 * ${_filenameWithoutExt} API Service
 * @author ${author}
 */

export interface ${_filenameWithoutExt}Config {
  baseUrl?: string;
  timeout?: number;
}

export class ${_filenameWithoutExt}Service {
  private config: ${_filenameWithoutExt}Config;

  constructor(config: ${_filenameWithoutExt}Config = {}) {
    this.config = {
      baseUrl: process.env.API_BASE_URL || 'http://localhost:3000',
      timeout: 5000,
      ...config
    };
  }

  async getData(): Promise<any> {
    // Implementation here
    return {};
  }
}

export default ${_filenameWithoutExt}Service;

🏗️ Project Structure

Recommended Setup

your-project/
├── .templates/
│   ├── variables.json
│   ├── defaults.json
│   ├── components/
│   │   ├── react-component.tsx.template
│   │   └── vue-component.vue.template
│   ├── services/
│   │   ├── api-service.ts.template
│   │   └── data-service.ts.template
│   └── tests/
│       ├── unit-test.spec.ts.template
│       └── integration-test.spec.ts.template
├── src/
│   ├── components/
│   ├── services/
│   └── utils/
└── package.json

Template Organization Tips

• Group by type: Create subfolders for different template categories
• Descriptive names: Use clear template names like react-component.tsx.template
• Include extensions: Help users understand what file type will be created
• Document variables: Add comments in templates explaining required variables

🛠️ Troubleshooting

Common Issues

Q: Templates not appearing in menu

• Ensure .templates folder exists in workspace root
• Check template files have proper extensions
• Run "Initialize Templates" to set up examples

Q: Variables not being replaced

• Check variable names match exactly (case-sensitive)
• Ensure variables.json is valid JSON
• Verify variable syntax uses ${variableName}

Q: Default templates not working

• Check defaults.json configuration
• Verify template file exists in .templates folder
• Ensure path matches exactly

Q: Context menu items missing

• Extension may not be activated - check for notification
• Try reloading VS Code window
• Check Developer Tools console for errors

Getting Help

• Enable Developer Tools for detailed logging: Help → Toggle Developer Tools → Console tab
• Check VS Code Output panel for extension logs
• Ensure workspace folder is properly opened in VS Code

Debugging Default Templates

The extension now includes detailed logging for default template resolution:

1. Open Developer Tools Console (Help → Toggle Developer Tools)
2. Try "Create Default Template" on a folder
3. Check console output for path resolution details:
   • createDefaultTemplate - Relative path: src/components
   • getDefaultTemplate - Available defaults: {...}
   • getDefaultTemplate - Checking parent path: "src"

🚀 Tips & Best Practices

Template Design

• Use filename variables for flexible naming
• Include default values where possible
• Add helpful comments for template users
• Test with different filenames to ensure robustness

Organization

• Set up defaults for your most common folders
• Use inheritance to reduce duplication
• Create team templates for consistent coding standards
• Version control your .templates folder

Workflow Integration

• Initialize templates in new projects immediately
• Create templates from your best existing files
• Share templates across team projects
• Update variables for each project's needs

📄 License

MIT License - Feel free to use in your projects!

🎉 Happy templating! Create once, use everywhere.