Finding things

The ability to quickly find what you are looking for is essential to being productive in VS Code. As your code grows, so does the difficulty in keeping it all organized. VS Code has two main features that will help you move effortlessly through your code and right to what you're looking for.

Find

The main Find function in VS Code is triggered with Cmd/Ctrl + F. You can use this search box to find any string you are looking for. You can also add multiple cursors to all found instances directly from the Find box.

You can also use it to find things using regular expressions. You don't need to fully understand regex to use this feature to great effect.

Exercise

The images in this project have been moved to a subfolder called "images". For that reason, all image references in "index.html" are now broken.

Find all instances of images in the "index.html" file and prefix them with "images/"

Answer

• Open the "index.html" file

• Press Cmd/Ctrl + F

• Type "png|jpeg" in the search box

• Select the Regular Expression modifier

• Press Opt/Alt + Enter to add a cursor to every found occurrence

• Press Cmd/Ctrl + Opt/Alt + Left Arrow to move the cursor to the beginning of the image path

• Enter "images/"

Symbol Browser

The other way to find things is with the Symbol Browser. This is accessed the same way that the Command Palette is (Cmd/Ctrl + Shift + P).

To activate it, remove the ">" character and replace it with "@".

Notice that all the tags are listed in the HTML document. You can jump between them by arrowing through this menu. If you scroll down you'll see that if you provided a class or an ID for an element, those are displayed in the Symbol Browser.

The Symbol Browser is most useful in code files. Open the "app.js" file and then open the Symbol Browser. This time put a ":" after the "@" sign to group by classes, functions, methods and variables.