Vue:禁用no-unused-vars错误:最简单的修复 [英] Vue: disable no-unused-vars error: the simplest fix
问题描述
我有一个非常简单的 vue项目:
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>
我得到了错误'axios'已定义，但从未使用过我试图禁用的no-unused-vars 错误.我尝试添加//eslint-disable-next-line no-unused-vars 注释，因为我已经阅读了一些答案会有所帮助，但是我仍然会收到此错误！
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!
删除未使用的变量不是一种选择，我不希望在未使用的变量上弹出此错误！
编辑:如果我将注释恰好放在导入上方的一行:
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: (and localhost never loads - just white screen)
编辑:
我尝试添加
"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.但是，如果我完全删除导入，该错误就会消失.
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.
编辑:
将 script 标记替换为:
<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>
尽管我已经编辑了 package.json 文件，但仍导致原始错误.
Results in the original error, despite me having edited the package.json file.
此外，当在 import 中使用//eslint 注释时，为什么我必须添加 export default 语法，而
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>
对我来说还好吗?
答案(因为mod认为解决方案不足够重要，无法编辑现有答案):
ANSWER (because mods didn't deem the solution important enough to allow edit into existing answers):
此代码应添加到eslintConfig内部:
This code should be added inside eslintConfig:
"rules": {
"no-unused-vars": "off"
}
这样， package.json 的最后 eslintConfig 部分看起来像这样:
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"
}
}
像这样编辑package.json并重新启动服务器后，此代码不会导致错误:
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.
推荐答案
您正在使用eslint，这会将规则添加到您的代码中，没有未使用的vars 是其中之一，这意味着您不是允许在代码中使用未使用的变量，因此从导入axios变量从'axios'导入axios会给您错误，因为您尚未使用 axios 变量.您可以通过以下方式忽略规则:
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:
您可以通过在要禁用的行上方添加//eslint-disable-next-line no-unused-vars 来禁用一行eslint规则，例如:
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';
您将注释放在错误的行中，应该位于从'axios'导入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';
到
// eslint-disable-next-line no-unused-vars
import axios from 'axios';
2.完全在您的项目中禁用规则
您还可以完全在项目上禁用规则.为此，您需要在 package.json 或 .eslintrc.js 中配置eslint规则，具体取决于您存储eslint配置的位置.
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.
{
"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 键:
If you choose to store eslint config in .eslintrc.js, simply add 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
关于您的编辑，无法设置属性'render'的未定义错误是由于未导出组件引起的，这与保留无关.更改为:
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>
创建Vue组件时，应该导出它们，请在此处阅读更多信息: https://vuejs.org/v2/guide/components.html
When you are creating a Vue component, you are supposed to export them, read more here: https://vuejs.org/v2/guide/components.html
这篇关于Vue:禁用no-unused-vars错误:最简单的修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
