eslint plugin vue scoped css

Eslint-Plugin-Vue-Scoped-CSS

eslint-plugin-vue-scoped-cssは、vue.jsのスコープCSSのESLINTプラグインです。

特徴

このESLINTプラグインは、vue.jsでスコープされたCSSを使用する際に問題を回避するのに役立つより良い方法に関連する糸くずのルールを提供します。

• スコープCSSの糸くずルールを提供します。
• レベル4セレクターを含むCSS構文をサポートします。
• <style lang="scss">をサポートします。
• <style lang="stylus">をサポートします。
• parses <style> 、 <template> 、 <script>ブロック。

オンラインデモを確認できます。

ドキュメント

ドキュメントを参照してください。

インストール

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

要件

• ESLINT V6.0.0以降
• node.js v12.22.x、v14.17.x、v16.x以上

使用法

new config（ eslint.config.js ）

eslint.config.jsファイルを使用して、ルールを構成します。参照：https：//eslint.org/docs/latest/use/configure/configuration-files-new。

例eslint.config.js ：

 import eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css' ;
export default [
  // add more generic rule sets here, such as:
  // js.configs.recommended,
  ... eslintPluginVueScopedCSS . configs [ 'flat/recommended' ] ,
  {
    rules : {
      // override/add rules settings here, such as:
      // 'vue-scoped-css/no-unused-selector': 'error'
    }
  }
] ;

レガシーconfig（ .eslintrc ）

.eslintrc.*ファイルを使用してルールを構成します。参照：https：//eslint.org/docs/latest/use/configure/。

例.eslintrc.js ：

 module . exports = {
  extends : [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue-scoped-css/vue3-recommended'
  ] ,
  rules : {
    // override/add rules settings here, such as:
    // 'vue-scoped-css/no-unused-selector': 'error'
  }
} 

構成

このプラグインは、いくつかの定義済みの構成を提供します：

new config（ eslint.config.js ）

• *.configs['flat/base'] - このプラグインを有効にする設定とルール
• *.configs['flat/recommended'] - /baseに加えて、vue.js 3.xの問題を回避するのに役立つより良い方法のルール
• *.configs['flat/vue2-recommended'] - /baseに加えて、vue.js 2.xの問題を回避するのに役立つより良い方法のルール
• *.configs['flat/all'] - このプラグインのすべてのルールが含まれています

レガシーconfig（ .eslintrc ）

• plugin:vue-scoped-css/baseこのプラグインを有効にする設定とルール
• plugin:vue-scoped-css/recommended - /base 、およびvue.js 2.xの問題を回避するためのより良い方法のためのルール
• plugin:vue-scoped-css/vue3-recommended /base 、さらに、vue.js 3.xの問題を回避するのに役立つより良い方法のルール
• plugin:vue-scoped-css/allこのプラグインのすべてのルールが含まれています

ルール

コマンドラインの--fixオプションは、レンチを持つルールによって報告された問題を自動的に修正しますか？下に。

Vue.js 3.xに推奨されます

このカテゴリのすべてのルールを次のように実施します。

 export default [
  ... eslintPluginVueScopedCSS . configs [ 'flat/recommended' ] ,
]

または

{
  "extends" : [ " plugin:vue-scoped-css/vue3-recommended " ]
}

ルールID	説明
Vue-Scoped-CSS/Enforce-Style-Type	<style>タグを平易にするか、 scopedまたはmodule属性を持つように強制します
Vue-Scoped-CSS/No-Deprecated-Deep-Combinator	非推奨のディープコンビネーターを使用して禁止します	？
Vue-scoped-CSS/no-parent-of-g-global	::v-global擬似要素の親セレクターを許可します
Vue-scoped-CSS/no-parsing-error	<style>で解析エラーを許可しません
Vue-Scoped-CSS/No-Unused-KeyFrames	スコープCSSで使用しない@keyframesを許可します
Vue-scoped-CSS/No-unused-Selector	<template>で使用しないスコープCSSで定義されたセレクターを許可しない
Vue-scoped-css/require-v-deep-argument	セレクターの引数を::v-deep()に渡す必要があります	？
Vue-scoped-CSS/require-v-global-argument	セレクターの引数を::v-global()に渡す必要があります
Vue-scoped-css/require-v-slotted-argument	セレクターの引数を::v-slotted()に渡す必要があります

vue.js 2.xに推奨されます

このカテゴリのすべてのルールを次のように実施します。

 export default [
  ... eslintPluginVueScopedCSS . configs [ 'flat/vue2-recommended' ] ,
]

または

{
  "extends" : [ " plugin:vue-scoped-css/recommended " ]
}

ルールID	説明
Vue-Scoped-CSS/Enforce-Style-Type	<style>タグを平易にするか、 scopedまたはmodule属性を持つように強制します
Vue-scoped-CSS/no-parsing-error	<style>で解析エラーを許可しません
Vue-Scoped-CSS/No-Unused-KeyFrames	スコープCSSで使用しない@keyframesを許可します
Vue-scoped-CSS/No-unused-Selector	<template>で使用しないスコープCSSで定義されたセレクターを許可しない

未分類

プリセットなしこのカテゴリのルールを有効にします。必要に応じて各ルールを有効にしてください。

例えば：

{
  "rules" : {
    "vue-scoped-css/no-deprecated-v-enter-v-leave-class" : " error "
  }
}

ルールID	説明
Vue-scoped-CSS/No-Deprecated-V-Enter-V-Leaveクラス	V-EnterおよびVリーブクラスを許可しません。
Vue-scoped-CSS/require-selector-suse-inside	<template>内で使用されない定義されたセレクターを許可しません
Vue-Scoped-CSS/V-Deep-Pseudoスタイル	Enforce :deep() / ::v-deep()スタイル	？
Vue-Scoped-CSS/V-Global-Pseudoスタイル	Enforce :global() / ::v-global()スタイル	？
Vue-Scoped-CSS/V-Slotted-Pseudoスタイル	Enforce :slotted() / ::v-slotted()スタイル	？

非推奨

• ショ和次の主要なリリースで非推奨ルールを削除します。後継者/新しいルールに移行してください。
• ？十分なリソースがないため、非推奨ルールにあるバグは修正しません。

ルールID	に置き換えられました
Vue-scoped-CSS/require-scoped	Vue-Scoped-CSS/Enforce-Style-Type

貢献

ようこそ貢献！

Githubの問題/PRSを使用してください。

開発ツール

• npm testテストを実行し、カバレッジを測定します。
• npm run update READMEと推奨設定を更新するために実行されます。

ライセンス

ライセンスの権利と制限（MIT）については、ライセンスファイルを参照してください。