突然 SCSS ファイルの lint が動かなくなり、Visual Studio Code が以下の警告メッセージを通知してきました。
Stylelint version 13.11.0 is no longer supported — you may encounter unexpected behavior. Please upgrade to version 14.0.0 or newer. See the migration guide for more information.
はいはい。
Stylelint が古いからアップグレードしろってわけね。
どうやら4日前（2021/10/25現在）に Stylelint の 14.0.0 がリリースされたようです。
言われた通りアップグレードしてみるも…
CSS ファイルは lint されますが SCSS ファイルは反応なしです…
というわけで、Stylelint 14.0.0 で SCSS ファイルを lint させる方法をまとめました！
Stylelint 14.0.0 の変更点
詳細については以下ページに記載されています。
変更手順
SCSS 用のモジュールをインストール
SCSS 用の stylelint-config-standard-scss モジュールをインストールします。
npm install --save-dev stylelint-config-standard-scss
Stylelint の設定ファイルにモジュールを登録
.stylelintrc.js
extends: ['stylelint-config-standard-scss'],
Visual Studio Code の Stylelint 拡張機能 に設定を追加
詳細については以下ページに記載されています。
setting.json
"stylelint.validate": ["css", "scss"]
Stylelint のルールを変更
SCSS ファイルでも lint されるようになりましたが、エラーがめっちゃ出ます…
しかも1行目が必ずエラーになるような？
とりあえず、私は以下のような設定をしました。
.stylelintrc.js
rules: {
// scss を使うには以下2つがないと @mixin とかでエラーになってしまう
'at-rule-no-unknown': null,
'scss/at-rule-no-unknown': true,
// 透明度を数値かパーセンテージで指定（'number'|'percentage'）
'alpha-value-notation': 'number',
// @ルールの前に1行空けるか（'always'|'never'）
'at-rule-empty-line-before': 'never',
// url を引用符で囲むか（'always'|'never'）
'function-url-quotes': 'never',
// 詳細度の高いセレクタの後に詳細度の低いセレクタを禁止
'no-descending-specificity': null,
// セレクタの重複を禁止
'no-duplicate-selectors': null,
// セレクタの前に1行空けるか（'always'|'never'|'always-multi-line'|'never-multi-line'）
'rule-empty-line-before': 'never-multi-line',
// セレクタのパターンを指定
'selector-class-pattern': null
}