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

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>

我工作得好吗？

回答 (因为模组认为解决方案不够重要，无法编辑现有答案):

这段代码应该添加到 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是其中之一，这意味着您的代码中不允许有未使用的变量，因此从 import axios from'axios' 导入 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. 在您的项目中完全禁用规则
您还可以完全禁用项目上的规则。为此，您需要在 package.json 中配置您的 eslint 规则。或 .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 key :

module.exports = {
    ...
    rules: {
        "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 无关。改成:

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

当你创建一个 Vue 组件时，你应该导出它们，在这里阅读更多: https://v2.vuejs.org/v2/guide/components.html