Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>vue-style-extractorNew to Visual Studio Code? Get it now.
vue-style-extractor

vue-style-extractor

BI1LQV

|
75 installs
| (0) | Free
extractor inline style into <style> tag
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

vue-style-extractor README

what problem does this extension solve?

Sometimes you might assume the style of one element is simple and just wrote it inline, but finally it grow into a great mess, like the code blow:

<div
  style="
width:100%;height:100%;background-color: rgba(0.3,0.3,0.3,0.3);
position:absolute;left:0px;top:0px;display:flex;
align-items: center;justify-content: center;
color:white;font-size:16px;"
>
  balabala
</div>

After installing this extension, you just select the whole div tag and press F1, input extract style, then input the new selector, like .button-wrap > #btn1, and the style will be extracted into <style> tag, the original element will get a property id="btn1".

Preview

todo-lists:

  • [ ] support UnoCSS attributed class
  • [x] i18n
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft