DEV Community

Cover image for VSCode Like a Pro on Your Mac
Christopher Ninman
Christopher Ninman

Posted on

VSCode Like a Pro on Your Mac

You’ve made the big decision to learn how to code. Your workspace is set up and you have started learning some of the big concepts of programming. You watch as your instructors or favorite YouTube teachers jump through their code with speed and wonder how they did it.

Well, you are a programmer now, and you should look and feel like it. In time, your mousepad will begin to feel like it slows you down and you’ll do most of your navigating on your new best friend, your keyboard. Here is a walkthrough of some of the commands you’ll be using the most on your journey using VSCode on your Mac.

Flip Through Open Apps

Flip through apps gif

Command-tab

This command will bring up a list of all open applications. Hold Command and press tab to select the next program to the right. Release Command when you have selected the desired app. Apps will be arranged from left to right in the order that they were last opened. Using Command-shift-tab will cycle through open applications from right to left.

Flip Through Tabs

Flip through tabs gif

Control-tab

Once you are in VSCode or in your browser, hold Control and press tab to cycle through all open tabs. In VSCode, this will be all files that are currently open. In Google Chrome, or your browser of choice, it will cycle through all open tabs. Use Control-Shift-tab to cycle from right to left.

Zoom In/Out

Command-plus / Command-minus

This command will work in VSCode or your browser, as well as many other programs. If you are creating a screen recording, this can be a particularly helpful command in order to quickly zoom in or out and more easily see what you are working on.

Undo

Command-Z

In my short life as a programmer, this is the most used command in my arsenal - UNDO!!! Trying to code a new idea or refactor one that’s already there, only to discover that it really was not a good idea and you want humanity to forget that it ever happened. Hold Command and press Z to your heart’s content. Alternately, Command-Shift-Z will allow you to redo any changes that you undid. This is not strictly for VSCode. Command-Z will work in your browser/Google Docs/etc…

Save

Command-S

Save often!!! Seriously.

Go To Top/Bottom of Document

Command-Up / Command-Down

Quickly head to the first line or the last line of the current document in a fraction of a second.

Go To First/Last Character Of The Line

Beginning of line gif

Command-left / Command-right

This command has increased my productivity tenfold(ish). Let’s say that I need to remove a bracket at the end a long line of code. Rather than switching over to my mousepad and clicking at the end of the line, all I need to do is to make sure to navigate my cursor to the proper line and press Command-right to send my cursor to the last character of the line. Or if I need to indent a line of code to make it more readable, once I’m on the correct line, I can press Command-left to move my cursor to the beginning of the line.

Highlight A Section Of Code

Highlight Code gif

Shift-direction

Holding Shift plus up or down will highlight an entire line of code. If you have a five-line function that you need to copy or move, once your cursor is positioned at the beginning of the function, hold Shift and press down five times until you have arrived at the end of the function. Hold Shift and press right to highlight the next character to the right (or unhighlight if it already is.)

Highlight All Text Until the End Of The Line Or File

Command-Shift-direction

This command will allow you to navigate in the same manner as using Command-direction, but will simultaneously highlight the text as well.

Let’s say you want to select all text until the end of the line without including the closing bracket. From the start of the line, press Command-Shift-right to select the entire line, then press Shift-left to unhighlight the bracket which is the final character of the line.

Search For A File

Command-P

You’ve moved beyond a single JavaScript file for your project and need to move between many files. Command-P allows you to search for a file based on its name.

Search For A Term Within a File

Command-F

Now where did I call that function? Press Command-F to open the search bar for the current file.

Search For A Term Within All Files

Command-Shift-F

I remember declaring a variable with a certain classname somewhere, but it could be anywhere. Press*Command-Shift-F* to open the search bar for all files in your application.

Move Line Up/Down

Move Line gif

Option-Up/Down

There’s no need to cut and paste every time you need to move some text to another location. Press Option and Up (Down) to move a line of code up (down). If you have multiple lines of code highlighted, all of those lines will be moved.

Toggle Word Wrap

Word Wrap gif

Option-Z

Lines of code can get pretty long. If there isn’t a good space to hit Enter and start a new line, you may want to use word wrap to make each line of code wrap onto the following line whenever it goes beyond the width of your VSCode window. Option-Z allows you to switch quickly between wrapping the text or not.

View/Change User Settings

Command-comma(,)

One of the beautiful things about programming is that there is rarely one correct way to do it. Within the confines of a computer language, you can find your own style. Command and , will bring up all your VSCode personal settings. One option for personalization is selecting your default number of spaces when pressing tab. Default is 4 spaces, I (many others) prefer 2 spaces. Whatever makes sense for you is just fine.

Toggle Sidebar Visibility

Command-B

At times you need to see all the files you have in the sidebar, but once you have selected one, they take up too much space and are distracting. Command-B allows you to quickly toggle between showing or hiding the sidebar .

Find All Matching Terms In The File

Select All Matching Terms gif

Command-D

Another command to greatly increase productivity. Let’s say you have a variable that is used 15 times in a file. You realized, for whatever reason, that you want/need to change its name. If you forget to correctly change a single one of those fifteen instances, your program will not work as planned (or at all). Select the text you want to change, then hold Command and press D to select the next instance in which that exact text is used. Each time you press D, the next instance of that text will be highlighted as well. Now you can change all fifteen instances of that variable at the same time.

Best of luck in all your future coding endeavors!!!

Photo by Ales Nesetril on Unsplash

Top comments (3)

Collapse
 
andrewbaisden profile image
Andrew Baisden

As a developer I live in VS Code 😋

Collapse
 
alternate_robot profile image
Christopher Ninman

Do you have any other recommended shortcuts that have helped increase your productivity?

Collapse
 
andrewbaisden profile image
Andrew Baisden

Well I suppose this counts using the Emmet extension helps to speed up workflows a lot.