1

CSS Alphabetize plugin for VSCode

 3 years ago
source link: https://dev.to/mattkenefick/css-alphabetize-plugin-for-vscode-5d1b
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

CSS Alphabetize plugin for VSCode

Jul 20

・1 min read

Ever get tired of seeing CSS like this?

tagName {
    width: 500px;
    color: #f0a10c;
    margin-left: 1rem;
    text-align: left;
    display: flex;
    transform: translate(-50%);
    background-color: green;
}
Enter fullscreen modeExit fullscreen mode

It's impossible to tell what is where. It should look like this:

tagName {
    background-color: green;
    color: #f0a10c;
    display: flex;
    margin-left: 1rem;
    text-align: left;
    transform: translate(-50%);
    width: 500px;
}
Enter fullscreen modeExit fullscreen mode

😍 😎 😇 Now you can easily tell which properties exist in the block and where you should be making your changes.

This past Saturday, I whipped together a quick plugin for VSCode that will organize your CSS/SASS properties. You can install it here: https://marketplace.visualstudio.com/items?itemName=PolymerMallard.css-alphabetize

The dropdown command shift+cmd+p is named: "CSS/SASS: Alphabetize Properties"

The default keyboard shortcut is: shift+alt+a


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK