10 Essential VS Code Tips to Boost Your Productivity

AICube opens GPT-4 and AI tool assistants to simplify prompt creation for image generation.

1. Timeline Feature: New Dimension of Source Code Control

Git and other version‑control tools let you track file changes and revert to previous versions. VS Code’s Timeline view automatically refreshes to show important activities related to the current file, including Git commits, file saves, and test runs.

Expanding the view displays a snapshot list of events associated with the file, such as saves and staged Git commits.

Hover over a snapshot to see the date and time VS Code created it.

Select a snapshot to view a diff that shows changes between the snapshot version and the current file.

2. Auto Save: Say Goodbye to Ctrl+S

Auto Save writes changes in real time while you edit, saving you the extra step of pressing Ctrl+S . It ensures you always work with the latest version of the file.

Although not perfect, the trade‑offs are explained in detail.

Enable it via File → Auto Save :

3. Command Palette: One‑Stop Operation Center

Almost every task in VS Code can be executed through commands—file operations, navigation, editing, terminal tasks, etc.

Open the Command Palette with the following shortcuts:

Windows/Linux: Ctrl+Shift+P Mac: Shift+Command+P

4. Quick File Access: No More Mouse

Press Ctrl+P to quickly search and open any file in the project. Ctrl+Tab lets you cycle through open editors.

Hold Ctrl and press Tab to loop through the open file list.

You can also use Alt+Left and Alt+Right to navigate between files faster than using the cursor.

5. Quick Jump: Debugging Speed King

Jump directly to a line number with Ctrl+G during debugging.

Use the Ctrl+G shortcut to open the “Go to Line” dialog.

6. One‑Click Delete: Bye‑Bye Tedious Operations

Press Ctrl+Shift+K to delete the current line instantly.

Many developers use this shortcut to remove single or multiple lines quickly.

7. Smooth Caret: Elegant Coding Experience

VS Code provides smooth cursor animation for a more natural coding flow.

Search for “smooth caret” in the settings to enable it.

Three options are available:

off – no animation

explicit – animate only when the cursor is explicitly placed

on – always animate, including during typing

Set it to on for the full visual effect.

8. Code Formatting: One‑Click Beautify

Press Shift+Alt+F to format code. It works especially well with the Prettier extension.

After installing Prettier, set it as the default formatter and enable “Editor: Format On Save”.

Editor: Format On Save formats the file automatically when you save, provided a formatter is available.

Keyboard shortcuts for manual formatting:

Windows: Shift+Alt+F

Mac: Shift+Option+F

Linux: Ctrl+Shift+I

Some users remap the shortcut to Ctrl+D for comfort.

9. Multi‑Cursor Editing: End Repetitive Tasks

Use Alt+Click to add multiple cursors for simultaneous editing.

Additional shortcuts:

Ctrl+Alt+Down / Ctrl+Alt+Up – add a cursor below or above the current line.

These invoke the “Add Cursor Below” and “Add Cursor Above” commands.

10. New File/Folder: Organize Project Structure Easily

Double‑click in the Explorer panel to create a new file or folder without hunting for a “New” button.

While typing a file name, use the / character to create nested folders on the fly.

Focus the Explorer pane first (e.g., Ctrl/Command+Shift+E ) before using these shortcuts.

Summary

Visual Studio Code is more than a powerful text editor; it is a comprehensive coding assistant. The ten tips above are just the tip of the iceberg. Continuous exploration and learning will improve code quality and make your development workflow far more efficient.