stylelint 勉強会資料
Lint ... コード検査。
これを利用するとコード構造の品質に関する問題を特定して修正することができる。
https://gyazo.com/a858aafbb199550c47b4f5346b74852a
JSLint ... JavaScriptのLintツール(ルールは決まっている) ESLint ... JSLintよりも汎用性のあるルールの改変ができるLintツール Lintをやるメリット
コードの品質維持
ガイドラインを逐一確認しなくても機械(ターミナル)が判定してくれる
ハックを利用しなければいけない書き方を廃絶していける
「標準的な」コードの書き方が身につく
Lintをすることでバグ0が実現できるわけではないが(別途テストコードも必要)、全体で「見通しの良い」コードは実現できる。
CLIで試してみる
code:zsh
yarn add --global stylelint
yarn install -y
yarn add @geekcojp/stylelint-config
stylelint --config node_modules/@geekcojp/stylelint-config/index.js styles.css
ルールは色々ある。
「:」の前後にスペースを入れるかどうか
!importantを書いていないか
重複したプロパティは無いか
code:css
.hoge {
...
background: #fff; /* ここがエラー! */ }
詳細度、ネストなどは深くなっていないか(数値で調整可能)
プロパティや値が空の宣言箇所はないか
etc...
「クライアントの要望でスタイル上ここのルールは絶対無視しないといけない…!」みたいな狂った要望があった際
disableコメントアウトでルールの無視が可能
code:css
/* stylelint-disable */
a {}
/* stylelint-enable */
ただし、出来る限りこれは使わないようにする。
もしくは他プロジェクトでも頻繁にするようであればルール自体を見直す機会が必要かもしれないので考えてみるなど必要。
ルールセット
ルールは厳しいルールセットみたいなやつから、自分で必要箇所を埋めていく緩いものまで必要に応じて設定できる。
今 @geekcojp/stylelint-config で参考にしている.stylelintrc内容 ↓
@geekcojp/stylelint-config は絶賛パブリックなので内容に意義があればプルリクバンバン投げてくれ!
TODO
CHANGE.LOGを書く(どのバージョンで何のルールが追加されたか等)
独自Lintルール
独自でルール設定することも可能(extendsで@geekcojp/stylelint-configは読み込むこと)
code:stylelintConfig.js
module.exports = {
"extends": "./node_modules/@geekcojp/stylelint-config",
"rules": {
// ルール追記
}
}
Lintはあくまでも「警告」をするものなので、無視したり気づかなかったりする場合、コードが悪いまま通ってしまう。
警告があるものは絶対にコミットなどを通さないような仕組みも必要。
huskyとの連動
code:package.json
"scripts": {
"test": "stylelint",
},
"husky": {
"hooks": {
"pre-commit": "yarn test"
}
},
コミットした時にtest が作動し(stylelintが動く)、Lint警告文を出してくれる(無かったらコミットが通る)
どう動かしたらいいか分からん、時間ない…
試せるやつの下地作ったよ(gulpで動くので各プロジェクトで必要箇所入れてみて)
公式デモもあるよ