class-grabber for VS Code

Installation

1. Open Visual Studio Code.
2. Go to the Extensions view (Ctrl+Shift+X on Windows / Linux or Cmd+Shift+X on macOS).
3. Search for ClassGrabber.
4. Click Install.

Usage

1. Open a file in one of the supported formats: HTML, PUG or JSX (JavaScript/TypeScript React).
2. Select the desired code section or the entire file from which you want to extract classes.
3. Use the Command Palette (Ctrl+Shift+P on Windows / Linux or Cmd+Shift+P on macOS).
4. Type and select Extract Classes (ClassGrabber) to run the extraction.
5. The extension will scan the selected area or the entire file for CSS classes and generate output in the configured format (CSS, SCSS, or SASS).
6. The extracted classes will be copied to your clipboard.

Configuration

Customize the output style for extracted classes:

1. Go to File > Preferences > Settings or press Ctrl + , on Windows / Linux or Cmd + , on macOS.
2. Search for ClassGrabber.
3. Set the classGrabber.outputStyle option to one of the following:
   • css: Generate plain CSS class definitions.
   • scss: Generate SCSS with nesting support.
   • sass: Generate SASS with indentation-based syntax.
4. Example configuration in settings.json:

{
  "classGrabber.outputStyle": "scss"
}

Example

HTML:

<div id="card-1" class="card">
  <img class="card__image" src="https://github.com/Kinolog76/vscode-class-grabber/raw/HEAD/" />
  <h4 class="card__title card__title--small">Title</h4>
  <div class="card__text">
    <p class="card__text-item">Text 1</p>
    <p class="card__text-item card__text-item--red">Text 2</p>
  </div>
</div>

PUG:

#card-1.card
  img.card__image(src='/')
  h4.card__title.card__title--small Title
  .card__text
    p.card__text-item Text 1
    p.card__text-item.card__text-item--red Text 2

JSX:

<div id='card-1' className='card'>
  <img className='card__image' src='https://github.com/Kinolog76/vscode-class-grabber/raw/HEAD/' />
  <h4 className='card__title card__title--small'>Title</h4>
  <div className='card__text'>
    <p className='card__text-item'>Text 1</p>
    <p className='card__text-item card__text-item--red'>Text 2</p>
  </div>
</div>

Running Extract Classes (ClassGrabber):

SCSS:

#card-1 {
}

.card {
  &__image {
  }

  &__title {
    &--small {
    }
  }

  &__text {
    &-item {
      &--red {
      }
    }
  }
}

CSS:

#card-1 {
}

.card {
}

.card__image {
}

.card__title {
}

.card__title--small {
}

.card__text {
}

.card__text-item {
}

.card__text-item--red {
}

Tips

• Ensure your file is saved in a supported format (.html, .pug, .jsx, or .tsx) for the extension to activate.
• Use the command in large projects to quickly generate stylesheets from your markup.
• Check the Output panel (Ctrl+Shift+U) for any error messages or logs if extraction fails.