CSS-On-Line for Visual Studio Code

Overview

CSS-On-Line transforms your CSS into a neatly organized format, ensuring one rule per line, enhancing code readability, and maintaining a professional coding style.

Key Features

• Format CSS rules in a clean, one-rule-per-line structure.
• Maintain consistency and readability in your stylesheets.
• Enjoy a compressed and efficient coding experience.

Installation

1. Open Visual Studio Code.
2. Navigate to Extensions (you can use Ctrl+Shift+X).
3. Search for "CSS-On-Line" and click install.

Usage

Discover how CSS-On-Line can elevate your CSS coding experience:

1. Open a CSS file (.css) in Visual Studio Code.

2. Format Entire Document:

   • Right-click within the CSS file.
   • Select "Format Document With" from the context menu.
   • Choose "CSS-On-Line" from the drop-down.
   • Experience the magic as your entire document gets beautifully formatted.

3. Format Selection:

   • Make a selection of your CSS code.
   • Right-click on the selected code.
   • Choose "Format Selection With" from the context menu.
   • Select "CSS-On-Line" from the drop-down.
   • Witness the magic as your selected CSS gets elegantly formatted.

Example

Here's an example of how CSS-On-Line can transform your CSS:

Before

#back {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: tomato;
}
#back .inFoot {
  height: 100%;
  width: calc(100% / 3);
}
@media (max-width: 500px) {
  #back {
    background-color: #d17777;
    margin-top: 10px;
  }
}

After

#back { width: 100%; height: 100%; overflow: hidden; background-color: tomato; }
#back .inFoot { height: 100%; width: calc(100% / 3); }
@media (max-width: 500px) {
 #back { background-color: #d17777; margin-top: 10px; }
 }

License

This extension is released under the MIT License

Updates

The frequency of updates may vary. I'll make occasional minor adjustments whenever time permits. Feel free to revisit for any enhancements!

About

I'm a dedicated developer who finds joy in tackling challenges across diverse coding domains. CSS-On-Line is more than just an extension, it's my commitment to elevating the CSS coding experience. Consider it a contribution to the wider developer community and a special gift to my amazing colleagues at Immanent Solutions.

If you have any questions, suggestions, or just want to connect, feel free to reach out:

• GitHub
• LinkedIn