Editing and code navigation in VS Code

While writing code, developers are often working with several files at the same time. Quickly navigating between files or within the same file is an important feature.

VS Code offers multiple options for code navigation—let's explore them one by one.

Go to line

To move the cursor to a particular line and column, use the Goto (:) Line command, as illustrated in the following screenshot:

Figure 1.43 – Using the command palette to move cursor to a line and column

Go to symbol

To show the symbols used in your code and to navigate directly to a selected symbol, you can use Go to Symbol (@) in a File.

Also, while you are traversing, VS Code will highlight the code section, as illustrated in the following screenshot:

Figure 1.44 – Using the command palette to jump to a section of code

In the case of JavaScript, the command palette will show methods, as illustrated in the following screenshot:

Figure 1.45 – Jump to code section in a JavaScript example

Using commands for navigation

Here are some useful commands for quick code navigation:

• Ctrl/Command + F12： Use this command to select an object and jump to its implementation.
• Ctrl/Command + Shift + F12： This is a quick way to peek into an implementation. The pop-up window also allows code editing. This is illustrated in the following screenshot:

Figure 1.46 – Peek into an implementation

The preceding screenshot shows an example where the ProductDetailComponent implementation is open in Quick Peek mode.

Navigating between files

VS Code provides multiple options for navigating between different files. Let's assume you have a bunch of files open in your editor. To select a particular file from currently opened files, hold Ctrl and then press Tab. VS Code will open a list of files, and you can move your selection by holding Ctrl and pressing Tab. An example list of files can be seen in the following screenshot:

Figure 1.47 – Files listed for navigation

Apart from using Ctrl (hold) + Tab, you can also sequentially switch between multiple files opened in the editor.

Use Alt/Option + Right Arrow or Alt/Option + Left Arrow to switch from one file to other opened files.

Commenting code

Last but definitely not least, how to quickly comment and uncomment code by using the following keyboard shortcuts:

• Ctrl/Command + K then C： Use this command to comment a line.
• Ctrl/Command + K then U： Use this command to uncomment a line.