アーカイブ

stylelint社内勉強会資料

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

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

Lint とは

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

いろいろある Lint ツール

メリットは?

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/

ルールは色々ある。

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

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

ちなみに @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

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

雑感

Lint やっていきましょう 💪

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップへ戻る