stylelintのVSCode拡張はどれ使えば良いのか

みなさま[stylelint]のVSCode拡張はどれを利用していますか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84259/577b843d-d48b-5d22-8732-e1737c6a3820.png)

https://marketplace.visualstudio.com/search?term=stylelint&target=VSCode&category=Linters&sortBy=Relevance

実は今年の11月に、これまで最も利用されていて、[stylelint]が公式にも推奨していたVSCode拡張は、マーケットプレースから削除されてしまい、どれを使うのがいいのか悩ましい時期が続いていました。

- [Remove VSCode extension from the list of tools](https://github.com/stylelint/stylelint/pull/4438)

この状況は[stylelint]チームにとっても良いことでは無いので、別のプラグインを公式に推奨とするのか？自分たちで管理するのか？議論があった後、thibaudcolasさんの働きによって2019/12/23に[stylelint]は公式のVSCode拡張をリリースしました。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">📢 <a href="https://twitter.com/code?ref_src=twsrc%5Etfw">@code</a> vscode-stylelint v0.60.0 released, this release is an updated fork of the original (now removed) stylelint extension, thanks to <a href="https://twitter.com/thibaud_colas?ref_src=twsrc%5Etfw">@thibaud_colas</a> for leading this. 🎉<a href="https://t.co/n6plARmIQ1">https://t.co/n6plARmIQ1</a><br><br>p.s. More stylelint updates and auto-fixing coming soon</p>&mdash; stylelint (@stylelint) <a href="https://twitter.com/stylelint/status/1208916572544258049?ref_src=twsrc%5Etfw">December 23, 2019</a></blockquote>

なので、現時点では、publishersがstylelintとなっている
<img src="https://raw.githubusercontent.com/stylelint/vscode-stylelint/main/media/stylelint.png" width="100px">
のアイコンのVSCode拡張を利用するのが良いはずです。

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

# 機能

この[vscode-stylelint]は、以前、公式で推奨されていたshinnnさん作のVSCode拡張のフォークから始まっています。
なので基本的な機能は以前と同じです。

## 追加機能

### 自動修正

2019/12/28のリリースでサポートしました。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">📢 <a href="https://twitter.com/code?ref_src=twsrc%5Etfw">@code</a> vscode-stylelint v0.70.0 released, this release updates <a href="https://twitter.com/stylelint?ref_src=twsrc%5Etfw">@stylelint</a> to v12.0.1 and adds autofix support, thanks to <a href="https://twitter.com/omoteota?ref_src=twsrc%5Etfw">@omoteota</a>. 🎉<a href="https://t.co/n6plARmIQ1">https://t.co/n6plARmIQ1</a></p>&mdash; stylelint (@stylelint) <a href="https://twitter.com/stylelint/status/1210871125716004864?ref_src=twsrc%5Etfw">December 28, 2019</a></blockquote>

ESLintのVSCode拡張と同じように、`"editor.codeActionsOnSave"`で設定します。

```json
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
```

### ローカル`stylelint`ライブラリを使用する

2020/01/05のリリースでサポートしました。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">📢 <a href="https://twitter.com/code?ref_src=twsrc%5Etfw">@code</a> vscode-stylelint v0.80.0 released, this release now supports using the local repo/project <a href="https://twitter.com/stylelint?ref_src=twsrc%5Etfw">@stylelint</a> version installed in node_modules and now supports <a href="https://twitter.com/npmjs?ref_src=twsrc%5Etfw">@npmjs</a>, <a href="https://twitter.com/yarnpkg?ref_src=twsrc%5Etfw">@yarnpkg</a>, and <a href="https://twitter.com/pnpmjs?ref_src=twsrc%5Etfw">@pnpmjs</a> package managers thanks to <a href="https://twitter.com/omoteota?ref_src=twsrc%5Etfw">@omoteota</a>. 🎉<a href="https://t.co/n6plARmIQ1">https://t.co/n6plARmIQ1</a></p>&mdash; stylelint (@stylelint) <a href="https://twitter.com/stylelint/status/1213647949281947649?ref_src=twsrc%5Etfw">January 5, 2020</a></blockquote>

対応前のこのVSCode拡張は内包している`stylelint`ライブラリを使用して検証を実行していました。
どういうことかと言いますと、ユーザーが任意のバージョンの`stylelint`をインストールして使いたいと思ってもこのVSCode拡張からは利用できませんでした。

これを解消するために、対応以降はローカルにインストールした`stylelint`ライブラリを利用できるようになります。

### Yarn2 (Yarn@berry) サポート

編集2020/06/01：

下記のドキュメントに従ってPnPifyでゴニョればYarn2環境でも動くはずです。

https://yarnpkg.com/advanced/editor-sdks

### 警告されたルールのドキュメントへのリンク サポート予定

編集2020/10/04：

警告のルール名からドキュメントのリンク（[stylelint]標準ルールのみ）を開けるようになります。 （VSCode 1.43 から実装できるようになりました）

- [Add code action to show link to rule documentation](https://github.com/stylelint/vscode-stylelint/pull/86)

# 他の[stylelint]のVSCode拡張を使用している方へ

## publishersがthibaudcolasの`stylelint`というVSCode拡張を使用している方へ

https://marketplace.visualstudio.com/items?itemName=thibaudcolas.stylelint (現在は存在しません)
を使用している方。

そちらは公式のVSCode拡張を準備するために、thibaudcolasさんが一時的に公開したVSCode拡張です。

なので、こちらに乗り換えるのが良いと思います。
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

## `stylelint-plus`というVSCode拡張を使用している方へ

https://marketplace.visualstudio.com/items?itemName=hex-ci.stylelint-plus
を使用している方。

公式も自動修正をサポートしました。
設定方法や内部的な処理方法は少し違いますが、乗り換えは可能だと思います。
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

[stylelint]のVSCode拡張どれ使えばいいの？の混乱の１ヶ月の間に、[prettier-vscode]のドキュメントを参照して`stylelint-plus`をインストールしてしまった方。
その[prettier-vscode]のドキュメントも公式の[vscode-stylelint]の利用を促すように変更されましたので、公式に乗り換えるのがいいと思われます。

- *[prettier-vscode]のドキュメント変更のPR*:  
  https://github.com/prettier/prettier-vscode/pull/1171

（余談ですが、[stylelint]チームは公式にリポジトリを持たず、`stylelint-plus`を推奨とするか？と議論していた時期もあり、[prettier-vscode]はその内容を受けてドキュメントで`stylelint-plus`を使うように記載したのだと思われます。）

また、BPScottさんが今後のフォークの必要性を作者に問いかけていたりもします。

- *Is this fork needed anymore now that the official plugin supports autofix?*:  
  https://github.com/hex-ci/vscode-stylelint-plus/issues/18

追記2020/03/09：
→その後の返信を見ると、hex-ciさんは`stylelint-plus`のメンテナンスを続けるつもりみたいですね。

- https://github.com/hex-ci/vscode-stylelint-plus/issues/18#issuecomment-581767089

## `vscode-stylelint-format`というVSCode拡張を使用している方へ

https://marketplace.visualstudio.com/items?itemName=pqml.vscode-stylelint-format (現在は存在しません)
を使用している方。

公式も自動修正をサポートしました。
設定方法や内部的な処理方法は少し違いますが、乗り換えは可能だと思います。
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

作者本人は`vscode-stylelint-format`を削除する方向で同意してくれているようです。
追記2020/03/09：
→その後、削除されました。

> I will deprecate my extension ASAP.

- https://github.com/stylelint/vscode-stylelint/issues/31#issuecomment-569476341


## その他のVSCode拡張を使用している方へ

[stylelint]チームはユーザーの混乱を避けるため統合に向けて動いているようです。

- https://github.com/stylelint/vscode-stylelint/issues/31#issuecomment-569471678

特にこだわりがなければ、良いタイミングで、公式のプラグインに切り替えるのが良いと思われます。
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[stylelint]: https://stylelint.io/
[vscode-stylelint]: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
[prettier-vscode]: https://github.com/prettier/prettier-vscode