2017年01月27日

amakanにstylelintを導入した

https://amakan.net/ のこの辺の改善の続き。

amakan の CSS は勘で書いていて、何となく気が向いたので stylelint を導入してみた。

stylelint

stylelint でググるとリポジトリが出てきたので、適当に Getting Started を読んだ。

とりあえずインストール。

yarn add stylelint --dev

stylelint-config-standard

Lint のルールとして標準的なやつが stylelint-config-standard というやつに入っているらしいので、これもとりあえずインストール。

https://github.com/stylelint/stylelint-config-standard

yarn add stylelint-config-standard --dev

.stylelintrc

.stylelintrc というファイルにこう書いたら良いとのことなので書いた。

{ "extends": "stylelint-config-standard"}

docker-compose.yml

stylelint は Node.js 用のコンテナで動かす。.stylelintrc という設定ファイルを利用するので、これはホスト側からコンテナ側にマウントする必要がある。そのために docker-compose.yml に追記した。

node:volumes:- ./.stylelintrc:/app/.stylelintrc

package.json

yarn run lint で呼び出されるように適当に設定した。

{ "scripts": { "lint": "yarn run lint:javascript && yarn run lint:stylesheet", "lint:javascript": "eslint 'client/\*\*/\*.{js,jsx}'", "lint:stylesheet": "stylelint 'client/stylesheets/\*\*/\*.scss'", }}

NG集

あとはエラーが出るので直した。200 箇所ぐらい。

感想

全体的に好印象。

もう使ってないスタイルでも警告が出たのでついでに消せて良かった
コピペしてきた reset.css から警告が出まくったのでびっくり
reset.css はちゃんと OSS のライブラリを import する重い腰が上がって良かった
調べるところから初めて 20 分ぐらいで作業完了したので導入しやすかった

様子

amakanのCSSも勘で書いてるしStylelintとかいうの導入してみようかな

— ホームページビルダー (@r7kamura) 2017年1月27日

とりあえず stylelint と stylelint-config-standard というの入れたけど何なのか分かってない

— ホームページビルダー (@r7kamura) 2017年1月27日

JSON で .stylelintrc というの書いて Node.js 用のコンテナにマウントして動かしてみたが ✖ がいっぱい出た

— ホームページビルダー (@r7kamura) 2017年1月27日

とりあえずamakanにstylelint導入してstylelint-config-standardのルールでエラー出ないようにしてみたところ、不要なファイルが5つ見つかり、300行ほどCSSが減って良かった

— ホームページビルダー (@r7kamura) 2017年1月27日

日記 / amakanにstylelintを導入した - ✘╹◡╹✘ https://t.co/624BepLbGr

— ホームページビルダー (@r7kamura) 2017年1月27日

ほんとうに雰囲気でやっていてこんなんで大丈夫化

— ホームページビルダー (@r7kamura) 2017年1月27日