Yahoo
Skip to main content
Advertisement
Advertisement
Advertisement
Advertisement

5 VS Code features that save me time every day

An integrated developer environment and the VS Code logo in the center.
Lucas Gouveia/How-To Geek | Mix3r/ Shutterstock

I use VS Code almost every day. One thing that sticks with me about it is that it can do so much heavy lifting for you. Doing repetitive edits? Searching for files in the sidebar? Retyping the same boilerplate for the hundredth time? VS Code can ease all these for you. Let's dive in to see how.

Multi-cursor editing

One of the most counterproductive tasks you could do while programming is editing the same thing again and again. Suppose a variable name appears 12 times. A CSS class needs to be updated in 8 places. You change it once, then hunt for the next occurrence, then the next. Until your focus is completely gone, it's an annoying task that keeps adding up.

Instead of editing one place at a time, VS Code lets you place multiple cursors and type in all of them simultaneously. Every keystroke is mirrored across all cursors, which means repetitive edits suddenly take seconds instead of minutes.

Advertisement
Advertisement

The simplest way to get started is by adding cursors manually:

  • Windows / Linux: Hold Alt and click where you want a new cursor

  • macOS: Hold Option and click

For smarter selections, place your cursor on a word and press:

  • Ctrl + D (Windows/Linux) or Cmd + D (macOS) to select the next matching occurrence

  • Ctrl + Shift + L (Windows/Linux) or Cmd + Shift + L (macOS) to select all occurrences at once

All instances of the word 'data' with a cursor behind in VS Code.

Once the cursors are in place, just type. VS Code does the rest. Multi-cursor editing is perfect for refactoring variables, editing repetitive markup, or cleaning up messy data. If you go a little too far, pressing Esc will bring you back to a single cursor instantly.

Quick navigation between files

Every project starts small. Then suddenly you're working in a codebase with dozens or hundreds of files. Controllers, services, components, utils, configs. And you're constantly bouncing between them. You open the file explorer, scroll, expand folders, lose track of where you were, and repeat the process.

Advertisement
Advertisement

VS Code gives you faster ways to jump between files without ever touching the mouse. The secret weapon here is Quick Open. It lets you search and open any file in your project almost instantly, using just your keyboard.

Open it with Ctrl + P (Windows/Linux) or Cmd + P (macOS). Start typing part of the file name. VS Code uses fuzzy matching, so you don't need the exact name. Hit Enter to open the file.

Searching and navigating to file using the Quick Open in VS Code.

You don't need to stop there. If you want to search for symbols, functions, or classes, type @ in the Quick Open menu while the file you want to go to is selected, and you'll get a list of those to jump to.

Another useful shortcut I like is navigating between the open tabs. To jump to a tab, you can use Alt + tab number (1,2,3...) on Windows and Ctrl + tab number on macOS. If you want to cycle through them, use Ctrl + Tab. This is useful when you have a few files open, and you don't want to use the mouse every time.

Preview Markdown files

Writing Markdown without a preview is a bit like coding without running your app. You know it should work, but you're constantly guessing how it will actually look.

Advertisement
Advertisement

VS Code solves this by letting you preview Markdown files directly inside the editor, side by side with your source. You write on one side, see the rendered result on the other, and stay completely in flow.

To preview a Markdown file in VS Code, open a Markdown file. Launch the preview with Ctrl + Shift + V (Windows/Linux) or Cmd + Shift + V (macOS.) If you want to see the preview and raw file side by side, hit Ctrl + K then V.

Editing and previewing a Markdown file in VS Code side by side.

As you type, the preview updates in real time, showing exactly how your Markdown will render.

Rename symbols in the whole file

Renaming things is deceptively dangerous. You change a variable name in one place, then spend the next few minutes hunting for every other reference, hoping you don't miss one. Even worse, a careless find-and-replace can rename things it shouldn't, leaving behind subtle bugs that only show up later.

Advertisement
Advertisement

VS Code takes the risk out of this with symbol renaming. Instead of blindly replacing text, it understands your code and renames the symbol everywhere it's actually used. Place your cursor on the variable, function, or symbol you want to rename and press F2. Type the new name and press Enter.

Renaming a variable in VS Code using the F2 shortcut.

VS Code instantly updates every valid reference in the file (and often across the project, depending on language support.)

Use code snippets

There's a special kind of frustration that comes from typing the same boilerplate code over and over again. A React component , a try/catch block, a for-loop, and a test setup. You already know how it looks, but your fingers still have to do all the work.

Code snippets turn that repetition into a shortcut. Snippets let you generate entire blocks of code from a few keystrokes. They're smart, fast, and customizable.

Advertisement
Advertisement

VS Code ships with built-in snippets for many languages. Just start typing something familiar and press Tab when the suggestion appears. In other cases, you can find extensions for languages or frameworks you're working with.

But the best part about snippets is that you can create your own. Open the Command Palette (Ctrl + Shift + P / Cmd + Shift + P) and search for Configure Snippets. You can either create a global snippet or choose a language.

Creating code snippets in VS Code for different programming languages.

Once saved, your custom snippets are available everywhere.


That was my 5 favorite tricks that remove friction and save a ton of time, so I can focus more on writing good code and using programming techniques . There are also many great VS Code extensions to take your productivity to the next level.

Advertisement
Advertisement
Mobilize your Website
View Site in Mobile | Classic
Share by: