VSCode editor navigation and workflow for developers
blog

Surf through your codebase with precision

Master files and zones navigation 🏄🏼‍♀️

Editor Workflow
VSCode editor navigation and workflow for developers

Master VSCode navigation with precision. Learn to move between editor zones, manage tabs efficiently, and navigate files like a pro developer.

4 min read

Author: Aridane Martín
Tech Lead – Pandora Project | Software Developer
Talk: Boosting Productivity: Shortcut your coding

Navigating inside the editor efficiently saves countless hours. In this guide I will propose you a way of transforming your VSCode navigation from lost tabs to precise motion.

🎯 Goal: Navigate your codebase with surgical precision, never losing your place or context.

Move Between Editor Zones

Master the art of moving between different areas of VSCode without touching your mouse.

Editor zones in VSCode

Essential Zone Shortcuts

Open/close the file explorer panel:

Cmd + Shift + E (Explorer)

Open/close the source control panel:

Cmd + Shift + G (Git)

Open/close the global search panel:

Cmd + Shift + F (Find)

Open/close the bookmarks panel:

Cmd + Shift + B (Bookmarks)

Open/close the GitHub Copilot panel:

Cmd + Shift + I (Intelligence)

💡 Quick Tip: These shortcuts work as toggles - press once to open, press again to close the panel.

Move Between Files

Navigate your codebase with precision moving through the files using Quick Open, definition and references. F12 navigation shortcuts in VSCode

Cmd + P            Quick Open
Cmd + F12          Go to definition (Goes to the place where the symbol is defined)
Cmd + Shift + F12  Find all references (Displays a list of all the places where the symbol is used)

here you have 3 examples of different ways of navigating to a file:

The Explorer-First Pattern

  1. Start with Explorer - Cmd + Shift + E
  2. Navigate to folder - Use arrow keys
  3. Create/open files - Use Cmd + N and write the path of the file or Enter

The Search-First Pattern

  1. Quick Open - Cmd + P
  2. Type filename - Fuzzy search
  3. Open file - Enter

The Terminal-First Pattern

  1. Open Terminal - `Ctrl + “
  2. Navigate directory - Use cd commands
  3. Create files - Use touch or mkdir
  4. Open in VSCode - Use code . or code filename (code command needs to be previously installed)

Tab management

Create easily recordable commands to close and open tabs as needed. Remember that this type of commands are used in many applications, try to share these shortcuts to remember them more easily.

Ctrl + Tab / Ctrl + Shift + Tab  Move between open editors
Cmd + W                         Close tab
Cmd + shift + W                Close all tabs
Cmd + Shift + O                 Close OTHER tabs
Cmd + Shift + T                 Reopen closed tab (Same as chrome browser)

Create Files Quickly

Master the art of creating files and folders without leaving your keyboard. When creating new files use ‘create file’ command (never ‘create folder’) and type the full nested path. This will allow you to create the file and the folders in one go.

File Creation Workflow

  1. Use Cmd + Shift + E - Open explorer
  2. Use Cmd + N - Create new file
  3. Type full path including type extension - Include all parent directories
grandparent/parent/newFile.ts

Wrap Up

Mastering editor flow is about understanding your codebase structure and navigating it efficiently. Focus on:

  • Zone navigation - Move between different areas of VSCode fluently
  • File navigation - Find and open files quickly
  • Tab management - Keep your workspace organized
  • File creation - Create files and folders efficiently

© Aridane Martín – 2025