Stylelint 14とVSCode拡張を動かすためにやったこと

ハローユーチューブ！

先日 Stylelint 14 がリリースされました。
VSCode の Stylelint 拡張も一緒にアップデートされました。
こいつら Stylelint 13 との互換性ないんだってさ！拡張が自動更新されてひどい目にあいました。 f**k!
しょうがないので対応したことをシェアします。

調べよう

• VSCode拡張のマイグレーションガイド
• Stylelint のマイグレーションガイド

前提

• Vue.js を使ってます。
• SCSS を使ってます。

多分それっぽい箇所を飛ばせば他の環境にも使えると思います。

やったこと

VSCode の Stylelint 拡張は、前述の通り勝手に最新版になっていました。

まずは postcss 関係を自分で入れる必要があるらしい。
Vue.js の SFC (.vueファイル) も実は postcss で処理されてたらしいので、とりあえず postcss-html を入れる。
SCSS を使っているので postcss-scss も入れる。

npm i -D postcss postcss-html postcss-scss

Stylelint 関係で使っていたパッケージも適当に latest にする。各自適当に読み替えてください。
stylelint-config-html は SFC を扱うために追加した。

npm i -D stylelint@latest \
 stylelint-config-html@latest \
 stylelint-config-prettier@latest \
 stylelint-config-recess-order@latest \
 stylelint-config-standard@latest \
 stylelint-scss@latest

stylelintrc の extend に stylelint-config-html/vue を追加して、 SFC を扱えるようにする。うちのは JSON 形式です。

   "extends": [
+    "stylelint-config-html/vue",
     "stylelint-config-standard",
     "stylelint-config-prettier",
     "stylelint-config-recess-order"
   ],

おなじく stylelintrc の overrides に postscss の設定を追加する。

+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss"
+    }
+  ],

VSCode の settings.json に stylelint.validate を追加する。ここで vue も対象にするのがポイント。
なんとなく css.validate とかも無効にしておく。

+  "css.validate": false,
+  "scss.validate": false,
+  "stylelint.validate": ["css", "scss", "vue"],

うちはこれでなんとかなりました。