Skip to content

Simplifies TypeScript development by providing customizable templates for generating TypeScript classes, interfaces, enums, types, functions, and variables directly from VS Code

License

Notifications You must be signed in to change notification settings

ManuelGil/vscode-typescript-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Auto TS Generator

Visual Studio Marketplace Version Visual Studio Marketplace Installs Visual Studio Marketplace Downloads Visual Studio Marketplace Rating GitHub Repo stars GitHub license

Auto TS Generator is a Visual Studio Code extension that streamlines TypeScript development by generating commonly used TypeScript files with customizable templates. Whether you're working on a class, interface, enum, or custom component, Auto TS Generator helps you automate the process with ease.

Auto TS Generator

Index

Key Features

  • Customizable Templates: Tailor TypeScript file templates (e.g., classes, interfaces, enums, services, components) to your project’s needs.
  • Dynamic Variables: Use powerful variable placeholders to dynamically populate file names, extensions, dates, authors, and more.
  • Auto Import: Automatically imports generated files into your project for seamless integration.
  • Project Configuration: Easily set up project-level configurations for file formatting, structure, and more.
  • Open Source: Contribute to the project or simply benefit from the shared work of the community.

Requirements

  • VS Code 1.88.0 or higher.

Project Setup

To configure Auto TS Generator for your project, follow these steps:

  1. Open VS Code Command Palette:

    • Windows: CTRL + SHIFT + P
    • MacOS: CMD + SHIFT + P
  2. Open Workspace Settings:

    • Type Preferences: Open Workspace Settings (JSON).
  3. Add Configuration to settings.json: Copy the following configuration into your .vscode/settings.json file:

    {
        "autoTS.enable": true,
        "autoTS.files.defaultLanguage": "TypeScript",
        "autoTS.files.fileExtension": "ts",
        "autoTS.files.skipFolderConfirmation": false,
        "autoTS.files.includeTypeInFileName": false,
        "autoTS.files.skipTypeSelection": true,
        "autoTS.files.autoImport": false,
        "autoTS.files.defaultBarrelFileName": "index",
        "autoTS.formatting.useSingleQuotes": true,
        "autoTS.formatting.excludeSemiColonAtEndOfLine": false,
        "autoTS.formatting.keepExtensionOnExport": false,
        "autoTS.formatting.endOfLine": "lf",
        "autoTS.formatting.useStrict": false,
        "autoTS.formatting.headerCommentTemplate": [],
        "autoTS.formatting.insertFinalNewline": true,
        "autoTS.project.author": "Jane Doe",
        "autoTS.project.owner": "Jane Doe",
        "autoTS.project.maintainers": "Jane Doe, John Doe",
        "autoTS.project.license": "MIT",
        "autoTS.project.version": "1.0.0",
        "autoTS.templates.customComponents": [
            {
                "name": "Service",
                "description": "Generates a service file",
                "type": "service",
                "template": [
                    "import { Injectable } from '@angular/core';",
                    "",
                    "@Injectable({",
                    "  providedIn: 'root'",
                    "})",
                    "export class {{fileNamePascalCase}}Service {",
                    "",
                    "  constructor() { }",
                    "",
                    "}"
                ]
            },
            {
                "name": "Component",
                "description": "Generates a component file",
                "type": "component",
                "template": [
                    "import { Component, OnInit } from '@angular/core';",
                    "",
                    "@Component({",
                    "  selector: 'app-{{fileName}}',",
                    "  templateUrl: './{{fileName}}.component.html',",
                    "  styleUrls: ['./{{fileName}}.component.scss']",
                    "})",
                    "export class {{fileNamePascalCase}}Component implements OnInit {",
                    "",
                    "  constructor() { }",
                    "",
                    "  ngOnInit(): void { }",
                    "",
                    "}"
                ]
            }
        ]
    }
  4. Restart VS Code to apply the settings.

Settings Configuration

You can customize the behavior of Auto TS Generator by modifying the settings in your .vscode/settings.json file. Below is a list of configurable options:

  • autoTS.enable: Toggle the extension on or off. Default is true.
  • autoTS.files.defaultLanguage: Set the default language for generated files. Default is TypeScript.
  • autoTS.files.fileExtension: Set the file extension for generated files. Default is .ts.
  • autoTS.files.skipFolderConfirmation: Skip the folder confirmation dialog when creating files. Default is false.
  • autoTS.files.includeTypeInFileName: Add the type to the file name (e.g., myNewFile.component). Default is false.
  • autoTS.files.skipTypeSelection: Skip the type selection dialog when creating files. Default is true.
  • autoTS.files.autoImport: Automatically imports generated files. Default is false.
  • autoTS.files.defaultBarrelFileName: Default name for barrel files (e.g., index). Default is index.
  • autoTS.formatting.useSingleQuotes: Format code with single quotes. Default is true.
  • autoTS.formatting.excludeSemiColonAtEndOfLine: Exclude semicolons at the end of lines. Default is false.
  • autoTS.formatting.keepExtensionOnExport: Keep file extension on exports. Default is false.
  • autoTS.formatting.endOfLine: Set the end-of-line character (e.g., lf). Default is lf.
  • autoTS.formatting.useStrict: Enable strict mode in generated files. Default is false.
  • autoTS.formatting.headerCommentTemplate: Custom header comment template for generated files. Default is an empty array.
  • autoTS.formatting.insertFinalNewline: Insert a final newline at the end of files. Default is true.
  • autoTS.project.author: Set the author of the project. Default is an empty string.
  • autoTS.project.owner: Set the owner of the project. Default is an empty string.
  • autoTS.project.maintainers: Set the maintainers of the project. Default is an empty string.
  • autoTS.project.license: Set the license of the project. Default is MIT.
  • autoTS.project.version: Set the version of the project. Default is 1.0.0.
  • autoTS.templates.customComponents: Custom templates for generating components (e.g., services, components). Default is an empty array.

