Vue: deshabilite el error no-unused-vars: la solución más simple

7 minutos de lectura

avatar de usuario de parsecer
parsear

tengo un muy simple proyecto vue:

<template>
    <div class="text-breakdown">
        <h3 class = "title">Text Breakdown</h3>

        <form onsubmit="greet()">
            <textarea type="text" id = "breakdown-text"
                  placeholder="Enter your text here">
            </textarea>

            <button class = "custom-button dark-button"
                    type="submit">Breakdown</button>
        </form>
    </div>


</template>


<script>
    // eslint-disable-next-line no-unused-vars

   import axios from 'axios';
   // eslint-disable-next-line no-unused-vars
   function greet()  {
       alert("Hello!");
   }
</script>

yo obtengo error 'axios' is defined but never used no-unused-vars error que estoy tratando de deshabilitar. Traté de agregar // eslint-disable-next-line no-unused-vars comentar como he leído en algunas respuestas ayudaría, ¡pero todavía recibo este error!

Eliminar las variables no utilizadas no es una opción, ¡no quiero que aparezca este error en las variables no utilizadas!

EDITAR: Si pongo el comentario exactamente una línea encima de la importación:

<script>
    // eslint-disable-next-line no-unused-vars
   import axios from 'axios';
   // eslint-disable-next-line no-unused-vars
   function greet()  {
       alert("Hello!");
   }
...

Me sale esto en la consola del navegador:
ingrese la descripción de la imagen aquí

(y localhost nunca se carga, solo pantalla blanca)

EDITAR:

Traté de agregar

"rules": {
   "no-unused-vars": "off"
 }

al fondo de la package.json expediente:

...
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "rules": {
    "no-unused-vars": "off"
  }
}

y reiniciando el servidor, sin embargo, el error de la imagen de arriba todavía está presente: localhost no se puede cargar. Sin embargo, el error desaparece si elimino la importación por completo.

EDITAR:

Sustitución del script etiqueta con:

<script>
    // eslint-disable-next-line no-unused-vars
    import axios from 'axios';
    export default {
        methods: {
            greet()  {
                alert("Hello!");
            }
        }
    }
</script>

funciona bien. Sin embargo, eliminando la línea de comentario:

<script>
    import axios from 'axios';
    export default {
        methods: {
            greet()  {
                alert("Hello!");
            }
        }
    }
</script>

Da como resultado el error original, a pesar de haber editado el package.json expediente.

Además, ¿por qué tengo que agregar el export default sintaxis al usar el // eslint comenta con el importmientras que solo

<script>
    // eslint-disable-next-line no-unused-vars
    function greet()  {
        alert("Hello!");
    }
</script>

me funciona bien?

RESPUESTA (porque los moderadores no consideraron la solución lo suficientemente importante como para permitir la edición en las respuestas existentes):

Este código debe agregarse dentro de eslintConfig:

"rules": {
      "no-unused-vars": "off"
    }

para que la final eslintConfig parte de package.json Se ve como esto:

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-unused-vars": "off"
    }
  }

Después de editar el paquete.json así y reiniciar el servidor, este código no genera el error:

<script>
    import axios from 'axios';

    export default  {
        methods:  {
            greet()  {
                alert("Hello!");
            }
        }
    }

</script>

Como puede verse, el comentario // eslint… ya no es necesario.

  • no es el // eslint-disable-next-line no-unused-vars tiene que estar exactamente 1 línea por encima de la import axios?

    – Búho

    18 mayo 2020 a las 17:05

  • ¿Este error se debe a ESLint o lo obtiene en el código vs debido a la extensión vetur?

    – palaѕн

    18 de mayo de 2020 a las 17:06

  • me sale este error en Module Error (from ./node_modules/eslint-loader/index.js): Lo obtengo en el navegador cuando voy a localhost

    – parsécer

    18 de mayo de 2020 a las 17:06


  • En realidad quiere excluir unused variables en eslint

    – Niklesh Raut

    18 mayo 2020 a las 17:07

  • eslint.org/docs/user-guide/…

    – Niklesh Raut

    18 de mayo de 2020 a las 17:11

Avatar de usuario de Owl
Búho

Está utilizando eslint, que agrega reglas a su código, no unused vars es uno de ellos, lo que significa que no se le permite tener una variable sin usar en su código, por lo que importar la variable axios desde import axios from'axios' te da error porque no lo estas usando axios variable todavía. Puede ignorar las reglas al:

1. Deshabilitar una regla en una línea

Puede deshabilitar una regla eslint en una línea agregando // eslint-disable-next-line no-unused-vars encima de la línea que desea deshabilitar, por ejemplo:

// eslint-disable-next-line no-unused-vars
import axios from 'axios';

Pusiste tu comentario en la línea incorrecta, se supone que debe estar arriba import axios from 'axios';así que cambia

// eslint-disable-next-line no-unused-vars

import axios from 'axios';

a

// eslint-disable-next-line no-unused-vars
import axios from 'axios';

2. Deshabilitar una regla por completo en su proyecto

