Vue.js: `eslint-plugin-vue-scoped-css`を使って静的解析でScoped CSSを強制するメモ📝

Vue.jsのSFCを利用している場合に極力Scoped CSSを利用してCSSの統制を取りたいと思いますが、eslint-plugin-vue-scoped-css を利用すると静的解析で強制することができることを最近学んだのでメモ📝

future-architect.github.io

やり方は簡単で公式ドキュメントの通りですが、以下でインストールし、

$ npm install --save-dev eslint-plugin-vue-scoped-css vue-eslint-parser

ESLintの設定ファイルに以下を追記するだけです。

module.exports = {
  extends: [
+ 'plugin:vue-scoped-css/base'
  ],
  rules: {
+ "vue-scoped-css/enforce-style-type": ["error", { allows: ["scoped"] }],
  }
}

これでScoped CSSを利用してない場合にESLintで以下のエラーが発生するようになりました✨

  159:1  error  Missing attribute `scoped`  vue-scoped-css/enforce-style-type

eslint-plugin-vue-scoped-css、他にもVue3で非推奨な::v-deepや、Vue3で破壊的変更があったtransition系のclassの利用も検知できるの非常に便利ですね🙌