VS Code Template

The VS Code extension from Milkio comes with a built-in template feature.

Unlike code snippets, templates can create multiple files at once. For example, we often need to write CRUD (Create, Read, Update, Delete) for certain features. With templates, we can create all these files at once.

The template feature is not only effective for Milkio projects; as long as the VS Code extension is installed, it can be used in all JavaScript projects. Are you ready to say goodbye to the days of manually typing <script lang="ts" setup>?

Installation

Milkio projects have it installed by default. For non-Milkio projects (like your Vue/React projects), you need to install it to use the templates.

bun add --dev milkio-template

Creating Templates

Create a file with any name in your /.templates directory.

/.templates/foo-template.ts

import { createTemplate } from "milkio-template";
import { join } from "path";

await createTemplate(async (tools) => {
  return {
    path: join(tools.directory(), `${tools.hyphen(tools.name())}.ts`),
    content: `
      console.log("Hello ${tools.name()}!")
    `.trim(),
  };
});

Note

After saving, right-click on any directory in VS Code and select the Create From Template.. button to experience your template!

The createTemplate can be executed multiple times, which means you can create multiple files at once.

Tools

In createTemplate, you can access the toolkit through the tools object. The following methods are available.

Name	Result Type	Description
tools.name	string	The name entered when creating the template
tools.directory	string	The directory selected when creating the template
tools.src	string	The relative path from the directory to the src directory, usually used for import paths
tools.hyphen	string	Convert the name to a hyphenated name (foo-bar)
tools.hump	string	Convert the name to PascalCase (FooBar)
tools.camel	string	Convert the name to camelCase (fooBar)

Built-in Templates

Milkio does not provide built-in templates because each team’s technology stack may be different. If Milkio provides a template biased towards one technology stack, it will disappoint users who use a different stack. Moreover, built-in templates are not editable, which means users cannot adjust some details themselves to make the template more user-friendly.