Refactor rename file + rename function

[natew]

Search Terms

Rename refactor move file filename and function name matching

Suggestion

We have a really common pattern: A file of name MyFile.tsx and a matching function of the types:

export default function MyFile() {}
export function MyFile() {}
export const MyFile = () => {}

Use Cases

I find myself constantly doing a two part refactor. First refactor the function, then refactor the filename. Combining the two would save quite a lot of time and encourage better naming everywhere.

[mjbvz]

The export default case is tracked by #29294

For normal exports, is the expectation that if the export name before rename matches the file name, we would rename the file?

[yortus]

It's also a common practice for all filenames to use lower kebab-case to avoid cross-platform case-handling issues. In that case a file whose main export is export function doStuff() {...} would be called do-stuff.ts.

Would be nice to consider this pattern too if this refactor is implemented.

[astoilkov]

I was an Atom user, then VSCode user, and for the past 2-3 years I've been a WebStorm user. I transitioned to WebStorm primarily because of the refactoring power it had. In these past years, VSCode has closed the gap. I'm now looking back to returning to VSCode.

In WebStorm, it works both ways:

• renaming the file, suggests renaming the export with the same name
• renaming an export with the same name as the file, suggests renaming the file

I think that WebStorm doesn't look if it's a default or named export. I believe it just searches a function/variable with the same name. Not sure if it supports kebab-case.

Does someone know an extension that can do that? Maybe this will be enough for now.