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

JavascriptEslint

Javascript Problem Overview

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.

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

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

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

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

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


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

Solution 6 - Javascript

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

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

Solution 7 - Javascript

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

.eslintrc.js

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

Solution 9 - Javascript

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

Categories
Recommended Javascript Solutions
Recommended Eslint Solutions

Previous Solution:

C# Convert ReadOnlyMemory<byte> to byte[]

C#Rabbitmq

Next Solution:

Make Visual Studio use VS code shortcut keys / key bindings

Visual StudioVisual Studio-CodeSettingsKeyboard ShortcutsKey Bindings

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionparsecerView Question on Stackoverflow
Solution 1 - JavascriptOwlView Answer on Stackoverflow
Solution 2 - JavascriptNainish ModiView Answer on Stackoverflow
Solution 3 - JavascriptKiran ManiyaView Answer on Stackoverflow
Solution 4 - Javascriptxia2View Answer on Stackoverflow
Solution 5 - JavascriptDipyamanbiswasView Answer on Stackoverflow
Solution 6 - JavascriptLoebreView Answer on Stackoverflow
Solution 7 - JavascriptMakaturuView Answer on Stackoverflow
Solution 8 - JavascriptsparkleView Answer on Stackoverflow
Solution 9 - JavascriptNanView Answer on Stackoverflow