Why I'm getting "Parsing error: Unexpected token <" from ESLint in Vue components?

Question

I created a Laravel project and installed VSCode and all those necessary extensions. One of these is ESLint and it's working fine with JS file, but when I open a Vue component like (resources/js/component/ExampleComponent.vue), I get this error from ESLint:

"Parsing error: Unexpected token < eslint [1, 1]"

My .eslintrc.jsfile was generated using ./node_modules/.bin/eslint --init and answering the questions.

I already googled and found this solution:

npm install babel-eslint --save-dev

and add this to .eslintrc.js:

parser: "babel-eslint"

but it doesn't work anyway, the error stay there.

Here is my ExampleComponent.vue (unmodified from Laravel):

<template> (ESLint error here: "Parsing error: Unexpected token < eslint [1,1]")
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        Example Component
                    </div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Here is my .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb-base',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    parser: "babel-eslint",
  },
  plugins: [
    'vue',
  ],
  rules: {
  },
};

Answer 1

I believe you need the plugin eslint-plugin-vue, and to set your .eslintrc.js configuration to one of the bundle configurations:

• "extends": ["plugin:vue/base"]
• "extends": ["plugin:vue/essential"]
• "extends": ["plugin:vue/strongly-recommended"]
• "extends": ["plugin:vue/recommended"]

You can read more about eslint-plugin-vue here - here is a reference for a similar issue you are having.

Hope this helps!

EDIT: this is an eslint config from a vue cli project:

module.exports = {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "rules": {},
  "parserOptions": {
    "parser": "babel-eslint"
  }
}