The Startup
Published in

The Startup

Improving VSCode Workflow on Mac for Beginners

This week I’ve been learning a few new shortcuts on VSCode, and I am wishing I knew about these sooner! I want to share some of the shortcuts and tricks I’ve found useful as a beginner, and demonstrate how to use them to improve your workflow!

These tips are intended to save time and keystrokes, and also make navigating the code editor easier. As they say — work smarter, not harder — and don’t ask me who “they” are!

To be honest, VSCode is the only editor I’ve ever used, but it’s possible this article could relate to other editors such as Atom, or Sublime Text, however, I am not sure! Maybe I will write another article about ways to improve workflow for other editors in the future.

Anyways, out with the goods — here are a few useful workflow improvements I’ve made recently:

Basic Editing

HTML Magic

To kick things off with a “bang”, I thought I would share the fastest way to create a boilerplate HTML file. This one is pretty commonly known, but figured it couldn’t hurt to throw it in.

If I use a ! symbol, otherwise known as a “bang”, and then hit enter, we’ll see a boat load of HTML pre-built and ready to go, saving a ton of opening keystrokes. Check it out:

Pretty magical!

And you’re off to a hot start with your new HTML file!

Expand and Shrink Selection

Let’s say you want to highlight a specific section, but don’t want to use your mouse to click and drag across all the characters. I used to do that, and if I didn’t accurately drop the cursor in the correct place… I would do it over again (shame!).

Never again will I use the mouse with these commands for selection:

Expand one character at a time: shift +
Shrink one character at a time: shift +
Expand one word at a time: shift + (option) +
Shrink one word at a time: shift + (option) +
Expand to end of the line: shift + (command) +
Expand to beginning of the line: shift + (command) +
Select entire line: (command) + L

Here’s the above commands in their listed order, demonstrated by highlighting the <title> on line 6 in different ways:

What a selection!

I think it’s important to note that if you shrink past the initial cursor position, you actually start expanding toward the beginning of the line.

Also, if you remove the shift key from each of the above commands, instead of selecting/highlighting, you will just move the cursor to a new spot, which is also very useful for traversing the editor.

Navigation

Quick Terminal

For me, being able to pull up a terminal that is already navigated to the project’s root folder is super helpful. Whether I want to open up a development server in the browser, or make Git commits, having a terminal available as fast as possible is a great tool.

After pressing control + ` (backtick), a terminal will pop up instantly ready for me to begin making commands from the root folder:

Speedy!

In roughly 8 seconds, I opened a terminal directly at the “shortcuts-practice” folder, and initialized my project as a Git repository. Pretty nifty!

I also want to mention if you hit control + ` again, it will close the in-editor terminal.

Jump Between VSCode Windows

If you’re a full stack developer, it’s very likely you will have a front end and back end in separate folders, and therefore, in different editor windows.

Sometimes you may even have more windows open. After using the shortcut (command) + ` (backtick), we should be able to toggle between multiple VSCode windows specifically, like so:

No more clicking windows!

This one is very helpful if one of your windows is behind another one and is unclickable. I used to minimize the front window just to get to the one behind, but this shortcut prevents me from using the mouse at all, super convenient!

Jump Between Editor Tabs

Let’s be honest, sometimes the amount of files we have open inside one editor can get ridiculous. But inside of scrolling through all the open tabs or searching through the file tree for an already opened file, there is a shortcut to save the day!

Tab right: shift + (command) + ] (closing square bracket)
Tab left: shift + (command) + [ (opening square bracket)

Now we’re navigatin’ tabs!

This one saves me a ton of time if I have a lot of tabs open, I used to sit there and scroll through them with my mouse, no more!

Multi-Cursor

Select Next Match

Maybe you have a certain type of HTML elements (<li>’s for example) you want to add a class to all at once, but you only want to affect a few in a row, leaving others untouched.

You can use this trick to select the next match only, using as many times as necessary to place multiple cursors.

With the code you want to match highlighted, (command) + D will add a cursor at the next match:

The example GIF doesn’t make it perfectly clear, but if there were more <li>’s below the <ul> somewhere, I would have been able to stop short, only adding a class to the 4 spots that I had made cursors for.

Select All Matches

Instead of just selecting one at a time, we can select every single match on the page, if you’re sure there won’t be any unwanted matches, this can be very useful.

However, if you have a variable called mainColor, and later use dot notation which also uses the word “color” (ex. someObject.color), you will select both of these instances with the word “Color” OR “color” selected.

This can cause unintended consequences so be careful with this command! By highlighting what we want to select, followed by shift + (command) + L

Breaking down what happened in the GIF above:

  • Copied and pasted list of NFL teams
  • Used a special command (bonus!) which created a copy of the current line below it — shift + (option) + to create 32 pairs of double quotes followed by a comma
  • Expanded my selection to cover the quotes and comma
  • Did the command to select all matches (shift + (command) + L)
  • Used (command) + V to paste all the teams at once, one per line since I copied them that way

Place Cursor Above and Below

Here is yet another way to place a new cursor. With this shortcut you can place a cursor either directly above or directly below the original cursor.

In this case, I plan to place 32 total cursors in order to wrap all 32 NFL team names in double quotes and add a comma at the end to complete the array.

Place cursor above: (option) + (command) +
Place cursor below: (option) + (command) +

Neat!

Breaking down what happened in the GIF above:

  • Copied and pasted list of NFL teams
  • Started cursor at top left, and added a cursor below repeatedly until there was one for each team
  • Expanded my selection to the end of the line to highlight all 32 lines
  • Hit to wrap the strings in double quotes, then moved cursor to the right to add a comma to make it a list
  • Removed the hanging comma for undiagnosed OCD reasons

Place New Cursor Wherever

There is one more way to create new cursors, and possibly the most dynamic way.

By using (option) + click we can place cursors anywhere. Check it out:

Useful for if you want to have perfect control over where the cursors go! In this case I used it to only affect 3 of the 4 <li>’s.

Conclusion

There are a lot of shortcuts I didn’t mention here, but hopefully there are enough here to provide a solid foundation of how to improve workflow in VSCode.

Some reduce keystrokes, while others save time, but they all help us work smarter than harder!

I hope this was beneficial to at least one person out there. Thanks for reading if you made it this far, and as always, Happy Hacking!

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Tree: Level Order Traversal

Text Extraction using AWS Textract on Handwritten Images: Eradicate Diabetes.

EPUB & PDF Ebook Autodesk Inventor 2019: Advanced Assembly Modeling (Mixed Units): Autodesk…

My Review of a Coding Boot Camp

Scaling in and with Digital Twin

The Developer’s Guide to Building Notification Systems: Observability and Analytics | Courier

What’s inside the brackets?

My 2 cents about Tests

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tyler J Funk

Tyler J Funk

Full Stack Web Developer && Creative Thinker && Flatiron School Grad && Continuous Learner

More from Medium

Mac keyboard shortcuts for moving app windows

How to be more efficient in your development thanks to the use of Snippets (Visual Studio Code /…

Terminator Broadcasting with iTerm2

[Solved] Can’t install xdebug on Mac with Homebrew