atomエディタで実施するCSSの整形

世には"atom-beautify"という万能整形ツールがありますが、
インデントを揃えただけでは足りない。

今回の目的

CSSのプロパティ順序が一意に定まることで視線の移動は少なくなる。
これを素早く実施する。

"css-clean"と"stylefmt"を実施する

Sample.css

body {

  overflow-x: hidden;
  transform: rotate(0.028deg);
  overflow-y: scroll;



  height: 100%;
}

Done.css

body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  transform: rotate(0.028deg);
}

• "css-clean"

• メリット

  • 素早くプロパティをソート

• デメリット

  • ソートはパッケージ依存(順序変更できない)
  • :(コロン)の前後に空白が入る(:に基づく整形により有名なコーディング規約では非推奨に当たる)

• "stylefmt"

• メリット

  • 素早い.stylelintrcに基づく整形
  • 上記の:整形問題の解決

• デメリット

  • "linter-stylelint"の導入(パッケージインストール)
  • "stylelint-config-standard"を設定(.stylelintrcに若干記述)

🍵 CSSは壊れやすい言うけども、まず問題の早期発見の工夫を。