javascript - How to rename a React component prop across all files? - Stack Overflow

admin管理员组

文章数量:1431717

I have some ponent like this

const Component = ({ oldPropName }) => ...

which I want to refactor to:

const Component = ({ newPropName }) => ...

and I want all occurrences of this oldPropName across all files to be changed automatically. Is there way to do this with VSCode?

Essentially same question can be asked as how to rename a destructured function parameter across the files without thinking about React ponents.

I have some ponent like this

const Component = ({ oldPropName }) => ...

which I want to refactor to:

const Component = ({ newPropName }) => ...

and I want all occurrences of this oldPropName across all files to be changed automatically. Is there way to do this with VSCode?

Essentially same question can be asked as how to rename a destructured function parameter across the files without thinking about React ponents.

• javascript
• reactjs
• visual-studio-code

Share Improve this question Follow asked Nov 7, 2021 at 16:26 wunnlewunnle 7911 silver badge55 bronze badges 6

• Why does search-and-replace not work for you here? – jmargolisvt Commented Nov 7, 2021 at 16:30
• Does this answer your question? How do I find and replace all occurrences (in all files) in Visual Studio Code? – Randy Casburn Commented Nov 7, 2021 at 16:32
• @jmargolisvt It doesn not because oldPropName may be a mon prop name like onClick. Search and replace will accidentally change prop names of irrelevant ponents. – wunnle Commented Nov 7, 2021 at 16:37
• @RandyCasburn Unfortunately not. See the ment above – wunnle Commented Nov 7, 2021 at 16:38
• According to your question, though, there are no irrelevant ponents. You want to make this change across all ponents. – Andy Commented Nov 7, 2021 at 17:08

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 2

F2 will change all variable occurrences in the code if you disable the following settings:

You can right click the oldPropName and there should be a "Rename Symbol" option or you can use F2. Some languages support rename symbol across files. Press F2 and then type the new desired name and press Enter. All usages of the symbol will be renamed, across files.

本文标签： javascriptHow to rename a React component prop across all filesStack Overflow