VSCode Shortcut Spotlights: Find Next Occurrence

Photo by Nine Köpfer on Unsplash

Windows/Linux: Ctrl+D Mac: Cmd+D

Functionality

This shortcut will take whatever you’ve highlighted, then highlight and place a new cursor for the next identical set of characters in the file.

This is a game changer.

When you’re going through and you have to swap out variable names or props or anything that needs to be changed from one thing to another, this is your shortcut.

Granted, if you have to change all occurrences of that thing you can right click and change all occurrences in that file, but I find myself having to change just a couple of instances more often.

The more that you use this shortcut the more that you’ll find little ways to cut the corners in your development time! It’s probably one of my favorites.

Also, this is a fantastic way to place a cursor right where you want it if you’re going to be adding something in a similar way to a lot of lines of code, but they might not line up in your IDE.

Photo by Katerina Kerdi on Unsplash

My Favorite Use Cases

Swapping out terms!

<form className={classes.root} noValidate autoComplete="off">
  <TextField
    id="standard-basic"
    label="Standard" />
  <TextField
    id="filled-basic"
    label="Filled"
    variant="filled" />
  <TextField
    id="outlined-basic"
    label="Outlined"
    variant="outlined"/>
</form>

Ctrl+D Ctrl+D

<form className={classes.root} noValidate autoComplete="off">
  <TextField
    id="standard-basic"
    label="Standard" />
  <TextField
    id="filled-basic"
    label="Filled"
    variant="filled" />
  <TextField
    id="outlined-basic"
    label="Outlined"
    variant="outlined"/>
</form>

Editing

<form className={classes.root} noValidate autoComplete="off">
  <TextField
    id="standard-advanced"
    label="Standard" />
  <TextField
    id="filled-advanced"
    label="Filled"
    variant="filled" />
  <TextField
    id="outlined-advanced"
    label="Outlined"
    variant="outlined"/>
</form>

Adding information!

<form className={classes.root} noValidate autoComplete="off">
  <TextField
    id="standard-advanced"
    label="Standard" />
  <TextField
    id="filled-advanced"
    label="Filled"
    variant="filled" />
  <TextField
    id="outlined-advanced"
    label="Outlined"
    variant="outlined"/>
</form>

Ctrl+D Ctrl+D

<form className={classes.root} noValidate autoComplete="off">
  <TextField
    id="standard-advanced"
    label="Standard" />
  <TextField
    id="filled-advanced"
    label="Filled"
    variant="filled" />
  <TextField
    id="outlined-advanced"
    label="Outlined"
    variant="outlined"/>
</form>

Editing — Press →, then type!

<form className={classes.root} noValidate autoComplete="off">
  <TextField className={clsx(classes.margin, classes.textField)}
    id="standard-advanced"
    label="Standard" />
  <TextField className={clsx(classes.margin, classes.textField)}
    id="filled-advanced"
    label="Filled"
    variant="filled" />
  <TextField className={clsx(classes.margin, classes.textField)}
    id="outlined-advanced"
    label="Outlined"
    variant="outlined"/>
</form>

className=”puppers” ~ Photo by Matt Nelson on Unsplash

Focus!

I have a love/hate relationship with shortcuts. I love using them, but only if I already know them. Taking the time to learn new shortcuts can be painstaking, so I try to take them on one at a time.

The lists that give you “Top 25 VSCode Shortcuts You Should Be Using!” are overwhelming, so I’m going to try and give you one a day to focus on.

Intentional practice creates more likelihood that you’ll use this for more than just today. Let’s go for mastery and long-term usage!