CSS Whitespacer Smart Indent

USAGE

move the css parent, select your text press Alt+Shift+F, and the children follow. This lets you create a simple visual overview of your CSS structure using nothing but whitespace. in css in selected file only

Example

Before:

.button {
    color: red;
    background: blue;
}

    .container {
display: flex;
}

            .container {
display: flex;
}

.container {
    display: flex;
}

After:

.button {
    color: red;
    background: blue;
}

    .container {
        display: flex;
    }

            .container {
                display: flex;
            }

.container {
    display: flex;
}

Whitespace only. Open a CSS file. Tab out (move right) your parent selectors as you wish (space out) "4-8-12+ spaces etc regular tabsize", select all and press alt+shit+f the children you selected will follow regularly under their parents according to parents space instead of everything being organized to the left automatically.

Open a CSS file. Select the CSS you want to fix (or press Ctrl+A to select everything), then press Alt+Shift+F. You can use this to move entire chunks of CSS around without having to manually fix the indentation of every child line. Only the CSS file you're working in is affected.

WHAT IT DOES: It moves CSS children to match the whitespace of their parent selector.

INTENT

THE GOAL IS TO ORGANIZE CSS USING WHITESPACE. THAT'S IT.

You can use whitespace to make your CSS look more like your HTML structure, making it easier to see which CSS belongs to what. Just tab your CSS selectors to where you want them, select the relevant text (or everything with Ctrl+A), and press Alt+Shift+F. CSS Whitespacer will move the children to match their respective parents. This lets you create a simple visual overview of your CSS structure using nothing but whitespace.

ORGANIZE YOUR CSS HOWEVER YOU WANT. MAKE IT MIRROR YOUR HTML. MAKE IT EASIER TO READ. IT'S YOUR CSS.

The extension only changes whitespace and indentation in the CSS file. It does not change your CSS rules or styling. A lightweight Visual Studio Code extension that automatically formats whitespace and indentation in CSS files.

Features

• Automatic indentation formatting: Aligns CSS declarations beneath their selectors.
• Consistent closing braces: Aligns closing braces with their corresponding selectors.
• Quick keyboard shortcut: Format your CSS using Ctrl+Shift+F.
• Simple and lightweight: No complicated configuration required.

Usage

1. Open a CSS file in Visual Studio Code.
2. Press Ctrl+Shift+F.
3. CSS Whitespacer will format the whitespace and indentation in your file.

Requirements

• Visual Studio Code
• A CSS file open in the editor

Keyboard Shortcut

The shortcut applies when a CSS editor has focus.

Support

For issues, suggestions, or feature requests, please use the extension's issue tracker if one is available.

License

See the project's LICENSE file for licensing information.