laravel - 为什么我在 Vue 组件中从 ESLint 得到 "Parsing error: Unexpected token <"？

Question

我创建了一个 Laravel 项目并安装了 VSCode 和所有必要的扩展。其中之一是 ESLint，它可以与 JS 文件一起正常工作，但是当我打开像 (resources/js/component/ExampleComponent.vue) 这样的 Vue 组件时，我从 ESLint 收到此错误:

“解析错误:意外标记 < eslint [1, 1]”

我的 .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配置到 bundle configurations 之一:

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

"extends": ["plugin:vue/essential"]

"extends": ["plugin:vue/strongly-recommended"]

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

您可以阅读 more about eslint-plugin-vue here - here is a reference对于您遇到的类似问题。
希望这可以帮助!
编辑:这是一个 eslint来自 vue cli 的配置项目:

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