デザインやUIの修正に便利なAtomのおすすめパッケージ6個

デザインを修正するときに便利なAtomパッケージを紹介します。

ほぼCSS関連のパッケージです。

スポンサーリンク

file-icons:ファイルに対応したアイコンを表示してくれる

ファイルの拡張子に対応したアイコンを表示してくれるパッケージがfile-iconsです。

パッケージを導入するとそれぞれアイコンがファイル名の右に表示されます。

インストール

apm install file-icons

 

https://atom.io/packages/file-icons

スポンサーリンク

Pigments:CSSの色を表示してくれる

こんな感じでカラーコードが背景色に設定されます。

インストール

apm install pigments

 

https://atom.io/packages/pigments

スポンサーリンク

color-picker:カラーピッカー

shift + alt + Cでカラーピッカーが表示されます。

厳密に色の決まってないプロトタイプなど、あいまいなイメージで作りたい時に使えるパッケージ

インストール

apm install color-picker

 

https://atom.io/packages/color-picker

 

css-declaration-sorter:cssプロパティをソートしてくれる

CSSのプロパティをコマンドでソートしてくれる地味に便利なパッケージ

コマンド:css-declaration-sorter:** でソートがかかる。

ソートもアルファベット順やSMACSSなど選べます。

毎度コマンド打つのは面倒なのでキーバインドさせるといいです。

インストール

apm install css-declaration-sorter

 

https://atom.io/packages/css-declaration-sorter

 

css-to-inline:CSSをReactのstyleで使えるjsonに変換してくれる

Reactを使っていたら是非入れておきたいパッケージ

コピペしたCSSを一発でjsonに変換してくれるもの。

https://atom.io/packages/css-to-inline

 

autoprefixer: 自動でプレフィックスをつけてくれる

ベンダープレフィックスを自動でつけてくれるパッケージ。

レガシーブラウザにも対応させないといけないプロジェクトの場合は必須。

面倒なものは自動化しちゃいましょう。

インストール

apm install autoprefixer

https://atom.io/packages/autoprefixer