admin管理员组文章数量:1327660
I have set up eslint-webpack-plugin with @babel/eslint-parser and eslint-plugin-vue on my webpack and vue project, but when I try to check the vue files it throws the following error:
Error in phone-link.vue
1:0 error Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (1:0)
Am I missing something in my setup as it works on none vue files?
Packages:
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.16.0",
"eslint": "^8.2.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-vue": "^8.0.3",
"eslint-webpack-plugin": "^3.1.0",
Webpack config
const ESLintPlugin = require('eslint-webpack-plugin');
plugins: [
new ESLintPlugin({
extensions: ['vue', 'js'],
})
],
eslintrc
"extends": [
"eslint:remended",
"airbnb-base",
"plugin:vue/remended"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
},
Example vue file
<template>
<a :href="phoneLinkNumber" class="">{{ phoneLinkText }}</a>
</template>
<script>
import SiteConstants from '../Constants/site-constants.js';
export default {
name: 'phone-link',
props: {
phoneLinkText: {
default: SiteConstants.PhoneNumber,
},
},
data() {
return {
phoneLinkNumber: `tel:${SiteConstants.PhoneNumber.replace(/\s/g, "")}`,
}
},
}
</script>
I have set up eslint-webpack-plugin with @babel/eslint-parser and eslint-plugin-vue on my webpack and vue project, but when I try to check the vue files it throws the following error:
Error in phone-link.vue
1:0 error Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (1:0)
Am I missing something in my setup as it works on none vue files?
Packages:
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.16.0",
"eslint": "^8.2.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-vue": "^8.0.3",
"eslint-webpack-plugin": "^3.1.0",
Webpack config
const ESLintPlugin = require('eslint-webpack-plugin');
plugins: [
new ESLintPlugin({
extensions: ['vue', 'js'],
})
],
eslintrc
"extends": [
"eslint:remended",
"airbnb-base",
"plugin:vue/remended"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
},
Example vue file
<template>
<a :href="phoneLinkNumber" class="">{{ phoneLinkText }}</a>
</template>
<script>
import SiteConstants from '../Constants/site-constants.js';
export default {
name: 'phone-link',
props: {
phoneLinkText: {
default: SiteConstants.PhoneNumber,
},
},
data() {
return {
phoneLinkNumber: `tel:${SiteConstants.PhoneNumber.replace(/\s/g, "")}`,
}
},
}
</script>
Share
Improve this question
asked Nov 9, 2021 at 12:11
PetePete
58.5k29 gold badges130 silver badges184 bronze badges
1 Answer
Reset to default 8In the end I changed the babel parser for vue-eslint-parser
:
"parser": "vue-eslint-parser",
本文标签: javascriptbabeleslintparser throwing error on vue filesStack Overflow
版权声明:本文标题:javascript - @babeleslint-parser throwing error on vue files - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742227607a2436615.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论