CODEWITHSUNDEEP
javascriptnuxt.jseslint
Mitya
Mitya

Reputation: 34556

Issue with ESLint in Nuxt

I'm learning Nuxt. I've set up a project, with ESLint included. Here's my index.vue:

<template>
    <h1 class=reddo>Hello, world</h1>
</template>

<script>
  export default {
    head() {
      // Set Meta Tags for this Page
    }
    // ...
  }
</script>

<style>
  .reddo {
    color: red;
  }
</style>

When I run this I get this:

enter image description here

(It doesn't say this is from ESLint, but I assume it is). The first error complains about the indentation before the <h1>. Do I need to do something to make it understand .vue files so it validates only the <script> part or something?

Thank you in advance.

Upvotes: 0

Views: 3843

Answers (1)

evelynhathaway
evelynhathaway

Reputation: 1887

Since you followed the Nuxt intro video, you likely have a .eslintrc.js file in your project folder that extends a config from @nuxt/eslint-config that adds this parser and some default rules (source code).

The default configuration is linting the entire .vue file, as the Vue parser understands them. There are some limitations to the parser as well which may be triggering your linter if there were any changes not from the Nuxt config.

You can change or disable this configuration by editing your .eslintrc.js file; however, there are many advantages to statically analyzing your code using a linter. So consider finding or making a config that has few stylistic rules (or ones that you like) so you can still catch possible errors, including ones specific to Vue.

If you want to revert to a working .eslintrc.js file, try copying the changes from a new create-nuxt-app.

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

Upvotes: 2

Related Questions