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

Question

我有一个非常简单的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!");
   }
...

我在浏览器控制台中得到了这个： （并且本地主机永远不会加载 - 只是白屏）

编辑：

我尝试添加

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

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

编辑：

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

对我来说工作正常吗？

ANSWER（因为mods认为解决方案不够重要以允许编辑现有答案）：

此代码应添加到 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>

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

Answer 1

您正在使用 eslint，它向您的代码添加规则，no unused vars就是其中之一，这意味着您的代码中不允许有未使用的变量，因此导入 axios 变量 fromimport axios from'axios'会给您错误，因为您还没有使用axios变量。您可以通过以下方式忽略规则：

1. 禁用线路上的规则

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

// 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密钥：

{
    "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 可用规则的​​更多信息：https ://eslint.org/docs/rules/
• 阅读有关 ESLint 规则配置的更多信息：https ://eslint.org/docs/user-guide/configuring#configuring-rules

关于你的编辑，Cannot set property 'render' of undefined错误是由于组件没有被导出，这与eslint无关。改成：

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

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

Answer 2

如果您只忽略特定的未使用变量，那将是一个相当好的主意。例如。比方说，忽略所有以 _ 为前缀的变量

以下是您可以如何做到这一点。

rules: {
  'no-unused-vars': ['warn', {
    argsIgnorePattern: '^_',
    varsIgnorePattern: '^_'
  }]
}

现在，任何未使用的变量（即_options）或参数都不会产生任何问题。

Answer 3

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

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

Answer 4

如果您只编写 JavaScript 代码，请执行以下操作：

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

但如果你使用 TypeScript。您必须添加更多内容：

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

  }