VSCode Like a Pro on Your Mac
Tags: vscode, mac, codenewbie, beginners
Published: 2022-06-13 21:21:56

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. 

<h1>Flip Through Open Apps</h1>

![Flip through apps gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5ubcr8a5009p5vhcnuv.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.

<h1>Flip Through Tabs</h1>

![Flip through tabs gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4ihl1q2cjsfkse482s1.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.

<h1>Zoom In/Out</h1>

**_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.

<h1>Undo</h1>

**_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…

<h1>Save</h1>

**_Command-S_**

Save often!!! Seriously.

<h1>Go To Top/Bottom of Document</h1>

**_Command-Up_** / **_Command-Down_**

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

<h1>Go To First/Last Character Of The Line</h1>

![Beginning of line gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rs8wcdtu5lql59j1qrgc.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.

<h1>Highlight A Section Of Code</h1>

![Highlight Code gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5cqexrg5kym9sabb5ep.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.)

<h1>Highlight All Text Until the End Of The Line Or File</h1>

**_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.

<h1>Search For A File</h1>

**_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.

<h1>Search For A Term Within a File</h1>

**_Command-F_**

Now where did I call that function? Press **_Command-F_** to open the search bar for the current file.

<h1>Search For A Term Within All Files</h1>

**_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.

<h1>Move Line Up/Down</h1>

![Move Line gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ck5g8lt7zbj28079ubws.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.

<h1>Toggle Word Wrap</h1>

![Word Wrap gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq0wgifnwfubg9m1np75.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.

<h1>View/Change User Settings</h1>

**_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.

<h1>Toggle Sidebar Visibility</h1>

**_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 .

<h1>Find All Matching Terms In The File</h1>

![Select All Matching Terms gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wch0p9qx2y5e71r6gvgp.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 <a href="https://unsplash.com/photos/Im7lZjxeLhg?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink">Ales Nesetril</a> on <a href="https://unsplash.com/s/photos/students?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>