stylelint社内勉強会資料

※このスライドは社内勉強会（18/01/30）にて使用した資料です。公開用に一部修正・改訂などしております。

Lint とは

コード検査。これを利用するとコード構造の品質に関する問題を特定して修正できる。

いろいろある Lint ツール

• JSLint … JavaScript の Lint ツール（ルールは決まっている）
• ESLint … JSLint よりも汎用性のあるルールの改変ができる Lint ツール
• htmllint … HTML の Lint ツール
• markuplint … マークアップに特化した Lint ツール（開発中）
• commitlint … Git のコミットメッセージにルールをつける（プレフィックスなど）
• textlint … 文章やマークダウンの構文チェックツール
• etc…

メリットは？

• コードの品質維持
• 制作ガイドラインを逐一確認しなくてもよくなる
  • どう守れているか？　は最悪ターミナルで確認できる。
• ハックを利用しなければいけない書き方を廃絶していける
• 「標準的な」コードの書き方が身につく

Lint をすることでバグ 0 が実現できるわけではないが（ブラウザチェック・テストコードも別途必要）

全体で 「見通しの良い」コードは実現できる。

=> その結果、後天的なバグを回避できる可能性はあがるので多少なりにも貢献はできている。

CLI で試してみる

 yarn add --global stylelint
 yarn install -y
 yarn add @geekcojp/stylelint-config
 stylelint --config node_modules/@geekcojp/stylelint-config/index.js styles.css

(npm でも可)

すぐに使える！

公式サイトのデモもあるよ。

https://stylelint.io/demo/

ルールは色々ある。

• 「:」の前後にスペースを入れるかどうか
• !importantを書いていないか
• 重複したプロパティは無いか
• 詳細度、ネストなどは深くなっていないか（数値で調整可能）
• プロパティや値が空の宣言箇所はないか
• etc…

https://stylelint.io/user-guide/rules/

「クライアントの要望でスタイル上ここのルールは絶対無視しないといけない…！」みたいなことがあった際

=> disable コメントアウトでルールの無視が可能

disable 使用例

/* stylelint-disable */
a {
}
/* stylelint-enable */

もしくは

a {
  /* stylelint-disable-next-line declaration-no-important */
  color: pink !important;
}

ただし、disableは出来る限り使わないようにする（したい）。

もしくは他プロジェクトでも頻繁にするようであればルール自体を見直す機会が必要かもしれないので考えてみるなど必要。

独自でルール設定することも可能（extendsで@geekcojp/stylelint-configは読み込むこと）

module.exports = {
  extends: './node_modules/@geekcojp/stylelint-config',
  rules: {
    // ルール追記
  },
};

stylelint --config config.js index.css

ルールは厳しいルールセットみたいなものから、自分で必要箇所を埋めていく緩いものまで必要に応じて設定できる。

• https://github.com/stylelint/stylelint-config-standard
  • stylelint の公式推奨ルールセット
  • ルール制定が分からなかったらこれ入れてみても良さそう

ちなみに @geekcojp/stylelint-config で参考にしている.stylelintrc内容は以下参照

https://github.com/benfrain/ecss-postcss-shell/blob/master/.stylelintrc

※ 社内ではECSSの設計思想をベースにコーディングしています

@geekcojp/stylelint-config は絶賛パブリックなので内容に意義があればプルリクバンバン投げてくれ！

https://github.com/geekcojp/config/tree/master/packages/stylelint-config

TODO

• CHANGE.LOG を書く（どのバージョンで何のルールが追加されたか等）

Lint はあくまでも「警告」をするものなので、無視したり気づかなかったりする場合、コードが悪いまま通ってしまう。

=> 警告があるものは絶対にコミットなどを通さないような仕組みも必要。

husky 🐶

 "scripts": {
   "test": "stylelint",
 },
 "husky": {
   "hooks": {
     "pre-commit": "yarn test"
   }
 }

https://github.com/typicode/husky

コミットした時にtest が作動し（stylelint が動く）、Lint 警告文を出してくれる（無かったらコミットが通る）

どう動かすのか分からんし時間がない…

試せる下地を作ったよ！

https://github.com/geekcojp/stylelint-boilerplate

使うのはこのコマンドだけ！

## リポジトリclone
git clone https://github.com/geekcojp/stylelint-boilerplate.git

## 依存パッケージをインストール
yarn

## developモード(gulpを動かす)
yarn dev
## or gulp

## stylelint単体動かす
yarn lint-styles

雑感

• 何事も見るよりやって慣れろ
• 問題のある箇所のみチェックしながら書けるのは良い
• !important は悪しき存在
  • これまでの書き方を見直すよいきっかけにもなる。
• 記述スピードは多少上がった気がする
• ガイドラインはもう必要なさそう？
  • config 自体がガイドラインになる

Lint やっていきましょう 💪