ClassExtractor

ClassExtractor is a Visual Studio Code extension that helps front-end developers quickly extract unique CSS class names from selected HTML, JSX, or Shopify Liquid code and copy them to the clipboard — ready to use in your stylesheets or utility-first frameworks like Tailwind CSS. Here’s an improved and more polished version of your Usage section, keeping it clear, professional, and user-friendly:

🛠️ Usage

To extract CSS class names:

1. Select the portion of code containing your HTML, JSX, Liquid, etc.
2. Right-click and choose "Extract Classes", or use the keyboard shortcut: Ctrl + Alt + E (Windows/Linux) Cmd + Option + E (Mac)

Once triggered, ClassExtractor will extract, clean, and copy the class names to your clipboard — ready to paste into your CSS or utility framework.

🚀 Features

• 🔍 Class Name Extraction — Extracts all CSS class names from the selected code.

• 🧼 Duplicate Removal — Returns a clean, unique list of class names.

• ✂️ CSS Format Output — Converts them into .class-name {} blocks.

• 📋 Clipboard Integration — Automatically copies results to your clipboard.

• 🧠 Smart Language Support — Works with:

  • HTML
  • JSX (className)
  • Shopify Liquid (requires the Shopify Liquid extension)

🧩 Requirements

• To extract classes from .liquid files, install the Shopify Liquid VS Code Extension.
• To extract classes from .svelte files, install the Svelte for VS Code Extension.

⚙️ Extension Settings

ClassExtractor does not add custom settings at the moment.

🔮 Upcoming Changes

• 🎨 UI enhancements and optional file output (.css)

👤 Author

Developed and maintained by \Tim Dehler Open-source and maintained for the dev community ❤️