[VSCode Shortcuts] A Summary of Useful Keys to Dramatically Increase Your Work Efficiency (for Windows/Mac)

Hello! Just a few months ago, I had absolutely no programming knowledge, but with the help of AI, I managed to build two websites on my own.

Through this experience, I keenly felt how many techniques I wished I had known sooner. Among them, "shortcut keys" were what directly impacted my work efficiency the most.

At first, I avoided them, thinking, "There are too many to remember!" However, the truly useful keys are not that numerous. In this article, I'll share the handpicked shortcut keys that I genuinely feel I "can't code without anymore" from my on-the-ground website development experience, along with my personal stories.

Instead of just a list of shortcuts, I will break down "why they are convenient" and "in what situations to use them," as if I were teaching my beginner self. Now, let's dramatically improve our work speed together!

Introduction: For Those Who Struggle to Remember Shortcuts

When you hear "shortcut key list," do you imagine a table full of alphabets and symbols and feel like quietly closing the page? I was like that too.

There are only two secrets to how I became proficient with shortcuts:

1. Don't try to learn everything at once. First, try to consciously use just one of the "god-tier shortcuts" introduced in this article, even if it's just for one day.
2. Always think, "Isn't there an easier way to do this?" Then, ask that question to an AI (like ChatGPT) in specific terms, such as, "Is there a shortcut in VSCode to change all instances of the same word at once?"

This article carefully selects only the truly useful shortcuts that I learned with the help of AI. Now, let's take the first step.

The Absolute Essentials! Top 5 "God-Tier Shortcuts" to Supercharge Your Coding

Among the numerous shortcuts, I've selected five "god-tier shortcuts" that I use daily—no, dozens of times an hour. Just learning these will transform your coding experience.

No. 1: Select and Fix the Same Word in an Instant! Multi-Cursor Editing

Windows: Ctrl + D
Mac: Cmd + D

This is the first shortcut I learned that blew my mind. It allows you to select multiple instances of the same word or code on a page and edit them all at once.

My Experience: Suppose you're creating a product list in HTML and want to change a class name from <div class="card"> to <div class="product-card">. I used to use the search and replace function one by one. But after learning this shortcut, I just double-click "card" to select it, then press Ctrl + D (or Cmd + D on Mac) as many times as needed. The cursors multiply, and I can't forget the shock of being able to fix all the class names with a single typing session.

Pro Tip: Double-clicking the word you want to fix before using this shortcut makes the selection more accurate and speedy.

No. 2: No More Copy-Pasting! Move Entire Lines

Windows: Alt + ↑ / ↓
Mac: Option + ↑ / ↓

You can move the current line or selected multiple lines up or down. No more tedious steps of selecting a line → Ctrl + X → clicking the destination → Ctrl + V.

My Experience: This shortcut is incredibly powerful when reordering list items <li> in HTML or arranging CSS properties. It completely eliminates indentation issues and accidental deletions that often happen when cutting and pasting code. It's truly a "magic wand" that allows you to change the structure of your code safely and intuitively.

No. 3: Duplicate Lines in an Instant

Windows: Shift + Alt + ↑ / ↓
Mac: Shift + Option + ↑ / ↓

This duplicates the current line above or below. It dramatically reduces your work time when you need to write similar code repeatedly.

My Experience: For example, when you want to mass-produce HTML elements with the same structure, like navigation menus or list items. I used to copy one line, press enter, paste, and repeat. With this shortcut, just repeatedly pressing Shift + Alt + ↓ completes the necessary number of list items in no time. Combined with "Move Line" from No. 2, your coding speed will increase severalfold.

No. 4: Open Files from Anywhere! File Explorer

Windows: Ctrl + P
Mac: Cmd + P

Pressing this shortcut brings up a search box at the top of the screen, allowing you to instantly open any file in your project by typing its name. You no longer need to search for files in the left-side explorer.

My Experience: As you get used to site development, the number of files increases to dozens or even hundreds. Then it becomes a hassle just to find a file, wondering, "Which folder did I put that CSS file in...?" Since learning Ctrl + P, the time I spend searching for files has become almost zero. Typing style suggests style.css. It truly enables coding without interrupting your train of thought.

