Search code examples
javascripteslint

Vue: disable no-unused-vars error: the simplest fix

I have a very simple vue project:

<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>

I get error 'axios' is defined but never used no-unused-vars error which I'm trying to disable. I tried adding // eslint-disable-next-line no-unused-vars comment as I've read in some answers would help, but I still get this error!

Removing unused variables is not an option, I don't want this error popping up on unused variables!

EDIT: If I put the comment exactly one line above the import:

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

I get this in browser console: enter image description here (and localhost never loads - just white screen)

EDIT:

I tried adding

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

to the bottom of the package.json file:

...
  "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"
  }
}

and restarting the server, however the error from the pic above is still present - localhost can't be loaded. The error disappears though if I remove the import altogether.

EDIT:

Replacing the script tag with:

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

works fine. However removing the comment line:

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

Results in the original error, despite me having edited the package.json file.

Also, why do I have to add the export default syntax when using the // eslint comment with the import, while just

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

is working fine for me?

ANSWER (because mods didn't deem the solution important enough to allow edit into existing answers):

This code should be added inside eslintConfig:

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

So that the final eslintConfig part of the package.json looks like this:

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

After editing the package.json like that and restarting the server, this code doesn't result in the error:

<script>
    import axios from 'axios';

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

</script>

As can be seen the // eslint... comment is no longer necessary.

Solution

  • You are using eslint, which add rules to your code, no unused vars is one of them, which means you aren't allowed to have unused variable in your code, so importing axios variable from import axios from'axios' gives you error because you are not using axios variable yet. You can ignore rules by:

    1. Disabling a rule on a line

    You can disable a eslint rule on one line by adding // eslint-disable-next-line no-unused-vars above the line you want to disable, for example:

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

    You put your comment in the wrong line, it's supposed to be above import axios from 'axios';, so change

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

import axios from 'axios';

    to

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

    2. Disabling a rule entirely on your project

    You can also disable a rule entirely on your project. To do this you need to configure your eslint rules in package.json or .eslintrc.js depending where you store your eslint configuration.

    If you choose to store the eslint configuration in package.json, add eslintConfig key like this:

    {
    "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" 
        }
    }
}

    If you choose to store eslint config in .eslintrc.js, simply add rules key:

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

    About your edit, the Cannot set property 'render' of undefined error is caused by the component isn't being exported, this has nothing to do eslint. Change to:

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

    When you are creating a Vue component, you are supposed to export them, read more here: https://v2.vuejs.org/v2/guide/components.html