Scaffixer: A VSCode Plugin

The Problem With Snippets

I have a certain way I like to structure my files and when I'm working on someone else's project they often have their own preference to follow.

For example I like my React components inside a directory named after the component with a Sass file named after it as well:

				Components/
					└── ComponentName/
						├── ComponentName.tsx
						├── ComponentName.module.scss
						└── package.json
				

Snippets can be a great help for this because they're quick, shortcut-powered code generation. But they can only create code in existing files. When you want to scaffold out entire files, directories, and their contents snippets just aren't enough.

Introducing: Scaffixer

Build your own boilerplate templates just how you like them using EJS.

				import styles from './<%= Name %>.module.scss';

				const <%= Name %>: FC<> = () => {
					return (
						<>
						< />
					);
				}

				export default <%= Name %>;
				

Configure which info you need to collect for the template.

				{
					"name": "React Component",
					"description": "Create a new React component directory with SCSS module.",
					"location": "/Users/steve/templates/scaffixer-react-component",
					"prompts": ["Name"]
				}
				

Then scaffold out your templates when you need them, where you need them, with a right click in the context menu.

Get It Now

Add Scaffixer to your VSCode workflow from the Visual Studio Marketplace or by searching for it under 'Extensions' in VSCode.

Contribute

Scaffixer is OSS written in TypeScript and released under the MIT license. If you want to help add new features checkout the repository on GitHub.