VSCodeの拡張機能Stylelintがアップデートで動かなくなった時の対処法

2021年10月22日、Stylelint（拡張機能）のv1.0.0がリリースされました。

このアップデートで既存の設定ではStylelint（拡張機能）がVSCode上で動かなくなったので記録しておきます。

※2021年11月3日現在、v1.0.3がリリースされています。

この記事ではややこしいので以下のように記述します。
VSCode拡張機能のStylelint: Stylelint（拡張機能）
npm/yarnモジュールのStylelint: stylelint

要約

settings.jsonに以下を記述すればOK

{
    "stylelint.stylelintPath": "node_modules/stylelint,
    // css/postcss以外を解析対象にしたい場合は以下も追記
    // 以下の例はSCSSを解析対象に加えている
    "stylelint.validate": [
        "css",
        "scss",
        "postcss"
    ],
}

以上の記述はstylelintをローカルインストールした場合（node_modules/stylelintが存在する場合）。
グローバルインストールしている場合はそのPathを指定すれば良いと思います（未確認）。

v1系の主な変更点

• stylelint v13系のサポート終了→v14系に移行が必要
• 拡張機能自体にstylelintが同梱されなくなった→Path指定が必要
• デフォルトでcss/postcss以外を解析しなくなった→SCSS等別途指定が必要

Stylelint（拡張機能）v1系の詳細

stylelint v13系のサポート終了

v13系のサポートが終了し、現行のv14系以降がサポートされるようになりました。
執筆時時点ではv14.0.1が最新バージョンです。

13系を使っていると14系に移行しようねというポップアップが表示されます。
僕はWordPressのプラグイン開発をやっている関係で、環境構築は以下のコマンドで行っています。

$ npx @wordpress/create-block <project-name>

2021年11月3日現在、このコマンドでインストールされるstylelintはv13系です。
そのため別途stylelintは自分でインストールし直すのが良いかと思います、そのうちWordPress側でもv14系が採用されると思いますがそれまでサポートを打ち切ったと公言されているバージョンを使うのもアレなので・・・。

$ npm i -D stylelint

拡張機能自体にstylelintが同梱されなくなった

って言われるまで知らなかったんですが、どうやらStylelint（拡張機能）自体にstylelintが同梱されていたようです。
それが同梱されなくなったので、settings.jsonにPathを指定する必要があります。

"stylelint.styelintPath": "node_modules/stylelint"

大半の環境ではこれで動くようになるんじゃないかなと思います。
もちろんグローバルインストールしている方はグローバルのPathを指定してください。

デフォルトでcss/postcss以外を解析しなくなった

設定を変更しない限り、css/postcss以外の解析を行わなくなりました。
特に利用者が多いであろうSCSS等は別途していする必要があります。

"stylelint.validate": [
    "css",
    "scss",
    "postcss"
],

SCSSは利用されるプロジェクト量を考えてもデフォルトでよくない？とは思いますが、ミニマムシンプルなのは最近の流行りなので「必要になったとき追加する」方がスマートかも知れませんね。

自動更新されたくない場合は設定でオフに

もしVSCodeの拡張機能を自動でアップデートしてほしく無い時はsettings.jsonで無効化しておくと良さそうです。

"extensions.autoUpdate": false

とはいえ僕はめんどくさがりやなのでデフォルト設定で自動更新バンバン受け付けてますが、大きな変更の時は何らかの方法で通知があるとありがたい・・・笑。