如何将Chrome DevTools复制的JSON响应转为无引号键的JS对象？

以下是几种高效的本地实现方式：

1. Chrome DevTools直接复制JS对象（最省事） #

在Chrome DevTools的网络面板找到目标接口：

• 切换到「Response」或「Preview」标签
• 右键点击响应内容，选择「Copy object」
• 直接粘贴到React项目的mock文件中，得到的就是原生JS对象（键不带双引号），VS Code直接支持折叠展开。

2. VS Code正则批量替换 #

如果已经复制了带双引号的JSON，用VS Code替换功能一键转换：

1. 打开替换面板（快捷键：Ctrl+H / Cmd+H）
2. 点击面板右上角的「正则表达式」按钮（图标为.*）
3. 查找内容输入："([^"]+)":
4. 替换内容输入：$1:
5. 点击「Replace All」，瞬间去掉所有键的双引号，保留值的引号。

示例：
原JSON：

{
  "userId": 1,
  "userName": "devanil",
  "roles": ["admin", "editor"]
}

替换后得到JS对象：

{
  userId: 1,
  userName: "devanil",
  roles: ["admin", "editor"]
}

3. VS Code命令面板一键转换 #

VS Code内置JSON转JS对象的快捷命令：

1. 将JSON粘贴到目标文件中
2. 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P）
3. 搜索并执行「Convert JSON to JavaScript Object」
4. 自动完成转换，直接使用即可。

TypeScript适配提示 #

转换后的JS对象若需TS类型支持，可添加as const让TS推导精确的字面量类型：

export const mockUser = {
  userId: 1,
  userName: "devanil",
  roles: ["admin", "editor"]
} as const;

也可手动定义接口后断言类型，提升代码可维护性。

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