必须在 .eslintrc 的 globals 中显式声明 defineprops 等为 "readonly"，否则 eslint 因不识别 vue 3 编译宏而触发 no-undef 报错；该问题本质是作用域检查，与 volar/vetur 无关，需同步配置 globals、插件版本及 vs code 的 eslint.validate。
必须在 .eslintrc 配置中显式声明 defineProps 等为只读全局变量，否则 ESLint 会把它当未定义标识符报错；光靠插件安装或 VS Code 设置无法解决。
为什么 defineProps 会标红？
ESLint 默认不识别 Vue 3 的编译宏（defineProps、defineEmits、defineExpose、withDefaults），它们不是标准 JS 全局变量，也不是浏览器环境内置对象。一旦 ESLint 解析到这些标识符，就会触发 'defineProps' is not defined 类错误 —— 这和 Volar 是否启用、Vetur 是否禁用无关，纯属 ESLint 作用域检查行为。
常见错误现象包括：
-
defineProps下有红色波浪线，提示 “'defineProps' is not defined” -
eslint-plugin-vue规则生效了，但宏本身仍被标记为未声明 - 即使关闭所有规则，红线仍在（说明是
no-undef基础检查在起作用）
如何在 .eslintrc 中正确声明全局宏
核心是往 globals 字段里加这四个宏，并设为 "readonly"。注意：不是写在 env 里，也不是靠插件自动注入。
以 .eslintrc.cjs 为例（推荐用 .cjs 后缀避免 type: "module" 冲突）：
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended'
],
plugins: ['vue'],
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
},
rules: {
// 可选：关闭组件名大小写限制（如用 kebab-case）
'vue/multi-word-component-names': 'off'
}
}
关键点：
- 必须用
.cjs或.js（非.json），否则无法写globals动态对象 -
readonly表示只允许读取，禁止重赋值，符合 Vue 编译宏语义 - 如果项目用 TypeScript，还需确保
parser是@typescript-eslint/parser，且extends包含plugin:@typescript-eslint/recommended
VS Code 插件与设置要同步对齐
仅配置 ESLint 文件还不够，VS Code 必须把 .vue 文件交给 ESLint 正确解析：
- 确认已卸载
Vetur（它和Volar冲突，且不提供 ESLint 宏支持） - 安装官方
Volar并启用「启用(工作区)」，它负责模板类型推导，但不处理 JS/TS 块内的 ESLint 检查 - 在项目根目录的
.vscode/settings.json中加：{"eslint.validate": ["javascript", "typescript", "vue"]} - 重启 VS Code 窗口（
Cmd/Ctrl + Shift + P→Developer: Reload Window），否则旧语言服务缓存可能继续误判
若仍报错，检查是否启用了 eslint.autoFixOnSave —— 已弃用，应改用："editor.codeActionsOnSave": {"source.fixAll.eslint": true}
容易被忽略的兼容性细节
很多项目卡在「配置写了，但没生效」，往往因为：
-
package.json里有"type": "module"，导致.eslintrc.js被当成 ESM 加载失败（Node 报错Cannot use import statement outside a module），此时必须改用.eslintrc.cjs -
eslint-plugin-vue版本太低（如 v7.x），不支持vue3-recommended，需升级到 v8.5.0+ 或 v9.x - VS Code 当前打开的是文件夹外的某个 .vue 文件（比如从桌面拖进来），此时工作区设置不生效，红线是全局 ESLint 检查结果
-
defineProps出现在<script setup lang="ts"></script>里没问题，但若写在普通<script></script>块中，ESLint 不会报错，但 Vue 运行时也不认 —— 这属于语义错误，不是 ESLint 责任
真正起效的只有三件事：声明 globals、匹配插件版本、让 VS Code 把 .vue 当作可校验语言类型。少一个，红线就还在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
