Vue：禁用no-unused-vars错误：最简单的修复

时间：2020-05-18 17:02:46

标签： javascript vue.js eslint

我有一个非常简单的 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>

我遇到error 'axios' is defined but never used no-unused-vars错误，我正在尝试将其禁用。我尝试添加// eslint-disable-next-line no-unused-vars评论，因为我已经阅读了一些答案会有所帮助，但仍然出现此错误！

删除未使用的变量不是一种选择，我不希望在未使用的变量上弹出此错误！

编辑：如果我将注释恰好放在导入上方的一行：

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

我在浏览器控制台中得到了这个： enter image description here （并且localhost从不加载-只是白屏）

编辑：

我尝试添加

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

到package.json文件底部：

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

并重新启动服务器，但是上面图片中的错误仍然存​​在-无法加载localhost。但是，如果我完全删除导入，该错误就会消失。

编辑：

将script标记替换为：

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

工作正常。但是删除注释行：

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

尽管我已经编辑了package.json文件，但仍导致原始错误。

此外，为什么在将export default与// eslint一起使用时，我不得不添加import语法，而

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

对我来说还好吗？

答案（因为国防部认为解决方案的重要性不足以允许编辑现有答案）：

此代码应添加到eslintConfig内部：

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

这样eslintConfig的最后package.json部分看起来像这样：

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

像这样编辑package.json并重新启动服务器后，此代码不会导致错误：

<script>
    import axios from 'axios';

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

</script>

可以看出//不再需要...注释。

6 个答案:

答案 0 :(得分：22)

您使用的是eslint，它将规则添加到您的代码中，no unused vars是其中之一，这意味着您不允许在代码中使用未使用的变量，因此请从import axios from'axios'导入axios变量由于您尚未使用axios变量，因此会出现错误。您可以通过以下方式忽略规则：

1。禁用一条线上的规则

您可以通过在要禁用的行上方添加// eslint-disable-next-line no-unused-vars来禁用一行附加规则，例如：

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

您将注释放在错误的行中，应该位于import axios from 'axios';上方，所以请更改

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

import axios from 'axios';

到

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

2。完全禁用项目中的规则

您也可以完全在项目上禁用规则。为此，您需要根据存储eslint配置的位置在package.json或.eslintrc.js中配置eslint规则。

如果您选择将eslint配置存储在package.json中，请添加eslintConfig键，如下所示：

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

如果您选择将eslint配置存储在.eslintrc.js中，只需添加rules键：

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

关于您的编辑，Cannot set property 'render' of undefined错误是由于未导出组件引起的，这与保留无关。更改为：

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

创建Vue组件时，应该将其导出，请在此处阅读更多信息：https://vuejs.org/v2/guide/components.html

答案 1 :(得分：9)

将此内容添加到package.json文件中，然后重新启动开发服务器，并且规则密钥不应在package.json文件中出现两次。

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

答案 2 :(得分：1)

尝试将其添加到您的eslintrc文件。您的项目中有一个吗？ 


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

答案 3 :(得分：0)

要完全禁用no-used-var，请将其添加到您的.eslintrc 

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

答案 4 :(得分：0)

.eslintrc.js

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

答案 5 :(得分：0)

由于您使用的是'plugin:vue/essential'，所以关闭规则的方法是在 eslintrc.js 中添加 'vue/no-unused-vars': "off" 而不是 'no-unused-vars': "off"

相关问题
最新问题