You can modify these settings to suit your project's requirements and coding standards.

Custom Templates

You can create custom templates for generating TypeScript files by adding them to the autoTS.templates.customComponents array in your .vscode/settings.json file. Each template should include the following properties:

  • name: The name of the template (e.g., Service).
  • description: A brief description of the template (e.g., Generates a service file).
  • type: The type of file to generate (e.g., service). This value is used to set the file name when the autoTS.files.includeTypeInFileName setting is true.
  • template: An array of strings representing the template content. You can use template variables to dynamically populate file names and other values.

Template Variables

Auto TS Generator provides dynamic template variables for enhanced flexibility:

Variable Description Example Value
{{fileName}} Original file name myNewFile
{{fileNameCamelCase}} CamelCase format myNewFile
{{fileNamePascalCase}} PascalCase format MyNewFile
{{fileNameKebabCase}} kebab-case format my-new-file
{{fileNameSnakeCase}} snake_case format my_new_file
{{fileNameConstantCase}} CONSTANT_CASE format MY_NEW_FILE
{{fileNameDotCase}} dot.case format my.new.file
{{fileNamePathCase}} path/case format my/new/file
{{fileNameSentenceCase}} Sentence case format My new file
{{fileNameLowerCase}} Lowercase format my new file
{{fileNameTitleCase}} Title Case format My New File
{{fileNamePluralCase}} Pluralized format myNewFiles
{{fileNameSingularCase}} Singularized format myNewFile
{{fileNameWithTypeAndExtention}} File name with type and extension myNewFile.component.ts
{{fileNameWithType}} File name with type myNewFile.component
{{fileNameWithExtention}} File name with extension myNewFile.ts
{{folderName}} Parent folder name src/components
{{fileType}} File type (component, service, etc.) component
{{fileTypeName}} File type in Title Case format Service
{{fileTypeNameCamelCase}} File type in camelCase format service
{{fileTypeNamePascalCase}} File type in PascalCase format Service
{{fileTypeNameKebabCase}} File type in kebab-case format service
{{fileTypeNameSnakeCase}} File type in snake_case format service
{{fileTypeNameConstantCase}} File type in CONSTANT_CASE format SERVICE
{{fileTypeNameDotCase}} File type in dot.case format service
{{fileTypeNamePathCase}} File type in path/case format service
{{fileTypeNameSentenceCase}} File type in Sentence case format Service
{{fileTypeNameLowerCase}} File type in lowercase service
{{fileTypeNameUpperCase}} File type in uppercase SERVICE
{{fileTypeNamePlural}} File type converted to plural services
{{fileTypeNameSingular}} File type converted to singular service
{{fileTypeWithExtention}} File type including extension service.ts
{{fileExtension}} File extension ts
{{date}} Current date 2025-01-31
{{year}} Current year 2025
{{time}} Current time 12:34:56
{{timestamp}} Unix timestamp 1672531199
{{timestampISO}} ISO timestamp 2025-01-31T12:34:56Z
{{author}} Project author Jane Doe
{{owner}} Project owner Jane Doe
{{maintainers}} Project maintainers Jane Doe, John Doe
{{license}} Project license MIT
{{version}} Project version 1.0.0

These variables allow you to create highly flexible templates that adapt to different file naming conventions and project structures.

Follow Me

Stay updated on the latest features, improvements, and future projects by following me:

VSXpert Template

This extension was created using VSXpert, a template designed to help you quickly create Visual Studio Code extensions with ease.

Other Extensions

Explore other extensions developed by me:

Contributing

We welcome contributions from the community! To contribute, fork the GitHub repository and submit a pull request.

Before contributing, please review our Contribution Guidelines for details on coding standards and best practices.

Code of Conduct

We strive to create a welcoming, inclusive, and respectful environment for all contributors. Please read our Code of Conduct before participating in this project.

Changelog

See the full list of changes in the CHANGELOG.md file.

License

This extension is licensed under the MIT License. See the MIT License for more details.