Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Component name "Box" should always be multi-word vue/multi-word-component-names

Em quase todas aulas estou tendo problemas ao criar componentes com nomes simples como nas aulas, como por exemplo "Box", "Formulario", "Temporizador" e etc. Sempre preciso colocar nomes compostos substituindo ex.: "Box", por "Box_name", "Formulario" por "Formulario_name". Queria entender o porquê disso já que nas aulas esse problema não aparece. =) Obrigada desde já. Aguardo breve retorno.

4 respostas

Oi, Marcelly!

Essa regra evita conflitos com elementos HTML, existentes e futuros, porque todos os elementos HTML são representados sempre por uma única palavra. Isso não aconteceu durante as aulas porque essa regra foi adicionada, por padrão, depois da gravação :)

Aqui você encontra mais detalhes sobre essa regra.

Onde eu adicono essa regra?

você está usando eslint e ou prettier no projeto? caso esteja você pode mudar essas regras no arquivo de configurações do eslint

solução!

Marcelly,

Basta alterar o arquivo .eslintrc.js que fica na raiz do projeto:

Adicione essa linha:

'vue/multi-word-component-names': 0

No array rules. O arquivo final vai ficar mais ou menos assim:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 0
  },
}