Vue Class Converter

A small tool to convert vue class between string and array

Why

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!

Usage

• Right click the line where class is located, and then click Switch 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

Note

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.

Features

Rewrite from string form to array form

Rewrite from array form to string form

Rewrite wrapped array as well

Done

• [x] Publish to the Open VSX Registry
• [x] Support VS Code web
• [x] Support JSX

Release

See CHANGELOG for more information.

Contributing

Bugs, feature requests and more are welcome here GitHub Issues.