VSCode Shortcut Spotlights: Add Cursor with Click

Photo by Liam Briese on Unsplash

Windows/Linux: Alt+Click Mac: Opt+Click

Functionality

Have you ever wished that you could have multiple cursors. You would save so much time when you had to delete something or add something over and over.

Well, this “shortcut” will change your editing life!

This adds an additional cursor in the location that you click.

Photo by Annie Spratt on Unsplash

My Favorite Use Cases

Pruning the Code

When I’m going through and clearing out old console.log and comments that are unnecessary, this is my best friend.

This also works extremely well with excess spaces!

// This function will show a warning
// when the showWarning state
// is set to true
function WarningBanner(props) {
  // if the warning is set to false
  // this will return null here
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    // Flips the state between true and false
    // for showWarning when clicked
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

Alt+Click and Ctrl+Shift+K

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }
  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }
  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

Adding Properties

When I’m trying to add similar new properties to a <div> or a component in React, then this a great time saver!

<ButtonGroup
  orientation="vertical"
  color="primary"
  aria-label="vertical outlined"
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup
  orientation="vertical"
  color="primary"
  aria-label="vertical contained"
  variant="contained"
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup
  orientation="vertical"
  color="primary"
  aria-label="vertical contained"
  variant="text"
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Alt+Click, Alt+Click, Editing!

<ButtonGroup
  orientation="vertical"
  color="primary"
  aria-label="vertical outlined primary button group"
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup
  orientation="vertical"
  color="primary"
  aria-label="vertical contained primary button group"
  variant="contained"
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup
  orientation="vertical"
  color="primary"
  aria-label="vertical contained primary button group"
  variant="text"
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Photo by Cleo Vermij 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!

Full Lists of Shortcuts for the Interested: Linux, Windows and Mac!