npm运行React报大小写敏感、Hooks规则报错如何禁用校验

不需要安装任何依赖来禁用这类校验，你对报错原因的判断有误，这个问题和文件名/组件名大小写敏感无关，是代码本身违反了React Hook的强制使用规则。
其他电脑能正常运行只是因为对应环境的ESLint规则未生效、版本不匹配导致的漏报，不是当前环境的校验出错。

react-hooks/rules-of-hooks规则对可调用Hook的位置有明确判定标准：

• 仅允许在名称首字母大写的React函数组件顶层调用Hook
• 仅允许在名称以use开头的自定义Hook顶层调用Hook
  你当前在普通工具函数canViewMenuGroup、canViewMenuItem中直接调用了useContext，这两个函数既不符合组件命名要求，也不符合自定义Hook命名要求，本身就是错误写法，和大小写敏感校验没有关系。

不要通过禁用规则规避报错，按React规范调整代码即可，有两种可选修复方式：

• 方案一：将两个函数重命名为useCanViewMenuGroup、useCanViewMenuItem，按照自定义Hook的规范编写逻辑，调用时必须放在组件或其他Hook的顶层作用域
• 方案二：不在这两个普通工具函数内直接调用useContext，先在组件顶层获取context返回值，再将值作为参数传入两个普通函数做逻辑判断

错误示例 #

// 普通工具函数，禁止内部直接调用Hook
const canViewMenuGroup = () => {
  const menuContext = useContext(MenuContext);
  return menuContext.permission.includes('menu');
}

const SideBar = () => {
  // 错误：普通函数内调用Hook会导致调用顺序不可控
  return canViewMenuGroup() ? <Menu/> : null;
}

修复示例1：改为自定义Hook #

// 以use开头，符合自定义Hook命名规范
const useCanViewMenuGroup = () => {
  const menuContext = useContext(MenuContext);
  return menuContext.permission.includes('menu');
}

const SideBar = () => {
  // 必须在组件顶层调用Hook
  const canViewMenu = useCanViewMenuGroup();
  return canViewMenu ? <Menu/> : null;
}

修复示例2：普通函数接收参数 #

// 普通工具函数，仅处理传入的参数，不直接调用Hook
const canViewMenuGroup = (contextValue) => {
  return contextValue.permission.includes('menu');
}

const SideBar = () => {
  // 组件顶层调用Hook获取值
  const menuContext = useContext(MenuContext);
  // 将值传入普通函数做计算
  const canViewMenu = canViewMenuGroup(menuContext);
  return canViewMenu ? <Menu/> : null;
}

提醒：不要随意关闭react-hooks/rules-of-hooks校验，该规则是为了保证每次渲染时Hook的调用顺序一致，避免出现状态错乱、上下文丢失等难以排查的线上问题。其他环境不报只是漏检，不代表代码写法合法。

内容的提问来源于stack exchange，提问作者Nimesh Patel