Wrong function parameters when refactoring code containing a destructuring assignment with new variable names

[SimonSimCity]

Type: Bug

1. Create a code-example with a destructuring assignment where you set new variable names, like done at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#assigning_to_new_variable_names
2. Select the code from the destructuring assignment including the usage of the variable and run the code-action Extract to function in module scope.

Code before running the action:

const o = { p: 42, q: true };
const { p: foo, q: bar } = o;

console.log(foo); // 42
console.log(bar); // true

Expected result:

const o = { p: 42, q: true };
newFunction(o);

function newFunction(o: {p: number, q: boolean}) {
    const { p: foo, q: bar } = o;

    console.log(foo); // 42
    console.log(bar); // true
}

Actual result:

const o = { p: 42, q: true };
newFunction(p, q); // true

function newFunction(p: number, q: boolean) {
    const { p: foo, q: bar } = o;

    console.log(foo); // 42
    console.log(bar);
}

Sidenote: I would expect all the selected code to be inside the refactored function. It's interesting that the comment "// true" falls outside of the refactored lines even though I had selected it.

VS Code version: Code 1.96.3 (Universal) (91fbdddc47bc9c09064bf7acf133d22631cbf083, 2025-01-09T18:14:09.060Z)
OS version: Darwin arm64 23.4.0
Modes:

System Info

Item	Value
CPUs	Apple M1 (8 x 2400)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: disabled_off video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled webgpu: enabled webnn: disabled_off
Load (avg)	2, 3, 2
Memory (System)	16.00GB (0.08GB free)
Process Argv	--crash-reporter-id 7949f8fb-dbe6-4ddc-a140-5b13cf8d447f
Screen Reader	no
VM	0%

Extensions (13)

Extension	Author (truncated)	Version
vscode-tailwindcss	bra	0.12.18
postcss	css	1.0.9
vscode-eslint	dba	3.0.10
EditorConfig	Edi	0.16.4
prettier-vscode	esb	11.0.0
copilot	Git	1.257.0
copilot-chat	Git	0.23.2
i18n-ally	lok	2.13.1
playwright	ms-	1.1.12
typescript-explorer	mxs	0.4.2
identify-duplicate-properties	tir	1.0.3
volar	Vue	2.2.0
vscode-todo-highlight	way	1.0.5

A/B Experiments

vsliv368cf:30146710
vspor879:30202332
vspor708:30202333
vspor363:30204092
vscod805cf:30301675
binariesv615:30325510
vsaa593:30376534
py29gd2263:31024239
c4g48928:30535728
azure-dev_surveyone:30548225
962ge761:30959799
pythonnoceb:30805159
pythonmypyd1:30879173
h48ei257:31000450
pythontbext0:30879054
cppperfnew:31000557
dsvsc020:30976470
pythonait:31006305
dsvsc021:30996838
dvdeprecation:31068756
dwnewjupyter:31046869
2f103344:31071589
nativerepl1:31139838
pythonrstrctxt:31112756
nativeloc2:31192216
cf971741:31144450
iacca1:31171482
notype1:31157159
5fd0e150:31155592
dwcopilot:31170013
stablechunks:31184530
3d9ag387:31215808
6074i472:31201624
dwoutputs:31217127

[vs-code-engineering]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.96.4. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[SimonSimCity]

When having the code in a non-global context the result slightly differs:

Code before running the action:

{
const o = { p: 42, q: true };
const { p: foo, q: bar } = o;

console.log(foo); // 42
console.log(bar); // true
}

Expected result:

{
const o = { p: 42, q: true };
  newFunction(o);
}

function newFunction(o: { p: number; q: boolean; }) {
  const { p: foo, q: bar } = o;

  console.log(foo); // 42
  console.log(bar); // true
}

Actual result:

{
const o = { p: 42, q: true };
  newFunction(p, q, o); // true
}

function newFunction(p: number, q: boolean, o: { p: number; q: boolean; }) {
  const { p: foo, q: bar } = o;

  console.log(foo); // 42
  console.log(bar);
}