Почему я получаю сообщение "Ошибка синтаксического анализа: неожиданный токен <" от ESLint в компонентах Vue?

Question

Я создал проект Laravel и установил VSCode и все необходимые расширения.Одним из них является ESLint, и он отлично работает с файлом JS, но когда я открываю компонент Vue, такой как (resources / js / component / ExampleComponent.vue), я получаю эту ошибку из ESLint:

"Ошибка синтаксического анализа:Неожиданный токен

Мой .eslintrc.js файл был создан с использованием ./node_modules/.bin/eslint --init и ответов на вопросы.

Я уже погуглил и нашел это решение:

npm install babel-eslint --save-dev

и добавьте это к .eslintrc.js:

parser: "babel-eslint"

, но это все равно не работает, ошибка остается.

Вот мой ExampleComponent.vue (без изменений от 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>

Вот мой .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

Я полагаю, что вам нужен плагин eslint-plugin-vue, и для настройки .eslintrc.js на одну из следующих настроек, чтобы это работало.

• "extends": ["plugin:vue/recommended"]
• "extends": ["plugin:vue/base"]

Вы можете прочитать подробнее о eslint-plugin-vue здесь - здесь есть ссылка для аналогичногопроблема, с которой вы столкнулись.

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ: это eslint конфигурация из проекта vue cli (появляетсяВы также можете использовать ["plugin:vue/essential"])

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