eslint plugin vue scoped css

Eslint-Plugin-Vue-Scoped-CSS

Eslint-Plugin-Vue-Scoped-CSS é o plug-in ESLint para CSS com escopo em Vue.JS.

Características

Este plug -in ESLint fornece regras de linha relacionadas a melhores maneiras de ajudá -lo a evitar problemas ao usar CSS com escopo em Vue.js.

• Fornece regras de linha para CSS com escopo.
• Suporta a sintaxe do CSS, incluindo seletores de nível 4.
• Suporta <style lang="scss"> .
• Suporta <style lang="stylus"> .
• Parsos <style> , <template> e <script> blocos.

Você pode verificar a demonstração online.

Documentação

Veja documentos.

Instalação

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

Requisitos

• Eslint v6.0.0 e acima
• Node.js v12.22.x, v14.17.x, v16.x e acima

Uso

Novo config ( eslint.config.js )

Use o arquivo eslint.config.js para configurar regras. Veja também: https://eslint.org/docs/latest/use/configure/configuration-files-new.

Exemplo 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 Legacy ( .eslintrc )

Use .eslintrc.* Arquivo para configurar regras. Veja também: https://eslint.org/docs/latest/use/configure/.

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

Configurações

Este plug -in fornece algumas configurações predefinidas:

Novo config ( eslint.config.js )

• *.configs['flat/base'] - Configurações e regras para ativar este plugin
• *.configs['flat/recommended'] - /base , além de regras para obter melhores maneiras de ajudá -lo a evitar problemas para vue.js 3.x
• *.configs['flat/vue2-recommended'] - /base , além de regras para obter melhores maneiras de ajudá -lo a evitar problemas para o vue.js 2.x
• *.configs['flat/all'] - Todas as regras deste plug -in estão incluídas

Config Legacy ( .eslintrc )

• plugin:vue-scoped-css/base -Configurações e regras para ativar este plug-in
• plugin:vue-scoped-css/recommended /base , além de regras para obter melhores maneiras de ajudá-lo a evitar problemas para o vue.js 2.x
• plugin:vue-scoped-css/vue3-recommended /base , além de regras para obter melhores maneiras de ajudá-lo a evitar problemas para vue.js 3.x
• plugin:vue-scoped-css/all -todas as regras deste plug-in estão incluídas

Regras

A opção --fix na linha de comando corrige automaticamente os problemas relatados por regras que têm uma chave inglesa? abaixo.

Recomendado para vue.js 3.x

Aplicar todas as regras nesta categoria com:

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

ou

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

ID da regra	Descrição
Vue-Scoped-CSS/Filforce-Style-Type	Aplicar as tags <style> para ser claro ou ter o atributo scoped ou module
Vue-Scoped-CSS/não-depreciado-com-combinador de profundidade	não perseguir usando combinadores profundos depreciados	?
Vue-Scoped-CSS/sem parente-de-v-global	Não perseguindo seletor de pais para ::v-global
Vue-Scoped-CSS/não-pacote-erro	proibir erros de análise em <style>
Vue-Scoped-CSS/não-used-keyframes	Não perdoe @keyframes que não usam no Scoped CSS
Vue-Scoped-CSS/sem seletor sem uso	Não perseguindo seletores definidos em CSS com escopo que não usam em <template>
Vue-Scoped-CSS/requer-v-descep-Argument	exigir que o argumento seletor seja passado para ::v-deep()	?
Vue-Scoped-CSS/requer-V-Global-Argument	exigir que o argumento seletor seja passado para ::v-global()
Vue-Scoped-CSS/requer-V-Argument-Argument	exigir que o argumento seletor seja passado para ::v-slotted()

Recomendado para vue.js 2.x

Aplicar todas as regras nesta categoria com:

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

ou

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

ID da regra	Descrição
Vue-Scoped-CSS/Filforce-Style-Type	Aplicar as tags <style> para ser claro ou ter o atributo scoped ou module
Vue-Scoped-CSS/não-pacote-erro	proibir erros de análise em <style>
Vue-Scoped-CSS/não-used-keyframes	Não perdoe @keyframes que não usam no Scoped CSS
Vue-Scoped-CSS/sem seletor sem uso	Não perseguindo seletores definidos em CSS com escopo que não usam em <template>

Sem categoria

Nenhuma predefinição permite as regras nesta categoria. Por favor, ative cada regra, se quiser.

Por exemplo:

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

ID da regra	Descrição
Vue-Scoped-CSS/sempreciado-V-Ver-Ver-V-V-V-Leave-Class	Atuar as classes V-Entre e V-Leave.
Vue-escopo-CSS/requisito-seletor-inside	Não perseguindo seletores definidos que não são usados ​​dentro <template>
Vue-Scoped-CSS/V-Deep-Pseudo-estilo	execução :deep() / ::v-deep() estilo	?
Vue-Scoped-CSS/V-Global-Pseudo-estilo	execução :global() / ::v-global() estilo	?
Vue-Scoped-CSS/V-Pseudo-Slotado no estilo	APLESCE :slotted() / ::v-slotted() Style	?

Descontinuado

• ️ Vamos remover as regras depreciadas na próxima grande versão. Por favor, migre para sucessor/novas regras.
• ? Não corrigimos bugs que estão em regras depreciadas, pois não temos recursos suficientes.

ID da regra	Substituído por
Vue-escopo-CSS/requisito	Vue-Scoped-CSS/Filforce-Style-Type

Contribuindo

Bem -vindo contribuindo!

Por favor, use os problemas/PRs do Github.

Ferramentas de desenvolvimento

• npm test executa testes e mede a cobertura.
• npm run update é executado para atualizar o ReadMe e a configuração recomendada.

Licença

Consulte o arquivo de licença para obter direitos e limitações de licença (MIT).