Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Component ManagerNew to Visual Studio Code? Get it now.
Component Manager

Component Manager

MHFaust

|
18 installs
| (0) | Free
Make new components and add files from custom templates, rename and fork components easily. Supports a component-directory pattern for working with React components, while remaining framework agnostic.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Component Manager

Features

  • Create components from templates with files like tests, stories, CSS modules, READMEs, etc.
  • You define multiple template groups and files to select from
  • Add files to existing components, selecting from any template group
  • Rename components intelligently:
    • Updates import statements throughout your workspace
    • Transforms related names internally (like CSS classes) to match the new component name, recognizing instances in other cases (camelCase, kebab-case, etc.).
  • Fork components with comprehensive renaming

Quick Start

  1. Install from VS Code marketplace: search for "Component Manager"
  2. Create .component-templates.json in your project root
  3. Create a directory next to your config file to store your templates (e.g., "component-templates")
  4. Right-click any folder in VS Code's explorer and select "Component > Create..."

Getting Started

  1. Install the extension from the VS Code marketplace
  2. Create a .component-templates.json configuration file in your project root
  3. Create your template directory as a sibling to your config file
  4. Right-click in the explorer to access component generation commands

Configuration

Create a .component-templates.json file in your project root or any parent directory of where you'll be creating components.

Basic Configuration Example

{
  "templatesDirectory": "component-templates",
  "directoryCase": "pascal",
  "defaultTemplateGroup": ["component.tsx.template", "index.ts.template", "styles.scss.template"],
  "templates": [
    {
      "source": "component.tsx.template",
      "target": "{{PascalCaseComponentName}}.tsx",
      "label": "Component"
    },
    {
      "source": "index.ts.template",
      "target": "index.ts",
      "label": "Index"
    },
    {
      "source": "styles.scss.template",
      "target": "{{PascalCaseComponentName}}.module.scss",
      "label": "Styles"
    }
  ]
}

Configuration Properties

  • templatesDirectory: Directory containing template files (relative to config file location)
  • directoryCase (optional): Specifies the case format for component directories. Can be one of: "pascal", "camel", "kebab", or "snake"
  • defaultTemplateGroup: Array of template sources to use for the default "Create..." command
  • alternateTemplateGroups (optional): Array of named template groups for the "Create (choose file set)..." command
  • templates: Array of template configurations with the following properties:
    • source: Template file name in the templates directory
    • target: Output file name (can include case-sensitive tokens)
    • label: Display name for the template in the UI

Case Transformation Tokens

You can use these tokens in template files and target filenames for automatic case transformation:

  • {{PascalCaseComponentName}} → MyComponent
  • {{camelCaseComponentName}} → myComponent
  • {{kebab-case-component-name}} → my-component
  • {{snake_case_component_name}} → my_component

Advanced Configuration Example

{
  "templatesDirectory": "component-templates",
  "directoryCase": "pascal",
  "defaultTemplateGroup": [
    "component.tsx.template",
    "index.ts.template",
    "styles.scss.template",
    "test.tsx.template"
  ],
  "alternateTemplateGroups": [
    {
      "label": "Simple Component",
      "templates": ["component-simple.tsx.template", "index.ts.template"]
    },
    {
      "label": "Full Feature Set",
      "templates": [
        "component.tsx.template",
        "index.ts.template",
        "styles.scss.template",
        "test.tsx.template",
        "types.ts.template"
      ]
    }
  ],
  "templates": [
    {
      "source": "component.tsx.template",
      "target": "{{PascalCaseComponentName}}.tsx",
      "label": "Component"
    },
    {
      "source": "component-simple.tsx.template",
      "target": "{{PascalCaseComponentName}}.tsx",
      "label": "Simple Component"
    },
    {
      "source": "index.ts.template",
      "target": "index.ts",
      "label": "Index"
    },
    {
      "source": "styles.scss.template",
      "target": "{{PascalCaseComponentName}}.module.scss",
      "label": "Styles"
    },
    {
      "source": "test.tsx.template",
      "target": "{{PascalCaseComponentName}}.test.tsx",
      "label": "Test"
    },
    {
      "source": "types.ts.template",
      "target": "types.ts",
      "label": "Types"
    }
  ]
}

Template Examples

Component Template (component.tsx.template)

import styles from './{{PascalCaseComponentName}}.module.scss';

type {{PascalCaseComponentName}}Props = {};

const {{PascalCaseComponentName}} = ({}: {{PascalCaseComponentName}}Props) => {
  return <div className={styles.{{camelCaseComponentName}}}></div>;
};

export default {{PascalCaseComponentName}};

Style Template (styles.scss.template)

.{{camelCaseComponentName}} {

}

Index Template (index.ts.template)

export { default } from './{{PascalCaseComponentName}}';

Test Template (test.tsx.template)

import { render } from '@testing-library/react';
import {{PascalCaseComponentName}} from './{{PascalCaseComponentName}}';

describe('{{PascalCaseComponentName}}', () => {
  it('renders without crashing', () => {
    render(<{{PascalCaseComponentName}} />);
  });
});

Usage

Commands

Right-click in the file explorer to access these commands:

  1. Create...

    • Creates a new component using the default template group
    • Component name can be in PascalCase, camelCase, kebab-case, or snake_case
  2. Create (choose file set)...

    • Creates a new component after selecting from available template groups
    • Shows template groups defined in alternateTemplateGroups
  3. Add Files...

    • Adds additional files to an existing component
    • Shows available templates from all groups
  4. Rename...

    • Renames a component directory and all its files
    • Updates imports across the workspace
    • Preserves case variations in files and content

Component Name Formats

Component names can be provided in any of these formats:

  • PascalCase: MyComponent
  • camelCase: myComponent
  • kebab-case: my-component
  • snake_case: my_component

The extension will automatically transform the name to the appropriate case based on:

  • The directoryCase setting for the component directory
  • The token used in template files and target file names

Development

Prerequisites

  • Node.js
  • Visual Studio Code

Setup

  1. Clone the repository
  2. Run npm install
  3. Open the project in VS Code
  4. Press F5 to start debugging

Available Scripts

  • npm run compile: Compile TypeScript files
  • npm run watch: Watch for file changes and recompile
  • npm run lint: Run ESLint
  • npm test: Run tests

Contributing

Contributions are welcome! Please:

  1. Fork the repository
  2. Create a feature branch
  3. Commit your changes
  4. Push to your branch
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft