Prettier で CSS の書き方をチームであわせる

こんにちは、CTOの高橋(jtakahashi64)です。
週末に「僕らのミライへ逆回転」を見たんですが、ものを作ることのよさを思い出せる素敵な作品でした。

さて、今日の話題は CSS の書き方をチームであわせることについてです。

Balloon では BallooMe のスタイルシートの実装をエンジニア、デザイナーの全員で行っており、コーディングスタイルは airbnb に準拠しています。

しかしながら、エンジニアもデザイナーも人間ですから、コーディングスタイルに準拠しないコードを書いてしまうことは、まあ、よくあります。

.block{
}

.block {
  margin:10px;
}

.one,.two,.three {
}

コーディングスタイルに準拠しない例

これらを PR 上で確認/変更するのは、
レビューアとレビューイの双方にとって、なかなかの負荷がかかるため、避けたいものですね。
そこで便利なのが、今日ご紹介するコードフォーマッタの Prettier です。

Prettier

Prettier は JavaScript や CSS などの言語で利用するできるコードフォーマッタで、上記のようなコーディングスタイルの揺れを統一することができます。

Yarn で簡単に導入ができます。

yarn add prettier --dev --exact

実行も簡単です。

yarn run prettier -- --write ~/path/to/example.scss

下記のようにコードがフォーマットされました。

@@ -1,9 +1,11 @@
-.block{
+.block {
 }
 
 .block {
-  margin:10px;
+  margin: 10px;
 }
 
-.one,.two,.three {
+.one,
+.two,
+.three {
 }

コーディングのスタイルは人によってそれぞれで、そこに絶対的な正しさはありません。
例えば、インデントはスペースかタブか、スペースならスペースの数は2つか4つか……などなど。

チーム開発では各々の「正しさ」がぶつかり、パワーを使ってしまうことがあります。
しかしながらパワーをスタイルの「正しさ」を決めることに使ってしまうのはもったいない。
開発者のパワーは、もっとサービスや社会を成長させるために使うべきものです。

コーディングスタイルを決め、コードフォーマッタを通すことによって、
チームの「正しさ」を決めておくことにより、
よりよい毎日を過ごせるといいですね。