title: Vue: disable no-unused-vars error: the simplest fix
body: <p>I have a <em>very simple</em> vue project:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="text-breakdown"&gt;
          &lt;h3 class = "title"&gt;Text Breakdown&lt;/h3&gt;
  
          &lt;form onsubmit="greet()"&gt;
              &lt;textarea type="text" id = "breakdown-text"
                    placeholder="Enter your text here"&gt;
              &lt;/textarea&gt;
  
              &lt;button class = "custom-button dark-button"
                      type="submit"&gt;Breakdown&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
  
  &lt;/template&gt;
  
  
  &lt;script&gt;
      // eslint-disable-next-line no-unused-vars
  
     import axios from 'axios';
     // eslint-disable-next-line no-unused-vars
     function greet()  {
         alert("Hello!");
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>I get <code>error  'axios' is defined but never used  no-unused-vars</code> error which I'm trying to disable. I tried adding <code>// eslint-disable-next-line no-unused-vars</code> comment as I've read in some answers would help, but I still get this error!</p>
  
  <p><strong>Removing unused variables is not an option, I don't want this error popping up on unused variables!</strong></p>
  
  <p><strong>EDIT</strong>: If I put the comment exactly one line above the import:</p>
  
  <pre><code>&lt;script&gt;
      // eslint-disable-next-line no-unused-vars
     import axios from 'axios';
     // eslint-disable-next-line no-unused-vars
     function greet()  {
         alert("Hello!");
     }
  ...
  </code></pre>
  
  <p>I get this in browser console:
  <a href="https://i.stack.imgur.com/7OmIc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7OmIc.png" alt="enter image description here"></a>
  (and localhost never loads - just white screen)</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>I tried adding</p>
  
  <pre><code>"rules": {
     "no-unused-vars": "off"
   }
  </code></pre>
  
  <p>to the bottom of the <code>package.json</code> file:</p>
  
  <pre><code>...
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "parserOptions": {
        "parser": "babel-eslint"
      },
      "rules": {}
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not dead"
    ],
    "rules": {
      "no-unused-vars": "off"
    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>Replacing the <code>script</code> tag with:</p>
  
  <pre><code>&lt;script&gt;
      // eslint-disable-next-line no-unused-vars
      import axios from 'axios';
      export default {
          methods: {
              greet()  {
                  alert("Hello!");
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>works fine. However removing the comment line:</p>
  
  <pre><code>&lt;script&gt;
      import axios from 'axios';
      export default {
          methods: {
              greet()  {
                  alert("Hello!");
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Results in the original error, despite me having edited the <code>package.json</code> file. </p>
  
  <p>Also, why do I have to add the <code>export default</code> syntax when using the <code>// eslint</code> comment with the <code>import</code>, while just</p>
  
  <pre><code>&lt;script&gt;
      // eslint-disable-next-line no-unused-vars
      function greet()  {
          alert("Hello!");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>is working fine for me?</p>
  
  <p><strong>ANSWER</strong> (because mods didn't deem the solution important enough to allow edit into existing answers):</p>
  
  <p>This code should be added inside eslintConfig:</p>
  
  <pre><code>"rules": {
        "no-unused-vars": "off"
      }
  </code></pre>
  
  <p>So that the final <code>eslintConfig</code> part of the <code>package.json</code> looks like this:</p>
  
  <pre><code>  "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "parserOptions": {
        "parser": "babel-eslint"
      },
      "rules": {
        "no-unused-vars": "off"
      }
    }
  </code></pre>
  
  <p>After editing the package.json like that and restarting the server, this code doesn't result in the error:</p>
  
  <pre><code>&lt;script&gt;
      import axios from 'axios';
  
      export default  {
          methods:  {
              greet()  {
                  alert("Hello!");
              }
          }
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>As can be seen the // eslint... comment is no longer necessary.</p>