eslint plugin vue scoped css

Eslint-Plugin-Vue-Scoped-CSS

Eslint-Plugin-Vue-Scoped-CSS est un plugin Eslint pour SCOPED CSS dans Vue.js.

Caractéristiques

Ce plugin Eslint fournit des règles de liaison liées à de meilleures façons de vous aider à éviter les problèmes lors de l'utilisation de CSS dans le cadre de Vue.js.

• Fournit des règles de liaison pour les CSS de portée.
• Prend en charge la syntaxe CSS, y compris les sélecteurs de niveau 4.
• Prend en charge <style lang="scss"> .
• Support <style lang="stylus"> .
• Parses <style> , <template> et <script> blocs.

Vous pouvez vérifier la démo en ligne.

Documentation

Voir les documents.

Installation

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

Exigences

• Eslint v6.0.0 et supérieur
• Node.js v12.22.x, v14.17.x, v16.x et supérieur

Usage

Nouvelle config ( eslint.config.js )

Utilisez le fichier eslint.config.js pour configurer des règles. Voir aussi: https://eslint.org/docs/latest/use/configure/configuration-files-new.

Exemple 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'
    }
  }
] ;

Configation héritée ( .eslintrc )

Utilisez .eslintrc.* Fichier pour configurer les règles. Voir aussi: https://eslint.org/docs/latest/use/configure/.

Exemple .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'
  }
} 

Configuration

Ce plugin fournit quelques configurations prédéfinies:

Nouvelle config ( eslint.config.js )

• *.configs['flat/base'] - Paramètres et règles pour activer ce plugin
• *.configs['flat/recommended'] - /base , plus les règles pour de meilleures façons de vous aider à éviter les problèmes pour Vue.js 3.x
• *.configs['flat/vue2-recommended'] - /base , plus les règles pour de meilleures façons de vous aider à éviter les problèmes pour Vue.js 2.x
• *.configs['flat/all'] - Toutes les règles de ce plugin sont incluses

Configation héritée ( .eslintrc )

• plugin:vue-scoped-css/base - Paramètres et règles pour activer ce plugin
• plugin:vue-scoped-css/recommended - /base , plus les règles pour de meilleures façons de vous aider à éviter les problèmes pour Vue.js 2.x
• plugin:vue-scoped-css/vue3-recommended - /base , plus les règles pour de meilleures façons de vous aider à éviter les problèmes pour Vue.js 3.x
• plugin:vue-scoped-css/all - Toutes les règles de ce plugin sont incluses

Règles

L'option --fix sur la ligne de commande corrige automatiquement les problèmes rapportés par les règles qui ont une clé? ci-dessous.

Recommandé pour vue.js 3.x

Appliquer toutes les règles de cette catégorie avec:

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

ou

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

ID de règle	Description
VUE-SCOPED-CSS / appliquer de type	appliquer les balises <style> pour être claires ou avoir l'attribut scoped ou module
VUE-SCOPED-CSS / NO	interdire en utilisant des combinateurs profonds obsolètes	?
Vue-Scoped-CSS / NO-PAREENT-OF-V-GLOBAL	Interdire le sélecteur parent pour ::v-global Pseudo-Element
VUE-SCOPED-CSS / NO-PARSING-ERROR	Interdire les erreurs d'analyse dans <style>
VUE-SCOPED-CSS / NO-UNUSED-KEYFRATES	Interdire @keyframes qui n'utilise pas dans les css de portée
VUE-SCOPED-CSS / NO-UNUSÉ-VERSE	Interdire les sélecteurs définis dans des CS dans des lunettes qui n'utilisent pas dans <template>
VUE-SCOPED-CSS / Bid-V-Deep-Argument	Besoin d'un argument sélecteur pour être transmis à ::v-deep()	?
VUE-SCOPED-CSS / require-V-Global-Argument	Besoin d'un argument sélecteur pour être transmis à ::v-global()
VUE-SCOPED-CSS / require-v-slotted-argument	Besoin d'un argument sélecteur pour être transmis à ::v-slotted()

Recommandé pour vue.js 2.x

Appliquer toutes les règles de cette catégorie avec:

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

ou

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

ID de règle	Description
VUE-SCOPED-CSS / appliquer de type	appliquer les balises <style> pour être claires ou avoir l'attribut scoped ou module
VUE-SCOPED-CSS / NO-PARSING-ERROR	Interdire les erreurs d'analyse dans <style>
VUE-SCOPED-CSS / NO-UNUSED-KEYFRATES	Interdire @keyframes qui n'utilise pas dans les css de portée
VUE-SCOPED-CSS / NO-UNUSÉ-VERSE	Interdire les sélecteurs définis dans des CSS dans des lunettes qui n'utilisent pas dans <template>

Non classé

Aucun préréglage ne permet les règles de cette catégorie. Veuillez activer chaque règle si vous le souhaitez.

Par exemple:

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

ID de règle	Description
VUE-SCOPED-CSS / NO	Interdire les classes V-Enter et V-Leave.
VUE-SCOPED-CSS / require-selector-used-inside	Interdire les sélecteurs définis qui ne sont pas utilisés à l'intérieur <template>
Vue-Scoped-CSS / V-Deep-pseudo	appliquer :deep() / ::v-deep() style	?
Vue-Scoped-CSS / V-Global-Pseudo-style	Appliquer :global() / ::v-global() Style	?
Vue-Scoped-CSS / V-Slotted-Pseudo-style	appliquer :slotted() / ::v-slotted()	?

Déprécié

• ️ Nous allons supprimer les règles obsolètes dans la prochaine version majeure. Veuillez migrer vers le successeur / les nouvelles règles.
• ? Nous ne corrigeons pas les bogues qui sont dans les règles obsolètes car nous n'avons pas assez de ressources.

ID de règle	Remplacé par
VUE-SCOPED-CSS / SANS SANS	VUE-SCOPED-CSS / appliquer de type

Contributif

Bienvenue contribuant!

Veuillez utiliser les problèmes / PRS de Github.

Outils de développement

• npm test exécute les tests et mesure la couverture.
• npm run update des exécutions afin de mettre à jour la lecture et la configuration recommandée.

Licence

Voir le dossier de licence pour les droits et limitations de licence (MIT).