eslint plugin vue scoped css

Eslint-Plugin-Vue-Coped-CSS

Eslint-Plugin-Vue-Scoped-CSS es el complemento de Eslint para CSS en vue.js.

Características

Este complemento de Eslint proporciona reglas de pelusa relacionadas con mejores formas de ayudarlo a evitar problemas cuando se usa CSS en Vue.js.

• Proporciona reglas de pelusa para CSS de alcance.
• Admite la sintaxis CSS, incluidos los selectores de nivel 4.
• Admite <style lang="scss"> .
• Admite <style lang="stylus"> .
• Analizados <style> , <template> y <script> bloques.

Puede consultar la demostración en línea.

Documentación

Ver documentos.

Instalación

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

Requisitos

• Eslint v6.0.0 y superior
• Node.js v12.22.x, v14.17.x, v16.x y arriba

Uso

Nueva configuración ( eslint.config.js )

Use el archivo eslint.config.js para configurar reglas. Ver también: https://eslint.org/docs/latest/use/configure/configuration-files-new.

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

Legacy config ( .eslintrc )

Use el archivo .eslintrc.* Para configurar reglas. Ver también: https://eslint.org/docs/latest/use/configure/.

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

Configuraciones

Este complemento proporciona algunas configuraciones predefinidas:

Nueva configuración ( eslint.config.js )

• *.configs['flat/base'] - Configuración y reglas para habilitar este complemento
• *.configs['flat/recommended'] - /base , más reglas para mejores formas de ayudarlo a evitar problemas para Vue.js 3.x
• *.configs['flat/vue2-recommended'] - /base , más reglas para mejores formas de ayudarlo a evitar problemas para Vue.js 2.x
• *.configs['flat/all'] - Todas las reglas de este complemento están incluidas

Legacy config ( .eslintrc )

• plugin:vue-scoped-css/base -Configuración y reglas para habilitar este complemento
• plugin:vue-scoped-css/recommended /base , además de reglas para mejores formas de ayudarlo a evitar problemas para Vue.js 2.x
• plugin:vue-scoped-css/vue3-recommended /base , además de reglas para mejores formas de ayudarlo a evitar problemas para Vue.js 3.x
• plugin:vue-scoped-css/all : todas las reglas de este complemento están incluidas

Normas

La opción --fix en la línea de comando soluciona automáticamente problemas informados por reglas que tienen una llave llave? abajo.

Recomendado para Vue.js 3.x

Haga cumplir todas las reglas en esta categoría con:

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

o

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

ID de regla	Descripción
Vue-scoped-CSS/Force-Style-type	Haga cumplir las etiquetas <style> para que sean simples o tengan el atributo de scoped o module
VUE-COPED-CSS/Combinador de profundidad no-reprecisado	no permitir el uso de combinadores profundos desaprobados	?
Vue-scoped-CSS/No-Parent of-V-Global	No permita el selector de padres para ::v-global
Vue-scoped-CSS/no-parsing-error	no permitir errores de análisis en <style>
Vue-scoped-CSS/No-Unis-Keyframes	no permitir @keyframes que no se usan en CSS de alcance
Vue-scoped-CSS/sin usar selector	No permita selectores definidos en CSS con alcance que no se usan en <template>
vue-scoped-CSS/requería-v-argumento	requiere que se pase el argumento selector a ::v-deep()	?
vue-scoped-CSS/requería-V-global-argumento	requiere que se pase el argumento selector a ::v-global()
vue-scoped-CSS/requería-v-litro-argumento	requiere que se pase el argumento selector a ::v-slotted()

Recomendado para Vue.js 2.x

Haga cumplir todas las reglas en esta categoría con:

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

o

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

ID de regla	Descripción
Vue-scoped-CSS/Force-Style-type	Haga cumplir las etiquetas <style> para que sean simples o tengan el atributo de scoped o module
Vue-scoped-CSS/no-parsing-error	no permitir errores de análisis en <style>
Vue-scoped-CSS/No-Unis-Keyframes	no permitir @keyframes que no se usan en CSS de alcance
Vue-scoped-CSS/sin usar selector	No permita selectores definidos en CSS con alcance que no se usan en <template>

Sin categoría

No Preset habilita las reglas en esta categoría. Por favor, habilite cada regla si lo desea.

Por ejemplo:

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

ID de regla	Descripción
Vue-scoped-CSS/no-depredado-v-enter-v-leve-class	No permita clases de V-Entring y V-Leave.
Vue-scoped-CSS/requerir-selector-usado	No permita selectores definidos que no se usen dentro de <template>
Vue-scoped-CSS/V-Deep-Pseudo-style	Force :deep() / ::v-deep() estilo	?
Vue-scoped-CSS/V-global-pseudo-style	Force :global() / ::v-global() estilo	?
Vue-scoped-CSS/V-slotted-pseudo-style	Ejemplo de cola :slotted() / ::v-slotted()	?

Desapercibido

• ️ Vamos a eliminar las reglas desactivadas en el próximo lanzamiento importante. Por favor migre a sucesor/nuevas reglas.
• ? No solucionamos errores que estén en reglas desactivadas ya que no tenemos suficientes recursos.

ID de regla	Reemplazado por
vue-scoped-CSS/requerido	Vue-scoped-CSS/Force-Style-type

Que contribuye

¡Bienvenido contribuyendo!

Utilice los problemas/PR de GitHub.

Herramientas de desarrollo

• npm test ejecuta la cobertura de pruebas y mide la cobertura.
• npm run update se ejecuta para actualizar ReadMe y la configuración recomendada.

Licencia

Consulte el archivo de licencia para los derechos y limitaciones de la licencia (MIT).