VSCode粘贴API响应到JS文件键名自动加双引号问题排查

• 操作流程：在Chrome DevTools中，将鼠标悬停在REST API调用的响应预览上点击「copy value」复制内容
• 异常表现：
  • 粘贴到JSON文件时格式符合预期
  • 粘贴到JS文件时对象键名会被自动添加双引号，和测试要求的无引号键名格式不符，必须手动逐行修改才能正常使用
• 对照情况：同项目同事执行完全相同的复制粘贴操作不会出现该异常，无需手动修改

• 遍历项目目录未找到.prettierrc配置文件
• 已将VSCode中JavaScript、TypeScript的引号样式偏好设置为auto
• 尝试将编辑器自动闭合引号设为never，问题仍未解决

预期效果（粘贴到test-file.json的结果） #

{
    type: 'mover',
    id: 888,
    organization_id: null
}

实际异常效果（粘贴到test-file.js的结果） #

{
    "type": "mover",
    "id": 888,
    "organization_id": null
}

注：原异常示例存在"id: 888这类引号未闭合的笔误，属于录入错误，不影响问题排查。

VSCode settings.json配置 #

{
    "redhat.telemetry.enabled": true,
    //"editor.codeActionsOnSave": {
    //    "source.fixAll.eslint": true
    //},
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "git.confirmSync": false,
    "git.ignoreRebaseWarning": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "terminal.integrated.profiles.linux": {
        "bash": {
            "path": "bash",
            "icon": "terminal-bash"
        },
        "zsh": {
            "path": "zsh"
        },
        "fish": {
            "path": "fish"
        },
        "tmux": {
            "path": "tmux",
            "icon": "terminal-tmux"
        },
        "pwsh": {
            "path": "pwsh",
            "icon": "terminal-powershell"
        }
    },
    "html.completion.attributeDefaultValue": "empty"
}

.eslintrc.js配置 #

module.exports = {
  extends: ['../../.eslintrc', 'next', 'plugin:cypress/recommended'],
  parserOptions: {
    warnOnUnsupportedTypeScriptVersion: false,
  },
  overrides: [
    {
      files: ['./cypress/**/*/*.{tsx,ts,js,jsx}'],
      rules: {
        'import/no-extraneous-dependencies': [
          'error',
          { devDependencies: true },
        ],
      },
    },
  ],
};

核心触发原因是粘贴时自动格式化逻辑调用Prettier默认规则，给JS对象键名强制加了双引号，和同事的配置差异按以下顺序排查即可：

1. 检查粘贴自动格式化开关
   在VSCode设置中搜索editor.formatOnPaste，如果该选项为开启状态，粘贴内容时会自动调用当前文件类型绑定的默认格式化器处理内容。当前配置中JS/TS文件的默认格式化器是Prettier，无自定义配置时Prettier默认规则会给所有对象键名添加双引号、字符串使用双引号，和异常表现完全匹配。
   • 若不需要粘贴自动格式化，直接关闭该选项即可恢复原生粘贴效果
   • 若需要保留粘贴自动格式化功能，在项目根目录新建.prettierrc文件，添加如下配置覆盖默认规则：

   {
     "quoteProps": "as-needed",
     "singleQuote": true
   }
   

   其中quoteProps: "as-needed"表示仅当键名包含特殊字符、必须加引号时才添加引号，匹配无引号键名的要求；singleQuote: true表示字符串默认使用单引号，和预期格式一致。
2. 排查第三方扩展干扰
   若上述配置修改后问题仍存在，禁用所有第三方扩展后重启VSCode测试粘贴效果，如果恢复正常，逐个启用扩展定位触发格式篡改的扩展即可，重点排查JSON处理、JS代码规范类扩展。
3. 校验语法服务配置
   搜索javascript.quoteStyle、typescript.quoteStyle配置项，确认值为auto而非强制双引号；确认editor.autoClosingQuotes对JS/TS文件设置为never后重启编辑器生效。

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