Easy Pattern

Design a file/folder pattern once, then scaffold it anywhere in a few keystrokes.

Right-click a folder → Easy Pattern: Generate from Pattern → pick "React Component" → type user-card → get:

UserCard/
├── UserCard.tsx          export default function UserCard() { … }
├── UserCard.test.tsx
└── index.ts              export { default } from './UserCard';

Commands

An Easy Pattern view in the Explorer lists every pattern; clicking one generates from it.

Where patterns live

• Workspace — .easy-pattern/*.json in the repo root. Commit them so the whole team gets the same scaffolding. Folder name configurable via easyPattern.patternsFolder.
• Global — extension storage, available in every workspace, only for you.

Both are plain JSON with a bundled schema, so editing them gives you autocomplete and validation.

Pattern format

{
  "name": "React Component",
  "description": "Folder + component + barrel + optional test",
  "rootFolder": "{{name | pascal}}",        // folder created inside the target (optional)
  "variables": [
    { "name": "name", "label": "Component name", "type": "string" },
    { "name": "withTest", "label": "Add a test?", "type": "boolean", "default": true },
    { "name": "style", "type": "choice", "options": ["css", "scss", "none"] }
  ],
  "files": [
    { "path": "{{name | pascal}}.tsx", "content": "export default function {{name | pascal}}() {}\n" },
    { "path": "index.ts", "content": "export { default } from './{{name | pascal}}';\n" },
    { "path": "{{name | pascal}}.test.tsx", "when": "withTest", "content": "…" },
    { "path": "__mocks__", "directory": true }
  ]
}

Variables

Templating

{{ variable | filter | filter }} — filters chain left to right.

Conditionals work in both file bodies and file paths:

{{#if withTest}}…{{else}}…{{/if}}
{{#unless isPublic}}…{{/unless}}

The when field on a file entry decides whether it is created at all, and supports !, && and ||:

{ "path": "{{name|pascal}}.stories.tsx", "when": "withStories && !isInternal" }

An expression whose variable the pattern doesn't declare is left untouched, so captured Vue, Handlebars or Go templates survive generation intact.

Capturing a folder you already have

Right-click any folder → Create Pattern from Existing Folder. It reads the folder recursively, asks which word is the variable (defaults to the folder name), and replaces every casing of it — UserCard, userCard, user-card, USER_CARD — with the matching {{name | …}} expression. Binary files and the names listed in easyPattern.ignoreOnCapture are skipped.

Settings

Examples

examples/ holds ready-made patterns — copy one into .easy-pattern/ to try it:

mkdir -p .easy-pattern && cp examples/react-component.json .easy-pattern/

Development

npm install
npm run compile     # or: npm run watch

Press F5 in VS Code to launch an Extension Development Host. Build a .vsix with npm run package.

Publishing

Before the first publish, three fields in package.json still need your details:

1. publisher — currently your-publisher-id. Create a publisher at marketplace.visualstudio.com/manage and use that exact id.
2. repository / bugs / homepage — add them once the code lives in a Git repo, otherwise packaging needs --allow-missing-repository and the Marketplace page shows no source link.
3. LICENSE — fill in the copyright holder.

Then:

npx @vscode/vsce login <your-publisher-id>   # asks for an Azure DevOps Personal Access Token
npm run package                              # sanity-check the .vsix
npx @vscode/vsce publish                     # or: publish minor / publish 0.1.1

Install the local build without the Marketplace:

code --install-extension easy-pattern-0.1.0.vsix