web-dev-qa-db-ja.com

Vue：no-unused-varsエラーを無効にする：最も簡単な修正

非常にシンプルです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コメントを追加しようとしましたが、それでもこのエラーが発生します！

未使用の変数を削除することはオプションではありません。このエラーが未使用の変数でポップアップするのは望ましくありません！

[〜＃〜] edit [〜＃〜]：インポートの1行上にコメントを入力した場合：

<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コメントをimportと共に使用するときに// eslint構文を追加する必要があるのはなぜですか。

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

私にとってうまくいきますか？

[〜＃〜] answer [〜＃〜]（modは既存の回答を編集できるほど重要なソリューションとは考えていなかったため）：

このコードはeslintConfig内に追加する必要があります。

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

したがって、package.jsonの最後のeslintConfig部分は次のようになります。

  "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 ...コメントは不要になりました。

javascriptvue.jseslint
2
parsecer

// eslint-disable-next-line no-unused-varsはimport axiosの真上にあるはずなので、変更します

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

import axios from 'axios';

に

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

または、プロジェクトでルール全体を無効にする場合は、package.jsonまたは.eslintrc.jsファイルでeslintルールを構成する必要があります。

package.jsonの場合、次のようにeslintConfigオブジェクトを追加します。

{
    "name": "your-app-name",
    "dependencies": { ... },
    "devDependencies": { ... },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": { // rules configuration here
            "no-unused-vars": "off" 
        }
    }
}

または.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>

詳細説明：

コードにルールを追加するeslintを使用しています。no unused varsはその1つです。つまり、コードに未使用の変数を含めることはできないため、import axios from'axios'からaxios変数をインポートするとエラーが発生しますaxios変数をまだ使用していないためです。そして、基本的に// eslint-disable-next-line no-unused-varsを追加すると、コメント行の次の行のno unused varルールを無視するようにeslintに指示します。 export defaultはこれとは関係ありません。Vueコンポーネントを作成する場合、それらをエクスポートすることになっています。詳しくはこちらをご覧ください https：// vuejs。 org/v2/guide/components.html

5
Owl

これをpackage.jsonファイルに追加して、開発サーバーを再起動します。package.jsonファイルでルールキーを2回にしないでください。

"rules": {
   "no-unused-vars": "off"
 }
3
Nainish Modi

これをeslintrcファイルに追加してみてください。プロジェクトに1つありますか？


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