VSCode/Docs/User Guide/Code Navigation

• Code Navigation in Visual Studio Code

• #Keyshort for #VSCode - VSCode/Code Navigation

  • Quick file navigation

    • view a list of all files open in an VSCode/Editor/Group and then open one #card

      • hold Ctrl and then press Tab to view a list of all files open in an editor group
        • 
      • While still holding Ctrl, press Tab to select the file below
      • Release Ctrl to open the file
      • *How to remember: * it's very similar to Ctrl+Tab and Ctrl+Shift+Tab in old internet explorer

    • navigate forwards and backwards between files and edit locations like Ctrl+] in PyCharm and Vim #card

      • Ctrl - and Ctrl Shift -

      • Alternatively, you can use ⌃- and ⌃⇧- to navigate between files and edit locations.
        

      • note: this will navigate within a file as well as between files
      • VSCode/Keymap
        • json

          {
            "key": "ctrl+-",
            "command": "workbench.action.navigateBack",
            "when": "canNavigateBack"
          }

  • Breadcrumbs

    • use the drop-down menu in the breadcrumbs to navigate to another folder higher up

      • 

    • you can customize display of breadcrumbs

      • If you have very long paths or are only interested in either file paths or symbols paths, you can use the breadcrumbs.filePath and breadcrumbs.symbolPath settings
        

        • These support on, off, last
        • The symbols here are the TS for typescript in the image above

    • Breadcrumb keyboard navigation

      • how to focus breadcrumbs and interact with them for navigation #card

        • Cmd Shift Semicolon to focus the breadcrumbs, then left and right arrows, then typing names

        • use the Focus Breadcrumbs command or press ⇧⌘;
          

        • It will select that last element and open a dropdown that allows you to navigate to a sibling file or symbol.
          

        • Use the ← and → keyboard shortcuts to go to elements before or after AKA up the hierarchy or down the hierarchy of the current element.
          

        • Press Down to open the items in that dir. When the dropdown appears, start typing - all matching elements will be highlighted and the best match will be selected for quick navigation.
          

    • Go to definition - if a programming language is set up #card

      • If a programming language like python supports it [in VSCode], you can go to the definition of a symbol by pressing F12.
        

      • Mnemonic: the other related command, Go to Implementation is Cmd F12, which is a modifier of going to the Definition (rather than the concrete implementation)

    • Get a preview of the declaration #Mouse #card

      • Cmd and hover over symbol
      • 
      • see also create a milestone for learning #Py in #VSCode: TODO VSCode/Proj/24t3/LearnVSCode/03 Basic Python
      • Changelog:
        • Mon, 2024/12/30 updated to Cmd; Ctrl is for Windows

    • Jump to definition or open definition to the side #Mouse #card

      • You can jump to the definition with Cmd+Click or open the definition to the side with Cmd+Opt+Click.
        

    • Go to Implementation #card

      • Cmd F12
      • Requires one a programming languages to be set up - see VSCode/Docs/Languages/Overview
      • Note: this is different from Go to Definition because Go to Implementation is for finding how a method is implemented in specific subclasses vs Go to Definition which looks up where the current symbol is located - according to ChatGPT/GPT/VS Code Copilot here
      • Mnemonic: F12 is Go to Definition, and Cmd F12 is a modifier to go to the Concrete Implementations

    • Navigate programming language symbols in a file, group by category #card

      • Shift Cmd O (that's capital O as in Open)
      • Typing colon will group them by category
      • Navigate Up or Down to navigate to place
      • 
      • How to Remember: this is similar to PyCharm's open Object Cmd Shft O, and this could be used to browse objects in the current file.

    • Open Symbol by Name #card

      • Cmd T
      • 
      • Mnemonic - the letter T is a picture of a road going up to a point where you have to pick whether to turn right or left, which is just like the situation you are in when you switch from browsing by file to browsing by symbol