Features

This is a VSCode extension for my TVA workflow (Tailwind - Vue - Atomic Design). It extracts a selected block of code into a Vue component and places it under the appropriate folder (atoms, molecules, or organisms) following your project structure.

How to use

1. Select the block of code you want to extract.
2. Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac) to open the command palette.
3. Run the extraction command and answer the prompts.

Limitations

• This extension is custom-built for my workflow.
• Feel free to contact me if you want edits or access to the source code.

Limitations

To ensure the extension works correctly :

• Use VueJS (Composition API) or React.
• Use alias imports that start with /app.
• If you are not using Atomic Design, make sure to toggle the relevant option in the extension settings.

Notes

• Extracted components follow the Atomic Design methodology by default.
• Make sure your workspace has write permissions for the target folders.

Enjoy! 🎉