読者です 読者をやめる 読者になる 読者になる

amakanにstylelintを導入した

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

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

stylelint

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

https://github.com/stylelint/stylelint

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

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 箇所ぐらい。

f:id:r7kamura:20170127233333p:plain

f:id:r7kamura:20170127233359p:plain

f:id:r7kamura:20170127233408p:plain

f:id:r7kamura:20170127233418p:plain

感想

全体的に好印象。

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

様子