针对前端框架的VSCode专属纠错规则设置-VSCode-PHP中文网

vue 3 中 defineprops 类型报错不修复的根本原因是 eslint 未将 .vue 文件识别为 typescript 文件，需确保：1. overrides 明确覆盖 "*.vue"；2. parser 设为 "@typescript-eslint/parser"；3. 配置 parseroptions.extrafileextensions: [".vue"]。

针对前端框架的vscode专属纠错规则设置

Vue 3 项目里 `defineProps` 类型报错却不修复

常见错误现象是 TS 类型提示显示 defineProps 参数“类型不匹配”或“无法推断”，但保存后没自动修复，甚至 ESLint 根本不报 vue/require-default-prop 这类规则。根本原因不是插件没装，而是 ESLint 没把 .vue 文件当 TypeScript 处理。

必须确保以下三点同时成立：

.eslintrc.cjs 中 overrides 明确覆盖 "*.vue"，且 parser 设为 "@typescript-eslint/parser"
已安装 @typescript-eslint/parser 和 eslint-plugin-vue（Vue 3 必须用 v9+）
parserOptions.parser 不能写成 "@typescript-eslint/eslint-parser"（已废弃），也不能漏掉 parserOptions.extraFileExtensions: [".vue"]

示例关键片段：

overrides: [
  {
    files: ["*.vue"],
    parser: "@typescript-eslint/parser",
    parserOptions: { extraFileExtensions: [".vue"] },
    plugins: ["vue"],
    extends: ["plugin:vue/vue3-essential"]
  }
]

React 项目中 `useState` 类型推导失效、`exhaustive-deps` 不触发

典型表现：TS 提示 useState 返回值为 any，或者 useEffect 依赖数组变更时，react-hooks/exhaustive-deps 规则完全不报错。这不是 React 版本问题，而是 ESLint 没加载对解析器或插件。

检查以下配置是否完整：

extends 必须包含 "plugin:react/recommended" 和 "plugin:react-hooks/recommended"
plugins 数组要显式写 ["react", "react-hooks"]，不能只靠 extends 继承
settings.react.version 必须设为 "detect" 或明确版本如 "18.2.0"，否则插件跳过 hook 规则校验
若用 TypeScript，parser 同样要设为 "@typescript-eslint/parser"，且 @typescript-eslint/eslint-plugin 已安装

`eslint-plugin-vue` 和 `eslint-plugin-react` 能否共存

可以共存，但必须隔离作用域。很多项目是微前端或混合技术栈（比如主应用 Vue、子应用 React），此时若不隔离，ESLint 会尝试用 Vue 规则检查 .tsx，或用 React 插件解析 .vue，结果就是大量误报和规则静默失效。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

正确做法是用 overrides 按文件后缀分流：

对 "*.vue" 只启用 vue 插件和 vue3-essential 规则集
对 "*.tsx" 或 "*.jsx" 只启用 react 和 react-hooks 插件
避免在根级 plugins 里全局写 ["vue", "react"]——这会让所有文件都过两套规则

另外注意：eslint-plugin-vue@9 默认不处理 .jsx，eslint-plugin-react 默认忽略 .vue，所以分流后不会互相干扰。

为什么 `vue/multi-word-component-names` 总是不报错

这个规则默认禁用，且不参与 --fix 自动修复流程。它只在你手动触发「快速修复」（Ctrl+.）时给出建议名，不会像 semi 那样静默插入分号。

启用它需两个条件缺一不可：

extends 包含 "plugin:vue/vue3-strongly-recommended"（vue3-essential 里不包含它）
组件名必须出现在 <template></template> 中的自定义标签位置，比如 <my-button></my-button>；写在 JS 变量里或字符串中不会触发

最容易被忽略的一点：该规则只检查模板中的**使用处**，不检查 defineComponent 的 name 选项——那是 vue/require-name-property 管的。