Refactor local variable name using Visual Studio Code

Question

Use rename symbol instead of the standard find/replace. Rename is bound to F2 by default.

Rename symbol will know to only touch the local roles references in your example. Visual Studio Code ships with rename support for JavaScript and TypeScript. Other languages may require installing a language extension.

Use Rename Symbol. It is defined by default with Ctrl + F2.

However, keep in mind that the variable, definition, function, etc., that you're changing, will be changed in the file itself, not only the scope. Visual Studio Code for now doesn't have an implementation for renaming a variable in a scope (for example, a variable inside a function). So keep that in mind.

Visual Studio Code - change all occurrences

For macOS users: Use Fn + ⌘ + F2 to rename a variable inside a code block.

To open your user and workspace settings, use the following Visual Studio Code menu command:

On Windows/Linux: Menu File → Preferences → Settings. On macOS: Code → Preferences → Settings.

You can also open the Settings editor from the Command Palette (Ctrl + Shift + P) with Preferences, open Settings or use the keyboard shortcut (Ctrl + ,).

In the search bar, enter keybindings.json, and add this below code:

{
  "command": "editor.action.changeAll",
  "key": "ctrl+f2",
  "when": "editorTextFocus && !editorReadonly"
}

and

{
  "command": "editor.action.rename",
  "key": "f2",
  "when": "editorHasRenameProvider && editorTextFocus && !editorReadonly"
}

In the keybindings.

F2 appears to work across all files, and Ctrl + F2 in the current file only.