Dec 23, 2020
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:
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:
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:
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:
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)
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) +Vto 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) + ↓
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!
