API返回蛇形键触发ESLint命名规则错误，求驼峰改写方案

方法一：解构时直接重命名 #

这是最简便的方案，在解构赋值时通过原蛇形字段名: 新驼峰变量名的语法重命名，既满足ESLint的camelCase要求，又能正确获取API返回值。

修改你代码中的解构部分：

const { id, login, avatar_url: avatarUrl, html_url: htmlUrl } = user;

然后在JSX中使用重命名后的变量：

<img src={avatarUrl} alt={login} />
<a href={htmlUrl}>profile</a>

完整修改后的渲染片段：

{users.map((user) => {
  const { id, login, avatar_url: avatarUrl, html_url: htmlUrl } = user;
  return (
    <li key={id}>
      <img src={avatarUrl} alt={login} />
      <div>
        <h5>{login}</h5>
        <a href={htmlUrl}>profile</a>
      </div>
    </li>
  );
})}

方法二：批量转换蛇形字段为驼峰 #

如果API返回大量蛇形字段，可编写工具函数批量转换对象键名，避免重复手动重命名。

创建转换函数：

const snakeToCamel = (obj) => {
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => {
      const camelKey = key.replace(/_([a-z])/g, (_, char) => char.toUpperCase());
      return [camelKey, value];
    })
  );
};

在获取数据后转换所有用户对象：

const resultUsers = await response.json();
const camelCaseUsers = resultUsers.map(snakeToCamel);
setUsers(camelCaseUsers);

之后渲染时直接使用驼峰字段：

const { id, login, avatarUrl, htmlUrl } = user;

方法三：调整ESLint规则（不推荐） #

若必须保留蛇形命名，可在.eslintrc或相关配置文件中修改规则，允许蛇形变量名。但这会破坏代码规范一致性，仅特殊场景下使用。

示例配置：

{
  "rules": {
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": "variable",
        "format": ["camelCase", "PascalCase", "UPPER_CASE", "snake_case"],
        "leadingUnderscore": "allow"
      }
    ]
  }
}

内容的提问来源于stack exchange，提问作者Yukinosuke Takada