如何实现ESLint规则禁用Zod的z.string().url()（适配React Native）

你的问题出在ESLint选择器的结构匹配错误，z.string().url() 的AST结构是嵌套的调用表达式，需要精准匹配层级：

1. 最外层是调用 url() 的 CallExpression，它的调用主体（callee）是一个成员表达式（MemberExpression），对应 xxx.url()
2. 这个成员表达式的对象（object）是另一个 CallExpression，对应 z.string()
3. 内层的 CallExpression 的调用主体又是一个成员表达式，其对象是标识符 z，属性是 string

正确的 no-restricted-syntax 配置如下：

'no-restricted-syntax': [
  'error',
  {
    selector: "CallExpression[callee.type='MemberExpression'][callee.property.name='url'][callee.object.type='CallExpression'][callee.object.callee.type='MemberExpression'][callee.object.callee.object.name='z'][callee.object.callee.property.name='string']",
    message: "禁止使用 z.string().url()，React Native 的 URL 类校验存在缺陷，请改用自定义URL校验逻辑。",
  },
]

扩展适配：处理Zod的别名导入 #

如果项目中使用了别名导入（比如 import { z as zod } from 'zod'），可以修改选择器中的名称匹配规则，用正则覆盖多个可能的别名：

selector: "CallExpression[callee.type='MemberExpression'][callee.property.name='url'][callee.object.type='CallExpression'][callee.object.callee.type='MemberExpression'][callee.object.callee.object.name=/^z$|^zod$/][callee.object.callee.property.name='string']"

自定义URL校验替代方案 #

既然不能用Zod内置的 url()，可以自定义适配React Native的URL校验函数，示例如下：

import { z } from 'zod';

const isValidRNUrl = (url: string): boolean => {
  try {
    const urlObj = new URL(url);
    // 额外校验协议，避免RN接受无效协议的内容
    return ['http:', 'https:'].includes(urlObj.protocol);
  } catch (e) {
    return false;
  }
};

const RNUrlSchema = z.string().refine(isValidRNUrl, {
  message: '请输入有效的URL地址',
});

内容的提问来源于stack exchange，提问作者Emil Ivanov