526互联

Vue3+ setup语法中报错 'defineProps' is not defined（eslint[no-undef]）

发布时间 2023-08-03 10:49:41作者: 青柠i

1. 问题

1.1 场景

使用Vue3 + setup语法，使用defineProps时出现Eslint错误：

1.2 环境及配置

1.2.1 当前项目环境：

"vue": "^3.2.13"

@vue/cli 5.0.8

1.2.2 eslint配置：

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

2. 解决

defineProps 属于 Vue3 的规则校验，需要在 eslint-plugin-vue官方指南中寻找对应配置。通过查阅文档发现：

编译器宏，例如defineProps 和 defineEmits 会生成 no-undef没有声明问题。

需要使用vue-eslint-parserV9.0.0或最新版本。

以前您必须使用vue/setup-compiler-macros，现在不再需要了。

2.1 方法1

  1. 下载vue-eslint-parser

    npm install --save-dev vue-eslint-parser

  2. 配置

    // .eslintrc.js
{
    // 增加下列行
    "parser": "vue-eslint-parser"
}

2.2 方法2

就是文档中说的配置vue/setup-compiler-macros环境

// .eslintrc.js
{
    env: {
        node: true,
        // 添加该行
        "vue/setup-compiler-macros": true,
      },
}