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

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


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.


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

Tags:

Javascript

Vue.Js

Eslint

Recent Posts