Skip to content
Helix
News

Refactor Examples

Concrete examples showing how powerful multiple cursor functionality can be.

Object to Array of (key, value)

    1  const palette = {        
    2    apricot: "#f47868",    
    3    lightning: "#ffcd1c",  
    4    delta: "#6F44F0",      
    5  };                       
 NOR   file.js [+]   1 sel  1:1

We want to transform this object into an array of tuples where, the first element of each tuple is the key of the object and the second element is the value:

    1  const palette = [          
    2    ["apricot", "#f47868"],  
    3    ["lightning", "#ffcd1c"],
    4    ["delta", "#6F44F0"],    
    5  ];                         
 NOR   file.js         1 sel  1:1

Steps:

  1. Inside the object, use mr{[ to replace the surrounding { with [:
    1  const palette = [          
●   2    apricot: "#f47868",      
●   3    lightning: "#ffcd1c",    
●   4    delta: "#6F44F0",        
    5  ];                         
 NOR   file.js [+]● 3  1 sel  3:3
  1. mi[ to select inside the entire array:
    1  const palette = [          
●   2    apricot: "#f47868",      
●   3    lightning: "#ffcd1c",    
●   4    delta: "#6F44F0",        
    5  ];                         
 NOR   file.js [+● 3  1 sel  4:20
  1. s to enter select mode, then : + Enter will place a cursor on every :.
    1  const palette = [          
    2    apricot: "#f47868",      
    3    lightning: "#ffcd1c",    
    4    delta: "#6F44F0",        
    5  ];                         
 NOR   file.js [+]   3 sels  2:10
  1. r, replaces each selection with a ,. A cursor is line a single-width selection, and we have multiple cursors, so it will replace each : with ,.
    1  const palette = [          
    2    apricot, "#f47868",      
    3    lightning, "#ffcd1c",    
    4    delta, "#6F44F0",        
    5  ];                         
 NOR   file.js [+]   3 sels  2:10
  1. t, moves the cursor on each line to the ending comma.
    1  const palette = [          
    2    apricot, "#f47868",      
    3    lightning, "#ffcd1c",    
    4    delta, "#6F44F0",        
    5  ];                         
 NOR   file.js [+]   3 sels  2:20
  1. ; the selection around each cursor into a single selection.
    1  const palette = [          
    2    apricot, "#f47868",      
    3    lightning, "#ffcd1c",    
    4    delta, "#6F44F0",        
    5  ];                         
 NOR   file.js [+]   3 sels  2:20
  1. vgs selects each line excluding the final comma.
    1  const palette = [          
    2    apricot, "#f47868",      
    3    lightning, "#ffcd1c",    
    4    delta, "#6F44F0",        
    5  ];                         
 SEL   file.js [+]    3 sels  2:3
  1. ms[ surrounds each individual selection with [ to turn it into an array.
    1  const palette = [          
    2    [apricot, "#f47868"],    
    3    [lightning, "#ffcd1c"],  
    4    [delta, "#6F44F0"],      
    5  ];                         
 NOR   file.js [+]    3 sels  2:3
  1. l moves 1 character forward, replacing the selection with just a 1-width selection:
    1  const palette = [          
    2    [apricot, "#f47868"],    
    3    [lightning, "#ffcd1c"],  
    4    [delta, "#6F44F0"],      
    5  ];                         
 NOR   file.js [+]    3 sels  2:4
  1. e selects until the end of each word.
    1  const palette = [          
    2    [apricot, "#f47868"],    
    3    [lightning, "#ffcd1c"],  
    4    [delta, "#6F44F0"],      
    5  ];                         
 NOR   file.js [+]   3 sels  2:10
  1. ms” surrounds the items with double quotes to make strings.
    1  const palette = [          
    2    ["apricot", "#f47868"],  
    3    ["lightning", "#ffcd1c"],
    4    ["delta", "#6F44F0"],    
    5  ];                         
 NOR   file.js [+]   3 sels  2:12

The final command to achieve all of that is mr{[mi[s:<enter>r,t,;vgsms[lems".