Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>ExtractTVANew to Visual Studio Code? Get it now.
ExtractTVA

ExtractTVA

MathPow

|
2 installs
| (0) | Free
Extracts a selected block of code into a Vue component
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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! 🎉

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