A small tool to convert vue class between string and array
Sometimes we want to convert the pure string class to array form, so that we could add some conditional class.
For example, <button class="btn">button</button>
to <button :class="['btn', active: isActive]">button</button>
. However, it would be painful to rewrite it manually when the class gets longer, especially when using tailwindcss! (Imagine this: <button class="relative bg-slate-900 hover:bg-slate-700 text-sm text-white font-semibold h-12 px-6 rounded-lg flex items-center dark:bg-slate-700 dark:hover:bg-slate-600 pointer-events-auto">button</button>
).
So I wrote this extension to do the job in one click...OK, it's two. But it's really convenient, try it!
- Right click the line where
class
is located, and then clickSwitch vue class style
in the context menu. Done! - The command is also available in shortcut
Ctrl+k v
(Cmd+k v
for Mac) and Command Palette. - It can also be used in JSX/TSX files
The extension simply use regular expression to detect and replace the class, so you may need to format your code first.
For example, code like:
:class="['relative',
'w-5/6', 'overflow-hidden', 'rounded-3xl', 'transition-all', 'duration-500', 'hover:shadow-2xl', 'md:h-96', 'md:w-96']"
may not be recognize as valid class.
It needs to be formatted like:
:class="[
'relative',
'w-5/6',
'overflow-hidden',
'rounded-3xl',
'transition-all',
'duration-500',
'hover:shadow-2xl',
'md:h-96',
'md:w-96'
]"
or other common format styles.
You can use ESLint or Prettier to format your code easily. Nevertheless, if you format your code and the extension is still unable to recognize it, please feel free to open an issue.
- Publish to the Open VSX Registry
- Support VS Code web
- Support JSX
See CHANGELOG for more information.
Bugs, feature requests and more are welcome here GitHub Issues.