vite4.x+vue3.x中使用装饰器语法,eslint校验不识别@的报错处理方法

在项目中,使用了pre-commit校验代码,eslint校验无法识别@,导致一直无法提交代码,查找了资料,eslint版本过低,不能解决现在遇到的问题

最终正确的配置方法:

在这里插入图片描述在这里插入图片描述

装饰器配置文件babel.config.js

module.exports = {
  	  plugins: [
  	    [
  	      '@babel/plugin-proposal-decorators',
  	      {
  	        legacy: true,
  	      },
  	    ],
  	    [
  	      '@babel/plugin-proposal-class-properties',
  	      {
  	        loose: true,
  	      },
  	    ],
  	  ],
};

错误的写法
在这里插入图片描述

parser: '@babel/eslint-parser',  
parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  ecmaFeatures: {
    jsx: true,
  },
},

在这里插入图片描述
出现这种问题,就是eslint配置文件没配置好

正确的写法

parserOptions: {
    parser: '@babel/eslint-parser',  
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },

package.json依赖文件

 "devDependencies": {
    "@babel/eslint-parser": "^7.22.9",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-decorators": "^7.22.7",
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.22.5",
    "@commitlint/config-conventional": "^17.4.4",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "commitlint": "^17.4.4",
    "eslint": "^8.36.0"
    }
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值