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


“Parsing error: Unexpected token < …” using VueCli3 and airbnb eslint

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

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

  • Vue.js eslint解析错误。：意外令牌(与我的问题无关，但无论如何我都尝试过)

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

  • 与Webpack一起运行的VueJS的"意外令牌<"

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
"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文件：

1
2
3
4
5
6
7
8
9
10
module.exports = {
  parserOptions: {
    sourceType: 'module',
    allowImportExportEverywhere: true,
  },
  rules: {
    'no-console': 0,
  },
  plugins: ['vue'],
};

这是eslint错误的详细版本：

1
2
3
4
5
6
error: Parsing error: Unexpected token < at src/App.vue:1:1:
> 1 | <template>
    | ^
  2 |  
  3 |     <router-view/>
  4 |

这是我的App.vue源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
 
    <router-view/>
 
</template>


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


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

我不确定我缺少什么。
感谢您的时间和帮助！

相关讨论

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

这是我的.eslintrc

1
2
3
4
5
6
7
{
 "parser":"vue-eslint-parser",
 "parserOptions": {
   "ecmaVersion": 7,
   "sourceType":"module"
  }
}

vue-eslint解析器文档

相关讨论

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

我有一个类似的问题：

1
2
3
4
5
6
7
8
9
created: {
    url_parts = window.location.href.split("/")
    slug = url_parts[3]
    url = `/api/inventory/product/${slug}`

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

我收到以下错误：

1
2
3
4
5
6
7
8
9
10
11
12
13
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 =""

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

1
2
3
4
5
6
7
8
9
10
11
12
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(...)
}

我遇到了同样的问题，并通过添加.eslintrc.json文件来解决此问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
   "rules": {
       "no-console": 0,
       "quotes": [2,"double","avoid-escape"]
    },
   "parser":"vue-eslint-parser",
   "parserOptions": {
       "ecmaVersion": 7,
       "sourceType":"module",
       "ecmaFeatures": {
           "jsx": true,
           "modules": true
        }
    }
}

然后，我必须在此之后安装eslint-plugin-vue。

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

我忘了提一下，在进行了所有更改之后，我也遵循这一步骤。

希望这会很基本，但是我不知道。