[CSS]かなり便利！スタイルシートを自分で決めたルール通りに整形する便利ツール

Post on:2017年11月1日

Prettier

Prettierは2017年1月にローンチされた新しいプロジェクトで、すでに多くのWeb制作者が利用している人気ツールです。「頑固なコードフォーマッター」と呼ばれています。

Prettierの大きな特徴は、ドキュメントを保存すると、すべての種類のコードが自動的にフォーマットされます。それは見事な仕事ぶりです。
インデントとスペースは設定通りに適用され、クォートは統一されます。セミコロンの後のスペースの有無も自動で統一されます。

Prettierは「cmd + S」で保存すると、自動的に整形されます

Prettierをあなたのコードで一度実行するということは、コードのフォーマット化が約束されたことと同じです。それだけで、ものすごいメリットとなります。

しかし、Prettierはほんの一握りのオプションしかサポートしていません。私はそれを使用したときに、実はコンフィギュレーションを持っていなかったと確信しました。

Prettierがサポートしているのは、考えるようなことを必要とせずに修正できる簡単なものです。スタイルガイドではシングルクォートの場合、すべてをシングルクォートで統一します。

修正するのが簡単ではない場合があります。例えば、無効なHEX値を記述したとします。この間違いはPrettierでは対応できません。この場合に望むことは、エラーとして視覚的に目立たせて欲しいということです。

この部分が次への導入部分となります。

Stylelint

Stylelintはまさにそれが可能です。

Stylelint

PrettierのアニメーションGIFはSublime Textです。実行すると、すぐに修正されるのですが、何を修正するのか特に表示されることはありません。

Prettierでは10のルールをサポートするのに対して、Stylelintは150のルールをサポートします。標準設定がありますが、あなたが望む細かな設定をして、好みの設定にすることもできます。詳しくは、「Lint your CSS with stylelint」をご覧ください。

記述がおかしなところを目立つように表示します

Stylelintではこれらの警告がはっきりと表示されているので、すぐに手作業で修正することができます。

対応エディタ

これらのツールは、さまざまなコードエディタで動作します。

Prettier

「これを私のコードエディタにインストールするだけで、うまくいくだろう」と考えるのはとても簡単です。これらのツールを動作させるには、2つのポイントがあります。

コードエディタにプラグインをインストール。
npm/yarnでインストール。
これらはnodeベースのツールです。これは、プロジェクトがnodeと何か関係があることを必要とするわけではなく、ローカル環境での開発に必要とするだけです。

これらは意図的に切り離されています。ツールの目的は、コードを解析して修正する問題を見つけ出すことです。つまり、これらのツールを新しい環境で動作させるために書き直したり移植したりする必要はなく、新しい環境で何が必要であっても、同じAPIを呼び出して使用するだけです。

Sublime Text

上記はPrettierとStylelintの両方がインストールされたSublime Textのbarebonesプロジェクトです。「package.json」はツールがインストールされていることを示しています。私はあなたのSublime Textのプラグイン「jsPrettier」がインストールされているのを確認できるようにパッケージを表示しています。2つのツールのルールを設定するドットファイルも表示されています。

「js」の名前に誤解しないでください。WordPressサイトのCSSでこれを使用することもできます。プロジェクトが何であるかは本当に重要ではありません。

Stylelintを使用した時によくある事

Stylelintを使用した時に、ここにあげたことを考えるかもしれません。

Prettierが修正するのを無視するようにStylelintで設定することを考えるかもしれません。機械的に修正するのではなく、エラーの内容を見るようにしてください。
Sylelingで問題を見つけた場合、プロセスを更新して停止することを考えるかもしれません。Stylelintは文字通り問題を引き起こすエラーを表示しているので、作業を進めるべきではありません。
ここではCSSの話を中心に説明しましたが、JavaScriptはさらに重要です。ES Lintをオススメします。同じく、RubyにはRubocopのようなツールもあります。通常の開発で使う言語すべてに対応したツールがあると、わたしは確信しています。