stylelintを13系から14系にアップデートしたのでメモ📝

個人で運用しているサービスのstylelintを13系から14系の上げたので、そのあたりでやったこととかをメモしておきます。

stylelint.io

アップデート手順

公式で14系へのマイグレーションガイドが公開されているので、基本的にはそれをみてやっていきます。

stylelint.io

.scssを静的解析するためのライブラリの変更

We recommend extending a shared config that includes the appropriate PostCSS syntax for you. For example, if you use Stylelint to lint SCSS, you can extend the stylelint-config-standard-scss shared config.

今まではstyelint-scssとstylelint-config-recommended-scssを使っていたのですが、以下のstylelint-config-standard-scssを使えば良くなったようなので、このライブラリを利用して、その他は削除するようにしました。

github.com

stylelint-config-standard-scssにはstylelint-config-recommended-scssの設定も含まれているのでextendsにはstylelint-config-standard-scssのみを設定するようにしています。

{
  "extends": ["stylelint-config-standard-scss"],
  "rules": {
    "no-empty-source": null
  }
}

stylelint-config-standard-scss/index.js at main · stylelint-scss/stylelint-config-standard-scss · GitHub

.vueを静的解析に含めるための設定

If a shared config isn't available for your perferred language or library, then you can install the appropriate PostCSS syntax yourself and use the customSyntax option, which is now available in the configuration object.

今までは.vue内のscssの記述も自動的に検査することが出来ましたが、今回からは自分で設定を追加しないといけなくなったようです。

HTML, XML and HTML-like embeds (.html, .xml, .svelte, .vue etc.) use postcss-html

.vueの場合は上述の通りpostcss-htmlをインストールして以下のようにoverrideの設定をすることで、.vueに関してはpostcss-htmlを利用するように設定を行います。

{
  "extends": ["stylelint-config-standard-scss"],
  "overrides": [
    {
      "files": ["**/*.vue"],
      "customSyntax": "postcss-html"
    }
  ],
  "rules": {
    "no-empty-source": null
  }
}

おわりに

多少overrideまわりの設定でハマってしまいましたが、公式ドキュメント通りに設定を変更することでバージョンアップができました！こういうドキュメントもアップデート時に整備してもらえるの非常にありがたいですね🙏