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

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

最终正确的配置方法:

vite4.x+vue3.x中使用装饰器语法,eslint校验不识别@的报错处理方法_第1张图片在这里插入图片描述

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

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

错误的写法
vite4.x+vue3.x中使用装饰器语法,eslint校验不识别@的报错处理方法_第2张图片

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

vite4.x+vue3.x中使用装饰器语法,eslint校验不识别@的报错处理方法_第3张图片
出现这种问题,就是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"
    }

你可能感兴趣的:(vue2/vue3,chrome,前端)