No. 5: It All Starts Here. The Command Palette

Windows: Ctrl + Shift + P
Mac: Cmd + Shift + P

Similar to No. 4, but this one allows you to search and execute not just files, but "all functions (commands)" of VSCode. Even if you forget a shortcut key, you can just type the name of the operation you want to perform (e.g., format or theme), and VSCode will invoke that function for you.

My Experience: When I thought, "Wait, what was the shortcut to format the code neatly?" I pressed Ctrl + Shift + P, typed format, and found the "Format Document" command. As long as you remember this one, you can manage even if you forget other shortcuts—it's truly the "last resort." When I install a new extension, this is the first place I go to see what new features have been added.

[Advanced] Creating Your Ultimate Environment: Changing Keybindings

The great thing about VSCode is that you can customize shortcut keys to your liking. If you feel "this shortcut is useful, but the keys are hard to press," let's change it.

Here, I'll show you how to open the configuration file, keybindings.json, and share some customization examples that I found useful. Just by copying and pasting, you can make your VSCode even more user-friendly.

1. Open keybindings.json

1. First, open the Command Palette. (Windows: Ctrl + Shift + P / Mac: Cmd + Shift + P)
2. In the search box, type keybindings.
3. From the suggestions, select "Preferences: Open Keyboard Shortcuts (JSON)" and press Enter.

This will open a settings file called keybindings.json. It might just say [] at first. We will write our settings inside these brackets.

2. Just Copy & Paste! Recommended Customization Settings

Below are my recommended customizations. Try copying this entire code block and pasting it inside the [] of your keybindings.json.

[
    // {
    //   "key": "original key",
    //   "command": "command to execute",
    //   "when": "enable only under a specific condition"
    // },
    
    // Example 1: Make the shortcut to open the terminal easier to press
    // The default `Ctrl + `` is hard to press, so let's change it
    {
        "key": "ctrl+shift+t", // Windows
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "cmd+shift+t", // Mac
        "command": "workbench.action.terminal.toggleTerminal"
    },

    // Example 2: Make closing the editor (tab) easier
    // Overwrite the default `Ctrl+W`
    {
        "key": "ctrl+q", // Windows
        "command": "workbench.action.closeActiveEditor"
    },
    {
        "key": "cmd+w", // The default for Mac is easy to press, so it's fine as is
        "command": "workbench.action.closeActiveEditor"
    }
]

Explanation:

• Example 1 is a shortcut to open the "Terminal" for executing commands within VSCode. Since the default key is in a slightly awkward position, we're changing it to a more intuitive key.
• Example 2 is a shortcut to close the currently open file. Assigning it to a key similar to closing a browser tab makes it easier for your fingers to remember.

In this way, you can specify your preferred key combination in the key part and the function you want to assign in the command part. You can find out what commands are available in the official keybinding documentation or by searching in the Command Palette. I highly recommend building your own ultimate shortcut environment.

Note: keybindings.json is a JSON format file. A comma , is required after each } except for the last item, so be careful of syntax errors when editing. If an error occurs, VSCode will point it out, so follow the instructions to fix it.

Conclusion: A New World of Coding Opened by Shortcuts

This time, I've introduced the truly useful VSCode shortcut keys that I've been using since I was a programming beginner. Let's review the top 5 god-tier shortcuts one more time.

• Select and fix the same word: Ctrl + D / Cmd + D
• Move line: Alt + ↑ / ↓ / Option + ↑ / ↓
• Duplicate line: Shift + Alt + ↑ / ↓ / Shift + Option + ↑ / ↓
• Open file: Ctrl + P / Cmd + P
• Open Command Palette: Ctrl + Shift + P / Cmd + Shift + P

You don't need to learn them all at once. Start with No. 1, Ctrl + D (Cmd + D), and try to use it consciously in your coding today. When your fingers remember the movement, your work speed will undoubtedly have improved.

Shortcut keys are powerful tools for translating your ideas directly into code without stopping your train of thought. I would be overjoyed if this article serves as the first step in your comfortable coding life.