如何在WebStorm中美化CSS？

Question

我想使用 WebStorm 美化/重新格式化 CSS 代碼。

我有這個CSS 風格：

.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;}

我想用 WebStorm/IntelliJ 把它美化成這個CSS 樣式：

.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;
}

有什么方法可以使用標准設置來完成此操作，還是應該安裝一些擴展？

Answer 1

您需要更改項目的編碼風格（為項目的外觀設置規則），然后重新格式化代碼。

Jetbrain 網站上有關於如何執行此操作的教程。

例如：

• 更改代碼風格：配置代碼風格或代碼風格。 CSS
• 重新格式化代碼： 重新格式化和重新排列代碼

Answer 2

您必須從對齊值中輸入 select 'On colon'