styled-componentsを利用したプロダクトにstylelintを入れたい話。

背景

個人開発しているプロダクトではstyled-componentsを採用しています。 cssプロパティの書き方に関して個人的ルールを設けているため、時々コードを書いているときに「　あれこれってどっちが先だっけみたい？　」 みたいなことが発生します。こんなことで、いちいち頭のリソースを使いたくなかったので、サクっとフォーマットやプロパティーをオーダしてくれると嬉しいなと考え、プロダクトにstylelint導入を考えました。

要件としてはlint後に次のようになっていれば、ok

lint前

const Navigation = styled.nav`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px;
  border-radius: 48px;
  background-color: white;
`;

lint後

const Navigation = styled.nav`
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: white;
  border-radius: 48px;
`;

ちなみにstyled-componentsの公式にあるstylelintに関して次のようにありました。

Beware that due to limitations on what is possible for Stylelint custom processors we cannot support the --fix option

どうやら、stylelint-processor-styled-componentsをプロセッサーとして利用する場合は、自動修正してくれないみたい？？

実装

自分が調べた範囲内での紹介なので、他にも方法があるかもしれないです。

利用するモジュールをインストールしていく

$ yarn add -D stylelint stylelint-config-standard stylelint-config-recess-order

簡単にそれぞれのモジュールについて説明をしておくと

• stylelint : stylelint本体
• stylelint-config-standard: 色々な スタイルルールを適用してくれる。
• stylelint-config-recess-order: スタイルを一定の規則に則ってソートしてくれる。

次にプロジェクト直下に.stylelintrc.jsを作成し、次のように設定していきます。

.stylelintrc.js

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recess-order"
  ]
};

最後にpackage.jsonのscriptsを追加。

package.json

 "lint": "stylelint './src/**/*.tsx' --fix"

無事、scriptsを走らせると自動整形されていることがわかると思います。

総括

調べる中で様々なstylelintのルールを見つけました。チームやプロダクトにあった、ルールを決めるといいと思います。また、プロパティーのオーダーを入れたことでプロジェクト全体で記述が統一されるため非常に読みやすく、見やすくなった印象を受けました。