VS Code Can Do That - Workshop
Main
Main
  • VS Code Can Do That Workshop
  • Essential Keyboard Shortcuts
  • Exercise 1 - Customizing The Editor
    • Customizing The Editor
    • Switch themes
    • Install a new icon theme
    • Switch fonts
    • Editor tweaks
    • Change default Settings view
    • Easily identify editor instances
  • Exercise 2 - Productivity Tricks
    • Productivity Tricks
    • Essential navigation shortcuts
    • Creating HTML with Emmet
    • Styling with Emmet
    • Update image sizes
  • Exercise 3 - Navigation And Refactoring
    • Navigation And Refactoring
    • Moving, Duplicating and Deleting
    • Folding sections
    • Multiple cursors
    • Rename refactor
    • Finding things
    • Extract refactor
  • Exercise 4 - Debugging
    • Debugging
    • Simple debugging
    • Simple launch config
    • Auto attach
    • Debugging browser apps
    • Compound debug configurations
  • Exercise 5 - Docker
    • Docker
    • Dockerizing an application
    • Running and inspecting images
    • Docker compose
    • Debugging Docker containers
  • Exercise 6 - Remote Development
    • Remote Development
    • Create a remote container
    • Create a new function in the container
    • Handling extensions
  • Exercise 7 - Working With Data
    • Working with data
    • Working with MongoDB
    • Working with SQLite
    • Working with MySQL
  • Exercise 8 - Git and Source Control
    • Git and source control
    • Cloning repos with VS Code
    • Common Git workflows
    • Branching and merge conflicts
Powered by GitBook
On this page
  • Find
  • Symbol Browser

Was this helpful?

  1. Exercise 3 - Navigation And Refactoring

Finding things

PreviousRename refactorNextExtract refactor

Last updated 5 years ago

Was this helpful?

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.

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/"

  • 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.