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: {
  },
};

Are you saying about eslint-plugin-vue? When I used eslint --init, it installed the vue plugin for me. I have this in my package.json file (related to ESLint): "babel-eslint": "^10.0.1", "eslint": "^5.16.0", "eslint-config-airbnb-base": "^13.1.0", "eslint-config-google": "^0.12.0", "eslint-plugin-babel": "^5.3.0", "eslint-plugin-import": "^2.17.2", "eslint-plugin-vue": "^5.2.2", — Wevelly Felipe
– Wevelly Felipe, Commented Apr 21, 2019 at 21:11

Raine Revere · Accepted Answer · 2020-11-11 17:40:29Z

7

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"
  }
}

edited Nov 11, 2020 at 17:40

Raine Revere

34.3k6 gold badges48 silver badges65 bronze badges

answered Apr 21, 2019 at 23:59

Matt Oestreich

8,6163 gold badges19 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wevelly Felipe Over a year ago

As I'm using Airbnb base, I just put "plugin:vue/recommended" and "eslint:recommended" on my .eslintrc.js and now it's working. Thank you.

Adam Over a year ago

Using a .eslintc file in my root with the above as JSON fixed my issue.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related