工程化:vite4+vue3里面的eslint验证jsx报错 ‘Unexpected token ＜‘处理方案

已于 2023-04-24 09:23:03 修改
阅读量1.1k 收藏
点赞数
分类专栏： 移动端vant组件的深入研究 文章标签： vue.js javascript 前端
于 2023-04-24 09:20:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/130335204
版权
在使用Vite4和Vue3进行jsx开发时，遇到eslint在commit时提示'Unexpected token ＜'的错误。解决方法是更新eslint至最新版本8.36.0，并在eslint配置文件中启用jsx支持：ecmaFeatures: { jsx: true }。应用更改后，提交代码时eslint将不再报错。
摘要由CSDN通过智能技术生成

使用了husky,在commit的时候会对code进行eslint，在使用jsx开发的时候，是可以正常显示的，页面不会报错，但是在提交代码的时候一直通不过eslint。

报错就是下面的,提示文件是jsx文件里面的

...Unexpected token < ...

解决方案:

  1. eslint 版本 :“eslint”: “^8.36.0”,
module.exports = {
   
  env: {
   
    node
了解本专栏 订阅专栏 解锁全文 超级会员免费看
风清云淡_A
关注
专栏目录
订阅专栏
vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint
2401_84446882的博客
04-29 1137
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint(1)
2401_84446882的博客
04-29 500
在项目根目录创建文件 .prettierrc.cjs。2、安装“Prettier ESLint”插件。1、安装“ESLint”插件。
JSX提示Parsing error: Unexpected token ＜eslint | Parse errors in imported module ‘./Demo9‘: Unexpected
eadela的博客
08-31 3001
jsx在vue中配置出现问题
vue3中.vue文件使用jsx语法报错
qq_33852698的博客
03-18 1208
最后问题完美解决，总结就是：这个年代还是要与时俱进，学会和。沟通能够加快自己的检索速度，与君共勉！到了这里，猜测是因为报错的地方使用了。的项目可能不支持该语法，通过询问。
[plugin:vite:vue] [vue/compiler-sfc] Unexpected keyword ‘this‘.
前端泡面人
09-02 229
钩子函数是个()而非:，低级错误，引以为戒！
jsx文件eslint报错 Parsing error: Unexpected token ＜ eslint
小绵杨
01-05 5139
最近在使用react native开发app的发现一个问题：报错详情：可以看到，这是jsx的正确写法，并没有语法错误，但是eslint还是报错，大致意思就是意外的符号，可以大概推断是eslint没有正确解析jsx语法造成的，虽然程序可以正常运行，但是对于强迫症来说，确实受不了。
Vue3 Uncaught SyntaxError: Unexpected token ＜‘ 错误参考解决方法
shi15926lei的博客
05-23 1310
1.检查引用的 JavaScript 文件是否正确：确认所有引用的外部 JavaScript 文件路径是否正确，可以在静态资源的路径前加上<%= BASE_URL %>，例如<script type="text/javascript" src="<%= BASE_URL %>jquery.min.js"></script>。2.检查 JavaScript 文件的内容：打开引用的 JavaScript 文件，确保文件内容是有效的 JavaScript 代码，没有错误或意外的 < 字符。
【vue3常见报错3】yntaxError: Unexpected token ‘＜‘
朱远辉的博客
05-19 1571
【vue3常见报错3】yntaxError: Unexpected token '
vue3使用tsx/jsx时报错：JSX 元素隐式具有类型 “any“，因为不存在接口 “JSX.IntrinsicElements“。
qq_38909255的博客
05-06 1450
在项目中安装：npm install @types/react。
vite2_vue3_typescript_eslint_prettier:vite2 + vue3 + typescript + eslint +漂亮
05-04
Vue 3 +打字稿+ Vite2 + ESLint +漂亮 vite2 vue3 ts配置的基础项目 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental....
vite+vue3配置eslint+prettier+ts
xiaodingdang222的博客
10-09 1705
eslint+ts+vite+prettier
Vue3配置路由ERROR in [eslint]报错问题
weixin_44161385的博客
12-23 1153
解决因eslint导致的报错问题
vue页面刷新显示空白 后台显示打包后的js 文件报错Unexpected token
weixin_45748897的博客
01-15 439
这里是打包文件路径的问题，修改webpack.config.js 里面的 publicPath为绝对路径 比如 ‘/’
Unexpected token ...——vscode中vue项目eslint报扩展运算符错误
sinat_36319434的博客
04-25 1667
在vscode中编写好vue-cli创建的项目时出现了eslint错误，显示位置在扩展运算符上。 在网上搜了很多解决办法都没有成功，虽然不影响编译结果，但是看着很难受。解决办法就是在.eslintrc.js文件中加入代码 parserOptions: { ecmaVersion: 2018 } 该文件在项目根目录下，如果没有新建一个，具体配置可以网上搜下。 ...
vue3项目中Uncaught SyntaxError: Unexpected token ‘＜‘ 错误参考解决方法
weixin_59587584的博客
10-28 4041
‘Uncaught SyntaxError: Unexpected token '
eslint 验证vue文件 报错 unexpected token =解决方法
weixin_30553837的博客
09-10 2649
解决方案：.eslintrc更改文件配置 { "extends": [ 'standard' ], "parserOptions": { "parser": "babel-eslint" }, "parser": "vue-eslint-parser", "rule...
vite打包报错：Unexpected token ‘??=‘
weixin_47168119的博客
04-24 3428
解决vite打包报错 SyntaxError: Unexpected token '??='
vue eslint报错Unexpected token import解决
曈欣的博客
11-18 907
遇到这个问题的时候，我对 eslint 还没有进行详细了解，这里就先不分析解决思路了，就先把我的配置代码放到这里，先记录一下。我这个配置是结合了 vue-cli 自动生成eslint 配置文件的基础上进行修改的。我是用vue-cli 搭建的 vue3 项目，初始化的时候就已经安装了babel-eslint。可以在 node-modules里面确认下是否安装了babel-eslint。2.修改 eslint 的配置文件.eslintrc.js。
yarn create vite的时候,报错:SyntaxError: Unexpected token ‘.‘ at Loader.moduleStrategy (internal/modules/
李十三的博客
06-01 6799
正在上传…重新上传取消原因:如果和我一样的话那就是node的版本问题,由于我的工作中项目是需要node.js版本等级不能太高,而在使用yarn创建vite的项目时,node.js的版本又不能太低.最终我找到了一个最合适的版本.(不高不低刚刚好): V16.15.1. 如果你所有的版本都试过了,但是找不到正好适应两者的版本,那么可以用以下方法来回切换,只需要在下载Node版本之前不删除之前的版本即可.以下我给出了下载与切换node版本的方法.解决:更换node.js版本。
vite打包过程报错 error during build: [vite:vue-jsx] unknown: Unexpected token, expected "," (8:83)
最新发布
09-12
这个错误通常是由于在使用Vite构建Vue项目时，遇到的JavaScript语法错误，具体来说是未知的token，即遇到了不是预期的标点符号。在你提供的错误信息中，具体是遇到了一个逗号（`,`）的预期错误。这可能是因为代码中的JavaScript或JSX语法写法不正确。 在JSX中，通常这样的错误会是因为JSX的语法不符合标准的JavaScript语法规则。比如，如果你在JSX的组件中直接使用了JavaScript的语法，但是没有正确地使用JSX的语法进行包裹，就可能会产生这样的错误。在JSX中，所有JSX元素都必须有一个根元素，而不能直接返回多个并列的元素，除非它们被一个外层的`<div>`或自定义组件等容器所包裹。 举个例子，如果你有类似下面的代码： ```jsx return <Component prop="value" anotherProp={anotherValue} /> { someCondition && <AnotherComponent /> } ``` 上面的代码会报错，因为`<AnotherComponent />`没有被一个根JSX元素所包裹。正确的写法应该是： ```jsx return ( <> <Component prop="value" anotherProp={anotherValue} /> {someCondition && <AnotherComponent />} </> ) ``` 如果你正在使用Vue 3的Composition API配合JSX，确保你的`<script setup>`中正确地使用了JSX语法。另外，检查你的Babel配置，确保它支持`.jsx`文件的转换。 要解决这个问题，你需要： 1. 检查报错位置附近的代码，特别是JSX的使用部分。 2. 确保所有JSX元素都有正确的闭合标签。 3. 确认是否有语法错误，比如缺失的括号、引号、逗号等。 4. 如果你使用了特殊的语法或插件，请确保它们与Vite兼容，并且已经正确安装和配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值