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

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.