VS Code Multi-Cursor Magic: Transforming Data Structures in Seconds

Sometimes you inherit messy data that needs restructuring, and doing it line by line is painful. Here's how i transformed a flat JavaScript object into a proper array of objects using VS Code's multi-cursor superpowers.

I had this poorly formatted JavaScript object:

const mockProducts = {
  ID: 'PROD001', Name: 'Wireless Bluetooth Headphones', Price: 129.99, Stock: 45, Category: 'Audio', Description: 'Premium noise-cancelling wireless headphones with 30-hour battery life'
  ID: 'PROD002', Name: 'Gaming Mechanical Keyboard', Price: 89.50, Stock: 23, Category: 'Gaming', Description: 'RGB backlit mechanical keyboard with tactile switches'
  // ... more lines
};

And I needed it formatted as a proper array with consistent casing:

const mockProducts = [
  {'id': 'PROD001', 'name': 'Wireless Bluetooth Headphones', 'price': 129.99, 'stock': 45, 'category': 'Audio', 'description': 'Premium noise-cancelling wireless headphones with 30-hour battery life'},
  {'id': 'PROD002', 'name': 'Gaming Mechanical Keyboard', 'price': 89.50, 'stock': 23, 'category': 'Gaming', 'description': 'RGB backlit mechanical keyboard with tactile switches'},
  // ... more objects
];

Doing this manually would take forever. Enter multi-cursor magic!

Step 1: Add Closing Brackets and Commas

First, I needed to add }, to the end of each product line.

1. Select the entire data block (excluding the opening/closing braces)

2. Create cursors at line ends:

   • Mac: Shift + Option + I

   • Windows: Shift + Alt + I

3. Type },

This places a cursor at the end of every selected line simultaneously, letting you add the closing syntax in one go.

Step 2: Add Opening Brackets

Next, I needed { at the beginning of each product line.

1. Keep the same selection (or re-select the block)

2. Create cursors at line ends: Shift + Option + I (Mac) / Shift + Alt + I (Windows)

3. Jump to line beginnings: Press Home

4. Type {

Now each line is properly wrapped as an object!

Step 3: Fix Parameter Casing

Finally, I needed to change all parameter names from PascalCase to lowercase.

For each parameter (ID, Name, Price, Stock, Category, Description):

1. Select one instance of the parameter (e.g., select "ID")

2. Select all matching instances:

   • Mac: Cmd + Shift + L

   • Windows: Ctrl + Shift + L

3. Type the lowercase version (e.g., "id")

Repeat for each parameter. VS Code will update every instance simultaneously!

Pro Tips

• Multi-cursor placement: You can also Cmd/Ctrl + Click to manually place cursors wherever you need them

• Column selection: Shift + Option + Mouse Drag (Mac) or Shift + Alt + Mouse Drag (Windows) for rectangular selections

• Find and replace all: Cmd/Ctrl + F then Cmd/Ctrl + Shift + L to select all matches of your search term

• Undo safety: If you mess up, Cmd/Ctrl + Z will undo all multi-cursor changes at once

The Result

What started as a time-consuming manual edit became a 30-second operation. Multi-cursor editing is one of those VS Code features that, once you learn it, you'll wonder how you ever lived without it.

Perfect for:

• Adding/removing brackets or quotes

• Reformatting data structures

• Bulk renaming variables

• Adding imports or comments to multiple lines

• Converting between data formats

Next time you face repetitive editing, remember: if you're doing the same thing on multiple lines, there's probably a multi-cursor shortcut for it!