Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

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. HoldCommand and presstab to select the next program to the right. ReleaseCommand when you have selected the desired app. Apps will be arranged from left to right in the order that they were last opened. UsingCommand-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, holdControl and presstab 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. UseControl-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. HoldCommand and pressZ 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 pressCommand-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 pressCommand-left to move my cursor to the beginning of the line.

Highlight A Section Of Code

Highlight Code gif

Shift-direction

HoldingShift plusup ordown 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, holdShift and pressdown five times until you have arrived at the end of the function. HoldShift and pressright 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 usingCommand-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, pressCommand-Shift-right to select the entire line, then pressShift-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? PressCommand-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. PressOption andUp (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 hitEnter 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 pressingtab. 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 holdCommand and pressD to select the next instance in which that exact text is used. Each time you pressD, 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 byAles Nesetril onUnsplash

Top comments(3)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
andrewbaisden profile image
Andrew Baisden
Software Developer | Content Creator | AI, Tech, Programming
  • Location
    London, UK
  • Education
    Bachelor Degree Computer Science
  • Work
    Software Developer
  • Joined

As a developer I live in VS Code 😋

CollapseExpand
 
alternate_robot profile image
Christopher Ninman
Former teacher entering software development field.
  • Education
    The Flatiron School
  • Work
    Coding Bootcamp
  • Joined

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

CollapseExpand
 
andrewbaisden profile image
Andrew Baisden
Software Developer | Content Creator | AI, Tech, Programming
  • Location
    London, UK
  • Education
    Bachelor Degree Computer Science
  • Work
    Software Developer
  • Joined

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Former teacher entering software development field.
  • Education
    The Flatiron School
  • Work
    Coding Bootcamp
  • Joined

More fromChristopher Ninman

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp