はじめに
とあるプロジェクトで他人の書いた scss ファイルを引き継ぎました
プロパティの順番がバラバラで読みにくかった （ display が最後の方にあったり ） ので、
stylelint --fix で自動修正し、一気にプロパティを並べ変えようと考えました
stylelint-config-recess-order は css のプロパティの順序について、
一定の規則に則っているかチェックします
これを .stylelintrc.yml で extend し、 --fix で自動修正すれば、
自動的にいい感じの並びになってくれます
直近の他プロジェクトでもうまく動いていたので簡単にいくかと思いきや、、、
$ npx stylelint "src/**/*.scss" --fix
src/scss/components/_footer.scss
3:3 ✖ Expected "height" to come before "margin-top" order/properties-order
4:3 ✖ Expected "display" to come before "height" order/properties-order
7:3 ✖ Expected "font-size" to come before "border-radius" order/properties-order
...
エラーが出るだけで、なぜか修正されませんでした
これの対処法を備忘録として残します
実行環境
OS: macOS Monterey 12.2.1
Node.js: 16.13.2
Stylelint: 14.5.3
原因
他のプロジェクトでは、 Node.js のバージョンも Stylelint のバージョンも同じで自動修正しているのに、
なぜかこのプロジェクトではうまく動かない、、、
パッケージをインストールし直したりしてもダメ、、、
うまく動いているプロジェクトから node_modules をディレクトリーごとコピーしてきてもダメ
色々試した結果、 scss 上のコメント /* stylelint-disable-next-line */ を全て消すと動くことが判明しました
上記のコメントは次の行だけ Stylelint でチェックしないようにするものです
まさか、これでファイル全ての自動修正が無効化されるとは、、、
stylelint fix disable-next-line でググると、 Stylelint の公式 Issue が見つかりました
Since 13.2.0 stylelint no longer attempts to autofix sources which contain /* stylelint-disable */ comments, making the autofix feature safer to use.
Stylelint 13.2.0 から stylelint-disable のコメントを含むソースを自動修正しなくなったため、安全に自動修正できます、とのこと
...
...
...
いや、気付くわけないし、、、
せめて実行結果に このファイルは disable を含むコメントがあったため自動修正をスキップしました とか出して欲しい、、、
何はともあれ、原因は前任者があちこちに残していたコメントたちでした
/* stylelint-disable-next-line *//* stylelint-disable-line */
本来、これらの Linter に目隠しするためのコメントは最小限、どうしてもの時だけ使うものです
これをやたらと使われていたため、ほとんどのファイルで自動修正が動かなかったというわけです
おわりに
コメントがあるときに autofix が動かない件は公式のリリースノートにも書いてはありますが、
やはり実行時にスキップした理由を明示して欲しいですね
自分がツールを作るときには肝に銘じます
あと、 Linter を無効化せずにキレイに書きましょう