File Type Templates

This extension allows you to specify the default content for files based on their file type. After initialization (run command with CTRL+SHIFT+P, "Initialize file type templates folder), the .file_type_templates folder will be created at the root of the currently open workspace. Beneath that, a series of "Template.{ext}" files will be created, based on the files currently in your project. They will be blank by default, but after editing, any new files you create will be populated with the contents of the template.

So for a normal react project, you might, after initialization, see a file structure like

projectRoot/
    .file_type_templates/
        Template.js
        Template.ts
    App.js
    Components/
        Header.ts
        Body.ts

You can then edit Template.js and Template.ts to specify what you content new files should be supplied with. For example, a reasonable template for Template.js might be:

import { useState } from 'react'

export default function {{ FILE_NAME }}() {
    return (<div></div>)
}

Note the use of inline variable {{ FILE_NAME }}. This will be replaced by the name of the new file. So if you create a file called Footer.js, you would get it populated with:

import { useState } from 'react'

export default function Footer() {
    return (<div></div>)
}

Also included is a command "Apply current file type templates to all existing empty files" which will retroactively apply existing template rules to any empty files of the matching extension in your project.

Source

The extension is (as most are) open source, and can be found at https://github.com/rollie42/file-type-templates