También puede deshabilitar una regla por completo en su proyecto. Para hacer esto necesitas configurar tus reglas de eslint en package.json o .eslintrc.js dependiendo de dónde almacene su configuración de eslint.

Si elige almacenar la configuración de eslint en package.jsonagregar eslintConfig clave como esta:

{
    "name": "your-app-name",
    "dependencies": { ... },
    "devDependencies": { ... },
    "eslintConfig": { // Add this <-----
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": { // rules configuration here <-----
            "no-unused-vars": "off" 
        }
    }
}

Si elige almacenar la configuración de eslint en .eslintrc.jssimplemente agregue rules llave:

module.exports = {
    ...
    rules: {
        "no-unused-vars": "off"
    }
}

Acerca de su edición, el Cannot set property 'render' of undefined el error se debe a que el componente no se exporta, esto no tiene nada que ver con eslint. Cambiar a:

<script>
// eslint-disable-next-line no-unused-vars
import axios from 'axios';
export default {
   methods: {
      greet()  {
         alert("Hello!");
      }
   }
}
</script>

Cuando está creando un componente Vue, se supone que debe exportarlo, lea más aquí: https://v2.vuejs.org/v2/guide/components.html

  • No creo que esté relacionado con eslint, probablemente no esté exportando el componente correctamente.

    – Búho

    18 mayo 2020 a las 17:12


  • ¡El código de tu edición funciona! Gracias. Sin embargo, me preguntaba por qué si elimino el // eslint comentario, el error sigue presente, considerando que he cambiado package.json: agregó el rules ahí y reiniciamos el servidor

    – parsécer

    18 mayo 2020 a las 17:23

  • Es porque está usando eslint en su proyecto, que agrega reglas a su código, no unused var es uno de ellos. Lea más sobre lo que hace eslint aquí: eslint.org/docs/about si desea deshabilitar una regla en su proyecto eslint, debe colocarla en su archivo de configuración de eslint, puede ser eslintrc.js o package.json (dependiendo de lo que elija cuando esté configurando su eslint)

    – Búho

    18 mayo 2020 a las 17:27


  • he cambiado package.json sin embargo… No pareció tener ningún efecto ya que todavía me veo obligado a agregar // eslint comentarios en la parte superior de esa línea

    – parsécer

    18 de mayo de 2020 a las 17:29


  • Configuración de eslint agregada para package.json y .eslintrc.js

    – Búho

    19 mayo 2020 a las 15:05


Avatar de usuario de Nainish Modi
Modi nainés

Agregue esto en el archivo package.json y reinicie su servidor de desarrollo y la clave de reglas no debe estar dos veces en el archivo package.json.

"rules": {
   "no-unused-vars": "off"
 }

  • ¿Dónde exactamente necesito agregarlo? Hay una lista de objetos JSON allí, ¿en qué objeto debo ponerlo?

    – parsécer

    18 de mayo de 2020 a las 17:11

  • @parsecer: debe tener el archivo de configuración enemigo eslint

    – Niklesh Raut

    18 mayo 2020 a las 17:12

  • Ahora lo entiendo aún menos. Yo tengo package.json. Agregué tu código al final de la lista. ¿Necesito editar algunos? foe eslint archivo también?

    – parsécer

    18 de mayo de 2020 a las 17:18

  • rules(“reglas”: {}) la clave json no debe estar dos veces en el paquete, archivo json.

    – Nainish Modi

    19 de mayo de 2020 a las 9:25

Avatar de usuario de Kiran Maniya
Kiran maniya

Esa sería una idea bastante buena si ignora solo variables específicas no utilizadas. Por ejemplo. digamos, ignore todas las variables precedidas por _

Aquí sabrás como podrás hacerlo.

rules: {
  'no-unused-vars': ['warn', {
    argsIgnorePattern: '^_',
    varsIgnorePattern: '^_'
  }]
}

Ahora, cualquier variable (es decir, _options) o argumento no utilizado, no creará ningún problema.

  • ¡Gracias! me salvó de “La configuración de la regla “no-unused-vars” no es válida”

    – tim

    28 de febrero de 2022 a las 11:20

  • Gracias, funciona como un encanto!

    – Viviana

    1 hora antes

avatar de usuario de xia2
xia2

Si codifica solo JavaScript, haga lo siguiente:

rules: {
    "no-unused-vars": "off",
  },

Pero si usa TypeScript. Debes agregar algo más.

rules: {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",

  }

Intente agregar este archivo a su eslintrc. ¿Tienes uno en tu proyecto?


"rules": {
   "no-unused-vars": "off"
 }


Avatar de usuario de Loebre
Loebre

Para deshabilitar completamente las variables no utilizadas, agregue esto a su .eslintrc

    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",

Avatar de usuario de Nan
Yaya

Dado que está utilizando ‘plugin:vue/essential’, la forma de desactivar la regla es agregando 'vue/no-unused-vars': "off" en lugar de 'no-unused-vars': "off" a eslintrc.js

¿Ha sido útil esta solución?