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

Was this helpful?

  1. Exercise 3 - Navigation And Refactoring

Rename refactor

PreviousMultiple cursorsNextFinding things

Last updated 5 years ago

Was this helpful?

In the previous "Multiple Cursors" exercise, we renamed a variable using multiple cursors. This is a bad idea. It is highly likely that you 1) won't get all instances of the variable and 2) it doesn't take care of instances in other files.

VS Code includes a powerful refactoring capability called "Rename". It allows you to rename a variable, method, class, ect and all references will be updated. Even if they are in another file.

Update the app class name

  • Export the App class from "app.js"

  • Create a new file called "main.js"

  • Import the App class and initialize it.

  • Rename the App class in "index.html" Application

  • Export the App class from the "app.js" file.

  • Create a new file called "main.js" in the "src" folder.

  • In the "main.js" file, import the App class and initialize it.

import App from "./app";
let app = new App();
  • Highlight the App class declaration in the "app.js" file

  • Press F2

  • Rename to Application

  • Notice that the reference in "main.js" is also updated

Note that if you want to see all references in your project for a specific object, put your cursor on it and press Shift + F12.