Search code examples
javascriptcssperformancevisual-studioorganizer

Compact code on Visual Studio


On Visual Studio whenever you have a sentence with { }, it creates a option box in the left side with a "-" that allow you to collapse the code and later expand with "+". Is a great way to keep code minimized and clean.

I wonder if there's a way to force that on code without using {} (which will give errors). Would be really good for .CSS


Solution

  • Separating the code by #regions really improved my .css organization.

    Minimal view and organized by topics since it let you close and open regions.

    /*#region ---------- BUTTONS */
    
    #button_LF {
        border-radius: 15px 25px 15px;
        padding-left: 10px;
        padding-right:10px;     
        padding-bottom:3px;
        cursor:pointer;     
    }
    #button_RF {
        border-radius: 15px 25px 15px;
        padding-left: 10px;
        padding-right:30px;     
        padding-bottom:25px;
        cursor:pointer;     
    }
    
    /*#endregion    */

    Hotkeys Ctrl+M+L to Expand/Collapse everything get pretty useful to work with. Having a final look like this:

    enter image description here