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.

• 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
• Multi-cursor support to process multiple selections simultaneously
• Right-click context menu integration for faster access

You can install this extension from the Visual Studio Code Marketplace.

1. Open an HTML, JSX, or TSX file in VSCode
2. Select the text that you want to modify (if no text is selected, the entire document will be processed)
3. Open the command palette (press Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac)
4. 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
5. Enter the prefix you want to add to the class names (defaults to "tw-")
6. The prefix will be added to all class names in the selected text

1. Open an HTML, JSX, or TSX file in VSCode
2. Select the text that you want to modify (if no text is selected, the entire document will be processed)
3. Open the command palette (press Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac)
4. 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
5. Enter the prefix you want to remove from the class names
6. The prefix will be removed from all matching class names in the selected text

You can right-click inside the editor or on your selected text, and choose one of the Prefix Class commands directly from the context menu.

The extension fully supports VS Code's multi-cursor editing. You can select multiple distinct blocks of class names (by holding Alt and clicking, or using Ctrl+D) and apply prefix operations to all selections simultaneously.

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"])

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>

Before:

container flex items-center

After adding "tw-" prefix:

tw-container tw-flex tw-items-center

If you find any issues with this extension or want to contribute, please open an issue or a pull request on the GitHub repository.

This extension is licensed under the MIT License.