Refactor local variable name using Visual Studio Code

I have this simple situation. I'd like to refactor the name of the role variable:

It looks like Visual Studio Code is smart enough to know that "roles" in the URL should not be touched.

I just want to refactor the name of the variable in a single file, in a single scope, not the whole file and definitely not multiple files!

If I use Ctrl + H, it will bring me to a menu which by default refactors the name in multiple files or a whole single file, but I just want to refactor the name in a single function scope!

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.