'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: (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.

javascript eslint

Solution 1:^[1]

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

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

Read more about ESLint available rules: https://eslint.org/docs/rules/
Read more about ESLint Rules Configuration: https://eslint.org/docs/user-guide/configuring#configuring-rules

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://vuejs.org/v2/guide/components.html

Solution 2:^[2]

Add this in package.json file and restart your dev server and rules key should not be twice in the package.json file.

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

Solution 3:^[3]

That would be a rather good idea if you ignore just specific unused variables. For example. let's say, ignore all the variables prefixed by _

Here is how you can do it.

rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  'no-unused-vars': ['warn', {
    argsIgnorePattern: '^_',
    varsIgnorePattern: '^_'
  }]
}

Now, any variable (i.e _options) or argument unused, will not create any issue.

Solution 4:^[4]

If you code just javaScript, do as follows:

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

But if you use TypeScript. You must add something more.

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

  }

Solution 5:^[5]

Try adding this your eslintrc file. Do you have have one in your project?


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

Solution 6:^[6]

To completely disable the no-used-vars, add this into your .eslintrc

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

Solution 7:^[7]

I was getting the similar problems and tried many of the above suggestions using the the suggestions. My project is using the following:

"dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  }, 
   "devDependency:{ "axios": "^0.18.0", ...}

I tried putting the code below in my package.json file:

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

That did not seem to help so in the file where I imported and utilizes axios I added:

<script>
// eslint-disable-next-line no-unused-vars
import axios from 'axios';
...

This seemed to help the issue of error 'axios' is defined but never used no-unused-vars but I was seeing another issue:

WARNING  Compiled with 1 warning                                                                                                                              
warning  in ./src/plugins/axios.js

export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, . . .

At this point, I tried commenting out the plugin import in main.js file and everything worked fine--the last error was eliminated:

//import "./plugins/axios";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

Now everything works fine. Even if I remove all the other modifications I had made to the other files. Hope this helps someone.

Solution 8:^[8]

.eslintrc.js

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

Solution 9:^[9]

Since you are using 'plugin:vue/essential', so the way to turn off the rule is by adding 'vue/no-unused-vars': "off" instead of 'no-unused-vars': "off" to eslintrc.js

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3
Solution 4	ouflak
Solution 5	Dipyamanbiswas
Solution 6	Loebre
Solution 7
Solution 8	sparkle
Solution 9	Nan

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

Solution 1:[1]

1. Disabling a rule on a line

2. Disabling a rule entirely on your project

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

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

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]