Resuelva el problema de que la primera línea del proyecto vue es roja (configuración ESLint) y la primera línea del archivo vue recién creado es roja

Tabla de contenido

Resumen:

Modificar la configuración de ESLint

La primera línea del archivo vue recién creado todavía está en rojo

Motivo del canje:

Solución:

---

Resumen:

El método que se encuentra en Internet se puede agregar en el archivo package.json o en el archivo .eslintrc.js.

requireConfigFile: false

Si este método no funciona para su error, pruebe el método proporcionado en este artículo. Creo que puede resolver su problema con una alta probabilidad.

Modificar la configuración de ESLint

Para pilas de tecnología como Vue 3 + TypeScript + Pinia, el siguiente es un ejemplo de configuración de ESLint más completo: (archivo .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',
    // 更多规则...
  },
};

En esta configuración, utilizamos '@vue/typescript/recommended'la extensión para dar cabida a proyectos Vue 3 y TypeScript. Además, utilizamos 'eslint:recommended'la extensión, que incluye algunas reglas básicas de ESLint.

Después de la modificación, creo que su archivo s y el App.vue original no deberían estar en rojo.

• Asegúrese de haber instalado los complementos y dependencias correspondientes. Puede ejecutar el siguiente comando para instalarlo:

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

La primera línea del archivo vue recién creado todavía está en rojo

Motivo del canje:

Esto es vue/multi-word-component-namescausado por la regla.

Según la guía de estilo de Vue, los componentes de Vue deben nombrarse siguiendo una convención de varias palabras para facilitar la lectura y la coherencia. ESLint arroja este error cuando el nombre del componente contiene solo una palabra.

Para los archivos que informan errores, como  test.vue, home.vueetc., los nombres de sus componentes se consideran palabras únicas, que no se ajustan a la convención de nomenclatura de varias palabras.

Solución:

Para solucionar este problema tienes 2 opciones:

1. Agregue palabras adicionales a los nombres de los componentes para seguir las convenciones de nomenclatura de varias palabras. Por ejemplo, puedes  test.vuecambiar a testPage.vue.

2. Modifique el archivo de configuración de ESLint para deshabilitar vue/multi-word-component-namesla regla. .eslintrc.jsAgregue la siguiente configuración en :

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

   Esto desactiva temporalmente la regla, pero se recomienda seguir la guía de estilo de Vue y utilizar nombres de componentes de varias palabras.

Elija el método apropiado para resolver este problema de acuerdo con las necesidades de su proyecto y asegúrese de que el nombre del componente cumpla con las especificaciones de la guía de estilo de Vue.