Hey there! Ever found yourself copying and pasting the same component structure for the tenth time this week? Or maybe you've spent way too much time fixing inconsistencies in boilerplate code when you could be building actual features? Trust me, I've been there too, and it was driving me crazy.
That frustration led me to create Code Template Hub, a VS Code extension that's completely changed how I approach repetitive coding tasks. I'm excited to share it with you today!
Why I Built This (My Story)
Let me tell you a bit about my situation. I split my coding time between my day job at a company and my projects at home. These two worlds have totally different requirements, coding standards, and project structures.
At work, we needed standardized templates that every team member could use to ensure consistency across our codebase. Nothing kills productivity like having five developers each implementing components in their own unique way!
For my personal projects, I wanted something more flexible that matched my personal coding style. I didn't want to compromise on either front - I needed templates that would work seamlessly in both contexts.
I searched and searched for an extension that could:
- Be flexible enough for ANY templating situation
- Support different template sets for work vs. personal projects
- Play nicely with version control (crucial for team collaboration!)
- Be simple enough that my colleagues would actually use it
Nothing quite fit the bill. So I did what developers do best - I built it myself! Code Template Hub is the result of scratching my own itch.
What Code Template Hub Does For Me (And Can Do For You)
In simple terms, Code Template Hub lets me quickly generate files from templates stored in git repositories. But it's so much more than that.
Think of it as your personal coding assistant that knows exactly how you (or your team) like to structure your files. Need a new React component with all the trimmings? Two clicks. API service with proper error handling? Three clicks. Documentation file with your team's exact required sections? Done.
The best part? The templates evolve as my needs change, and I can have completely different templates for work versus personal projects. No more context switching headaches!
My Favorite Features (That You'll Love Too)
Here's what makes Code Template Hub so powerful in my daily workflow:
📦 Repository-based Templates with Automatic Updates
All my templates live in git repositories - just like my code. This means they're versioned, trackable, and shareable with my team. I configure my repositories through VS Code settings, which lets everyone on the team access the same templates.
The best part? Templates update automatically when VS Code starts. This means my team is always using the latest version - no more "oh, I was using the old template" problems!
💪 Powerful Templating Engine That Does The Heavy Lifting
I'm using dot.js as the templating engine, which gives me incredible flexibility. I can add loops, conditionals, and transformations directly in my templates. I've created templates that adapt to different component types, styling approaches, and project structures - all from a single template file.
🧩 Smart Parameters That Adjust To What You Need
One of my favorite innovations is how parameters work. I can define what information I need from the user, add validation to prevent mistakes, and even make certain prompts appear or disappear based on previous answers.
For example, if a user selects "Include Tests" for a component, only then do I show them options for test configuration. This keeps things clean and focused.
🔮 Advanced Variables For Intelligent Templates
The variables feature has been a complete game-changer for me. Beyond just collecting user input, I can define sophisticated variables that preprocess parameters or analyze the file structure where the template will be created.
What makes this truly powerful is the ability to define custom JavaScript functions (in separate files) on a template-by-template basis. These functions can:
- Fetch information from web APIs
- Analyze the project structure
- Transform user inputs into exactly what the template needs
- Generate complex derived values based on multiple parameters
For instance, in one of my templates, I created a function that checks our API documentation and automatically pulls in the latest endpoint structure. Another template examines the surrounding folder structure to adapt its output to match existing patterns.
Since these are full JavaScript functions with access to the workspace context, the possibilities are virtually limitless. It's like having a mini-AI assistant that understands your project before generating files!
👥 Author Info That's Always Correct
I've set up author and organization information in my VS Code settings, which means every file created has consistent attribution. My team members do the same, so we always know who created what. It's a small thing, but it adds accountability and helps with code ownership questions down the road.
🗂️ Complex File Structures With One Click
My absolute favorite capability is creating multiple files from a single template. For example, when I create a new feature, I need:
- Component files
- Style files
- Test files
- Documentation
- Index exports
Before, this was a tedious, error-prone process. Now, I select one template and get a complete, perfectly structured feature folder. It's almost magical how much time this saves!
How I Use It (And How You Can Too)
Here's my typical workflow:
- I've set up two repositories: one for work templates and one for personal projects
- I create template files using dot.js syntax, adding placeholders for things like component names
- When I need a new feature, I right-click in VS Code, select "New from Template...," and follow the prompts
The extension handles the rest, processing each template file and replacing placeholders with my input. The first time I showed this to a colleague, their jaw literally dropped. "You made that whole folder structure with two clicks?!" was the reaction.
Real-World Examples That Transformed My Workflow
Here's how Code Template Hub has changed my daily coding life:
React Components That Just Make Sense
Creating React components used to be tedious. Now, one template generates:
- A properly structured component file
- Styling that matches our project's approach (CSS modules, styled-components, or Tailwind)
- Index exports for clean imports
- Test files with proper testing library setup
The template even adapts based on the parameters I choose. If I select "Include Hooks," it automatically adds useState and useEffect imports and boilerplate. If I choose "With TypeScript," it adds the proper type definitions.
API Integration Without The Boilerplate
API integration always required tons of repetitive code. With Code Template Hub, I created a template that generates:
- Service functions with proper error handling
- Type definitions that match our API structure
- Mock data for testing scenarios
- Documentation comments with usage examples
The conditional prompts feature really shines here - I only see options relevant to the type of API I'm integrating with.
Documentation That People Actually Write
Let's be honest - documentation is often neglected because it's tedious to set up properly. My documentation template:
- Creates files with all required sections pre-populated
- Automatically includes author information
- Sets up the proper formatting and structure
- Adds the creation date and basic metadata
Since implementing this, our team's documentation quality has dramatically improved!
Getting Started (It's Easier Than You Think!)
Ready to try it yourself? Here's how to get started:
- Install Code Template Hub from the VS Code Marketplace
- Configure at least one template repository in your VS Code settings
- Run "Code Template Hub: Refresh Templates" to fetch your templates
- Right-click in Explorer and select "New from Template..."
That's it! Your first template creation is just a few clicks away.
How Templates Are Structured (For The Curious)
If you're interested in creating your own templates, here's a peek at how they're structured:
A template repository must contain a templates.json file in the root directory that defines all available templates and their parameters. This file is essential as it's what the extension looks for when loading templates. The template files themselves live in a subdirectory.
For example, a React component template might include:
/
├── templates.json
├── templates/
│ ├── react/
│ │ ├── component.dot.js
│ │ ├── styles.dot.js
│ │ └── index.dot.js
The beauty of this system is that you can structure your templates however makes sense for your workflow.
From Frustration To Freedom
Before I created Code Template Hub, I was spending hours each week on repetitive file creation tasks. Now, that time is spent actually solving interesting problems and building features.
The ability to use different template sets for my company work versus personal projects has been a complete game-changer. I no longer have to context-switch between different coding standards - my templates handle that mental overhead for me.
If you're like me and tired of repetitive boilerplate tasks stealing your coding joy, give Code Template Hub a try. I built it to scratch my own itch, but I'd be thrilled if it helps you too!
Check out Code Template Hub on GitHub and install it from the VS Code Marketplace today. I'd love to hear how you're using it and any suggestions for making it even better!
Top comments (0)