“解析错误：意外的令牌 < ...”使用 VueCli3 和 airbnb eslint

Question

我知道这似乎是一个重复的问题，在尝试以下操作后我仍然会遇到这种类型的 eslint 错误：

• https://github.com/prettier/prettier/issues/3720（我已经安装了 eslint-plugin-vue）

• Vue.js eslint Parsing error .: unexpected token（和我的问题没有太大关系，但我还是试过了）

• https://github.com/vuejs/eslint-plugin-vue/issues/186

• "Unexpected token <" for VueJS running with Webpack

这是我的 package.json 设置的一部分：

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-plugin-unit-jest": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/airbnb"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint",
      "ecmaVersion": 6
    }
  },

这是我的.eslintrc.js 文件：

module.exports = {
  parserOptions: {
    sourceType: 'module',
    allowImportExportEverywhere: true,
  },
  rules: {
    'no-console': 0,
  },
  plugins: ['vue'],
};

这里是eslint错误的详细版本：

error: Parsing error: Unexpected token < at src/App.vue:1:1:
> 1 | <template>
    | ^
  2 |   <div id="app">
  3 |     <router-view/>
  4 |   </div>

这是我的 App.vue 源代码：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'BuilderApp',
  data() {
    return {
      dragEvents: ['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'],
    };
  },
  mounted() {
    // prevent default action for all defined dragEvents
    if (this.dragAndDropCapable()) {
      this.dragEvents.forEach((dragEvent) => {
        document.getElementById('app').addEventListener(dragEvent, (e) => {
          e.preventDefault();
          e.stopPropagation();
        }, false);
      });
    }
  },
  methods: {
    dragAndDropCapable() {
      const testDiv = document.createElement('div');
      return (('draggable' in testDiv)
          || ('ondragstart' in testDiv && 'ondrop' in testDiv))
          && 'FormData' in window
          && 'FileReader' in window;
    },
  },
};
</script>

<style>
.filter-disable .filter-count {
  background: #dadada;
}
</style>

我不确定我错过了什么。

Answer 1

您错过了.eslintrc 文件中的“解析器”。

这是我的.eslintrc

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module"
  }
}

vue-eslint-parser doc

Answer 2

我遇到了同样的问题，并通过添加类似以下内容的 .eslintrc.json 文件来解决：

{
    "rules": {
        "no-console": 0,
        "quotes": [2, "double", "avoid-escape"]
    },
    "parser":"vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    }
}

然后我必须按照this 安装 eslint-plugin-vue。

我在here 和here 找到了这个解决方案。

我忘了说我也关注了这个one，在所有的变化之后。

希望这有助于非常基本，但我不知道。

Answer 3

将您的 methods: {...} 更改为 methods: function(){...}

我遇到了类似的问题：

created: {
    url_parts = window.location.href.split("/")
    slug = url_parts[3]
    url = `/api/inventory/product/${slug}`

    axios
      .get(url, slug)
      .then(...)
}

我收到以下错误：

Failed to compile.

./src/components/StoreInfo.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/alkadelik/Documents/Dev/Django/div/cart_cli/src/components/StoreInfo.vue
  30:4  error  Parsing error: Unexpected token, expected ","

  16 | 
  17 |     url_parts = window.location.href.split("/")
> 18 |     slug = url_parts[3]
     |     ^
  19 |     url = ""

当我转换为时错误消失了：

created: function(){
    const axios = require('axios'); // had to introduce this

    // also notice the introduction of 'let'
    let url_parts = window.location.href.split("/")
    let slug = url_parts[3]
    let url = `/api/inventory/product/${slug}`

    axios
      .get(url, slug)
      .then(...)
}