Resolva o problema de que a primeira linha do projeto vue é vermelha (configuração ESLint) e a primeira linha do arquivo vue recém-criado é vermelha

Índice

Recapitular:

Modificar configuração ESLint

A primeira linha do arquivo vue recém-criado ainda está vermelha

Motivo do resgate:

Solução:

---

Recapitular:

O método encontrado na Internet pode ser adicionado no arquivo package.json ou no arquivo .eslintrc.js

requireConfigFile: false

Se este método não funcionar para o seu erro, tente o método fornecido neste artigo, acredito que pode resolver o seu problema com alta probabilidade

Modificar configuração ESLint

Para pilhas de tecnologia como Vue 3 + TypeScript + Pinia, a seguir está um exemplo de configuração ESLint mais abrangente: (arquivo .eslintrc.js)

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/typescript/recommended',
    'eslint:recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    // 在这里可以添加自定义规则或覆盖默认规则
    'import/first': 'off',
    // 更多规则...
  },
};

Nesta configuração, usamos '@vue/typescript/recommended'a extensão para acomodar projetos Vue 3 e TypeScript. Além disso, usamos 'eslint:recommended'a extensão, que inclui algumas regras básicas do ESLint.

Após a modificação, acredito que o seu arquivo e o App.vue original não devem ficar vermelhos.

• Certifique-se de ter instalado os plug-ins e dependências correspondentes. Você pode executar o seguinte comando para instalá-lo:

  pnpm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
  

A primeira linha do arquivo vue recém-criado ainda está vermelha

Motivo do resgate:

Isso é vue/multi-word-component-namescausado pela regra.

De acordo com o guia de estilo do Vue, os componentes do Vue devem ser nomeados seguindo uma convenção de várias palavras para facilitar a leitura e consistência. ESLint lança este erro quando o nome do componente contém apenas uma palavra.

Para os arquivos que relatam erros, como  test.vue, home.vueetc., seus nomes de componentes são considerados como palavras únicas, que não estão em conformidade com a convenção de nomenclatura de múltiplas palavras.

Solução:

Para resolver este problema você tem 2 opções:

1. Adicione palavras extras aos nomes dos componentes para seguir as convenções de nomenclatura de várias palavras. Por exemplo, você pode  test.vuemudar para testPage.vue.

2. Modifique o arquivo de configuração ESLint para desabilitar vue/multi-word-component-namesa regra. .eslintrc.jsAdicione a seguinte configuração em :

   module.exports = {
     // ...
     rules: {
       // ...
       'vue/multi-word-component-names': 'off',
     },
   };
   

   Isso desativa temporariamente a regra, mas é recomendado seguir o guia de estilo Vue e usar nomes de componentes com várias palavras.

Escolha o método apropriado para resolver este problema de acordo com as necessidades do seu projeto e certifique-se de que o nome do componente esteja em conformidade com as especificações do guia de estilo Vue.