Stylelint 14.0.0 で Sass ファイルを lint させる方法

突然 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
}