CODEWITHSUNDEEP
cssintellij-ideaformatwebstorm
Jeff Rush
Jeff Rush

Reputation: 912

How to beautify CSS in WebStorm?

I would like to beautify/reformat CSS code using WebStorm.

I have this CSS style:

.container {
  display     : grid;
  margin      : 0 auto;
  max-width   : 90rem;
  padding-top : 1rem;
}
.cols-2 {grid-template-columns : 50% 50%;}

.logo {font-size : 3rem;font-weight : 600;}
.slogan {font-size : 1.3rem; margin-top : 6px;}

.search {background-image : url("../images/search.svg");background-repeat : no-repeat;background-size : 35px;}

.content {min-height : 500px;}

I want to beautify it into this CSS style with WebStorm/IntelliJ:

.container {
  display     : grid;
  margin      : 0 auto;
  max-width   : 90rem;
  padding-top : 1rem;
}

.cols-2 {
  grid-template-columns : 50% 50%;
}

.logo {
  font-size   : 3rem;
  font-weight : 600;
}

.slogan {
  font-size  : 1.3rem;
  margin-top : 6px;
}

.search {
  background-image  : url("../images/search.svg");
  background-repeat : no-repeat;
  background-size   : 35px;
}

.content {
  min-height : 500px;
}

Are there any ways to accomplish this with standard settings or should I install some extensions?

Upvotes: 0

Views: 2384

Answers (2)

the elephant
the elephant

Reputation: 33

You must select 'On colon' from Align Values

Code Style > Style Sheets > CSS/SCSS

Upvotes: 0

shu
shu

Reputation: 139

You need to change the coding style of your project (set rules for what the project will look like) and then reformat the code.

There are tutorials on the Jetbrain website on how to do this.

for example:

Upvotes: 1

Related Questions