Rename refactor

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

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