安装ThreeJS后eslint-plugin-react的react/no-unknown-property规则误报求助

ESLint的react/no-unknown-property规则默认仅识别标准HTML属性和React内置属性，ThreeJS组件的专属属性不在其识别范围内，因此会触发误报。以下是比直接禁用规则更优的解决方案：

方案一：批量添加ThreeJS属性到规则忽略列表 #

在ESLint配置中，把ThreeJS组件常用的属性批量加入ignore数组，既保留规则对普通React组件的校验，又避免ThreeJS属性误报：

"react/no-unknown-property": ["error", {
  "ignore": ["geometry", "material", "position", "rotation", "scale", "color", "castShadow", "receiveShadow"]
}]

可根据自己项目中使用的ThreeJS属性，自行补充忽略列表。

方案二：使用ThreeJS专属ESLint插件 #

使用eslint-plugin-three插件，它专门适配ThreeJS的属性规则，能精准识别合法的ThreeJS组件属性：

1. 安装插件：

npm install eslint-plugin-three --save-dev

2. 修改ESLint配置文件，替换原规则：

{
  "plugins": ["three"],
  "rules": {
    "react/no-unknown-property": "off",
    "three/no-unknown-property": "error"
  }
}

这种方式无需手动维护忽略列表，插件会自动处理ThreeJS相关属性的校验。

内容的提问来源于stack exchange，提问作者Samuel Peters