PickClass

Pick class names from your selection — precise, fast, no nonsense.

Why

Other class extractors scan the whole file. PickClass only reads the code you actually select. No selection? It tells you to select first. No workspace? It still saves a real .css file (to your temp dir).

Features

Selection-only extraction — never touches the whole file
Deduplicates class names (via Set)
Outputs CSS skeleton — .class {}
Copies to clipboard every time
Generates a real .css file — opens it in a new editor tab
Sorts alphabetically
Configurable file name mode — first / combined / timestamp
Works with or without a workspace — falls back to the system temp directory
Supports Vue SFC and JSX — extracts class, className, :class
Configurable rule body — empty {} / newline / Tailwind style

Usage

Select HTML / Vue / JSX in VS Code
Press Ctrl+Shift+E (Mac: Cmd+Shift+E)
Or open the Command Palette (Ctrl+Shift+P) and run Pick Classes from Selection

A .css file is generated and opened in a new tab, and the result is also copied to your clipboard.

Example

Input (selection):

<div class="header nav-main">
	<button class="btn btn-primary">Click</button>
	<button class="btn btn-secondary">Cancel</button>
</div>

Output (header.css):

.btn {
}
.btn-primary {
}
.btn-secondary {
}
.header {
}
.nav-main {
}

The empty rule body {} is intentional — your CSS linter (e.g. stylelint) may warn Do not use empty rules. You can change pickclass.ruleBody to newline to add an indented line inside the braces.

Configuration

Open VS Code Settings (Ctrl+,) and search for pickclass:

Setting	Type	Default	Description
`pickclass.openAsFile`	boolean	`true`	Generate & open a `.css` file. When `false`, only copies to clipboard.
`pickclass.fileNameMode`	`first` \| `combined` \| `timestamp`	`first`	How the output file is named.
`pickclass.extractTarget`	`both` \| `class` \| `id`	`both`	What to extract: both class and id, class only, or id only.
`pickclass.groupLevel`	`low` \| `medium` \| `high`	`high`	Grouping sensitivity: low (few groups), medium (balanced), high (similar only).
`pickclass.ruleBody`	`empty` \| `newline` \| `tailwind`	`empty`	Rule body style: empty `{}`, newline with indent, or Tailwind list.

File name modes

Given classes header nav-main btn:

Mode	File name
`first`	`header.css`
`combined`	`btn-header-nav-main.css`
`timestamp`	`header-1725600000000.css`

If a file with the same name already exists, PickClass auto-appends -2, -3, … to avoid overwriting.

Install from source

git clone https://github.com/kuoleroy/pickclass.git
cd pickclass
npm install

Then press F5 in VS Code to launch the Extension Development Host.

For the smoothest debugging experience, add a launch.json so a test workspace opens automatically:

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Run Extension",
			"type": "extensionHost",
			"request": "launch",
			"args": [
				"--extensionDevelopmentPath=${workspaceFolder}",
				"${workspaceFolder}/test-fixture"
			]
		}
	]
}

Create test-fixture/index.html with any HTML snippet, and F5 will open it ready to test.

Roadmap

[x] Vue SFC: scan only <template>
[x] JSX className / :class / class:name support
[x] Configurable output body (empty {} / newline / Tailwind list / SCSS)
[ ] Option to silence empty-rule lint warnings
[ ] Add unit tests
[ ] Improve error handling

License

MIT