VSCodeの拡張機能vscode-stylelintがアップデートで動かなくなった

こんにちは、 Gaji-Labo 横田です。ある日いつものように開発を進めていると、いつの間にか VSCode の拡張機能 vscode-stylelint が動かなくなっていました。 Stylelint のバージョンアップに伴って、VSCode の拡張機能 vscode-stylelint が自動アップデートされ、既存設定を見直す必要がありました。今回はその対処法について書きます。
Stylelint 14 については山崎の記事もご参照ください。

vscode-stylelint v1系の変更点

vscode-stylelint 公式にアナウンスがあります。vscode-stylelint 1系では Stylelint バージョン13のサポートを終了したので、Stylelint をバージョン14にアップデートしてほしいということです。

⚠️ Stylelint 13.x and Prior is No Longer Supported

vscode-stylelint 1.x expects to use Stylelint 14 at minimum. Usage with prior versions of Stylelint is no longer supported. While older versions may continue to work for a while, you may encounter unexpected behaviour. You should upgrade your copy of Stylelint to version 14 or later for the best experience.

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

また、vscode-stylelint 0系では、どうやら vscode-stylelint 自体に stylelint がバンドルされていたようです。アップデートされた vscode-stylelint 1系では提供されなくなったので、既存の設定では動かなくなっていたのでした。

⚠️ Stylelint is No Longer Bundled

Unlike 0.x, 1.x no longer provides a copy of Stylelint bundled with the extension. Bundling Stylelint brought up many unwanted side effects and significantly increased the extension’s size.

Starting with 1.x, vscode-stylelint will depend on having a copy of Stylelint installed in the open workspace (recommended) or globally (not recommended). If the extension doesn’t seem to be linting any documents, make sure you have Stylelint installed.

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

さらに、vscode-stylelint 1系では、CSSとPostCSSの検証のみをサポートし、他の言語を検証するためには追加の構成が必要になったということです。

⚠️ Only CSS and PostCSS are Validated by Default

The 0.x versions of this extension, which used Stylelint 13.x and prior, supported validating many different languages out of the box without any additional configuration. However, this added a lot of complexity and resulted in many cases of unwanted or unexpected behaviour.

In current versions of the extension, the extension only supports validating CSS and PostCSS out of the box and requires additional configuration to validate other languages.

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

VSCode の設定を見直し

上記変更にともない、VSCode の settings.json を見直します。
まず、Stylelint への Path を指定しました。

"stylelint.stylelintPath": "node_modules/stylelint"

グローバルにインストールしている場合は適宜パスを変更してください。

次に、検証したい言語を以下のように追加しました。

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

今後も必要に応じて、都度自分で設定追加することになりますね。

ついでに、ファイルを保存する時にフォーマットするよう Editor: Format On Save 機能もオンになっているか再確認。

"editor.codeActionsOnSave": { "source.fixAll.stylelint": true },

これらを追記して、無事に動くようになりました。

終わりに

Stylelint に限らずですが、VSCode の拡張機能はチームでの開発体験に影響が大きいので、今回のような大きめの変更で設定の見直しが必要な時、スムーズに対処したいものですね。わたしの場合はデキるチームメンバーがさっと情報共有してくれたおかげで、手が止まることなく設定を見直すことができました。