Prefix Class VSCode Extension
This is a VSCode extension that allows you to add or remove prefixes to class names in your HTML or JSX files.
Features
- Add a prefix to all class names in your HTML or JSX files
- Remove specific prefixes from class names
- Supports both string-based and HTML/JSX class manipulation
- Configurable settings for default prefix and supported file types
- Status bar notifications
- Works with both selected text or entire documents
Installation
You can install this extension from the Visual Studio Code Marketplace.
Usage
Adding Prefixes
- Open an HTML, JSX, or TSX file in VSCode
- Select the text that you want to modify (if no text is selected, the entire document will be processed)
- Open the command palette (press
Ctrl+Shift+P
on Windows or Cmd+Shift+P
on Mac)
- Type "Prefix Class" and select one of these commands:
- Prefix Class: Change prefix from string - for directly modifying class strings
- Prefix Class: Change prefix from html - for modifying class attributes in HTML/JSX
- Enter the prefix you want to add to the class names (defaults to "tw-")
- The prefix will be added to all class names in the selected text
Removing Prefixes
- Open an HTML, JSX, or TSX file in VSCode
- Select the text that you want to modify (if no text is selected, the entire document will be processed)
- Open the command palette (press
Ctrl+Shift+P
on Windows or Cmd+Shift+P
on Mac)
- Type "Prefix Class" and select one of these commands:
- Prefix Class: Remove prefix from string - for directly modifying class strings
- Prefix Class: Remove prefix from html - for modifying class attributes in HTML/JSX
- Enter the prefix you want to remove from the class names
- The prefix will be removed from all matching class names in the selected text

Extension Settings
This extension contributes the following settings:
prefixclass.defaultPrefix
: Default prefix to use when adding to class names (default: "tw-")
prefixclass.enableStatusBarInfo
: Show operation information in the status bar (default: true)
prefixclass.fileExtensions
: File extensions where the extension will be available (default: [".html", ".jsx", ".tsx"])
Examples
HTML Example
Before:
<div class="container flex items-center">
<span class="text-lg hover:text-blue-500"></span>
</div>
After adding "tw-" prefix:
<div class="tw-container tw-flex tw-items-center">
<span class="tw-text-lg hover:tw-text-blue-500"></span>
</div>
String Example
Before:
container flex items-center
After adding "tw-" prefix:
tw-container tw-flex tw-items-center
Contribution
If you find any issues with this extension or want to contribute, please open an issue or a pull request on the GitHub repository.
License
This extension is licensed under the MIT License.