# 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

{% tabs %}
{% tab title="Exercise" %}

* 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`
  {% endtab %}

{% tab title="Answer" %}

* Export the `App` class from the "app.js" file.

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-LlvtJMfPaOZK9HU1qdu%2F-Lm06T2flNpRywL_1j4h%2Fimage.png?alt=media\&token=95fd47c3-e18b-4a49-8c87-863493ea5f10)

* 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

{% endtab %}
{% endtabs %}

{% hint style="info" %}
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.**
{% endhint %}

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-LlvtJMfPaOZK9HU1qdu%2F-Lm07uZa4DzhnTfajaXW%2Fimage.png?alt=media\&token=256e7abb-ba0c-4aad-a528-308533d94255)