ClassTrim A lightweight VSCode extension that automatically cleans up your class and className attributes. It removes extra whitespace, deletes duplicate classes, and normalizes spacing to keep your markup tidy. Features ✨ Automatic Formatting: Cleans up class attributes on file save. 🚫 Duplicate Removal: Intelligently finds and removes duplicate class names. 🔧 Configurable: Easily enable/disable format-on-save, customize target file types, and define which directories to process. 🎯 Smart Targeting: By default, it focuses on files within a src directory, but you can configure it for any project structure. ⚡ Lightweight & Fast: Built to be fast and efficient with minimal performance impact. 🤝 Broad Support: Works with both className (React) and class (HTML, Vue, Svelte). What It Does ClassTrim normalizes your class attributes by:
Before and AfterBefore:
After:
Supported File Types
How It Works
Installation From VSCode Marketplace
From VSIX File
Configuration You can easily customize ClassTrim to fit your project's needs. Open your settings.json file (Ctrl+Shift+P → Open User Settings (JSON)) and add any of the following options: Setting Type Default Description classtrim.formatOnSave boolean true Enable or disable formatting when a file is saved. classtrim.targetLanguages string[] ["javascriptreact", "typescriptreact", "html", "vue", "svelte"] An array of VS Code language identifiers to apply formatting to. classtrim.requiredPathSegment string "src" A directory name that must be in the file's path. Leave empty ("") to allow any path. Example Configuration Here is an example of a custom configuration in your settings.json: { "classtrim.formatOnSave": true, "classtrim.targetLanguages": [ "javascriptreact", "typescriptreact", "html", "vue", "svelte" ], "classtrim.requiredPathSegment": "app" } Development Prerequisites
Setup Clone the repositorygit clone cd classtrim Install dependenciesnpm install Open in VSCodecode . Building Compile TypeScriptnpm run compile Package extensionnpm run package Testing Run testsnpm test Test in Extension Development HostPress F5 in VSCode to launch a new Extension Development Host windowHappy coding with cleaner class attributes! 🎉 |