Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>New Patternlab FolderNew to Visual Studio Code? Get it now.
New Patternlab Folder

New Patternlab Folder

argentinardo

|
10 installs
| (0) | Free
Create a hbs, scss, and json file with the same name of a new folder
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Here's an English explanation of the plugin's functionality in the requested format:

New Patternlab Folder

Creates a "Create New Patternlab Folder" option in the Explorer context menu. This option allows you to enter a name for a new component folder. The plugin then generates the folder with matching template, style, config, and documentation files.

Configuration

Configure file creation in settings:

Template File Format: The extension for the template file. Enter the extension name without a preceding ., e.g. hbs, twig, njk. Default: hbs

Style Options: Choose between .scss, .sass, .css, .less, etc... Default: scss

Data File Format: Select between .json or .yml for the data file. Default: json

Documentation: Option to create a .md file for component documentation. Default: Yes

Usage

  1. Right-click a file or folder in the file explorer where you want to create the new Patternlab component folder.
  2. Select "Create New Patternlab Folder" from the context menu.
  3. Enter the desired component name in the input box.

The plugin will then create all the configured files for a Patternlab module with a single command. By default, it generates hbs, js, scss, json, and md files, but this can be customized in the settings.

This tool streamlines the process of setting up new Patternlab components by automatically creating all necessary files with the correct naming conventions.

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