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

news2025/10/30 7:05:04

在项目中，使用了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"
    }