CODEWITHSUNDEEP
regexvisual-studio-code
Clavatar
Clavatar

Reputation: 65

Add prefix to all class names in visual studio code

i aim to append prefix to each class name in my code. So i want class="text-black border-b p-2 border-gray-100 flex justify-between" to become class="tw-text-black tw-border-b tw-p-2 tw-border-gray-100 tw-flex tw-justify-between"

Upvotes: 2

Views: 714

Answers (1)

Mark
Mark

Reputation: 181130

If you have code like:

class="text-black border-b p-2 border-gray-100 flex justify-between" id="howdy"
class="hover:text-black p-2"   // note "hover:"
class="hover:-top-1 -left-1"   // note the leading -'s

Try this find and replace:

Find: (?<=class="[^"]*)(-*)([-\w]+)(?=[\s"])
Replace: $1tw-$2

to get:

class="tw-text-black tw-border-b tw-p-2 tw-border-gray-100 tw-flex tw-justify-between" id="howdy"
class="hover:tw-text-black tw-p-2"
class="hover:-tw-top-1 -tw-left-1"

See regex101 demo.

That uses a non-fixed length positive lookbehind (due to the * which can be any number) - so that regex will work in vscode's Find widget but not in the Search across files input. So only one file at a time.

Then the idea is to get all blocks that do not contain a space or " as a group $2.

Upvotes: 4

Related Questions