✏️ Power Rename

Rename a folder and all matching files inside — automatically. Updates imports, class names, selectors, and references across your entire project.

💡 Why Power Rename?

Every component-based framework follows the same pattern: a folder with files that share its name.

home/
  home.component.ts
  home.component.html
  home.component.scss
  home.component.spec.ts

Renaming home to dashboard means renaming the folder and every file inside, then hunting down every import, selector, and class reference across the project. Manually. One by one.

Power Rename does all of this in a single action. Right-click, type the new name, done. Works with Angular, React, Vue, Svelte, Next.js, Nuxt — any framework, any language.

✨ Features

📁 Rename folder + all matching files

Right-click any folder in the Explorer and select "Power Rename: Rename Folder & Files". Every file whose name starts with the folder name gets renamed automatically.

Before:                          After:
home/                            dashboard/
  home.component.ts       →       dashboard.component.ts
  home.component.html     →       dashboard.component.html
  home.component.scss     →       dashboard.component.scss
  home.component.spec.ts  →       dashboard.component.spec.ts

🔍 Auto-detect folder renames

Rename a folder the normal way (F2 in the Explorer) — Power Rename detects it and offers to rename the files inside. No extra clicks needed, just confirm.

🔗 Update imports across the project

All import, require(), dynamic import(), and CSS @import statements referencing the old paths are updated automatically.

// Before
import { HomeComponent } from './home/home.component';

// After
import { DashboardComponent } from './dashboard/dashboard.component';

📝 Update file contents

Class names, Angular selectors, CSS classes, and camelCase references inside the renamed files are updated too.

What	Before	After
Angular selector	`app-home`	`app-dashboard`
Component class	`HomeComponent`	`DashboardComponent`
CSS class	`.home-container`	`.dashboard-container`
camelCase ref	`homeService`	`dashboardService`

👁️ Preview before applying

See exactly what will change before anything is modified. Review file renames, content changes, and import updates — then apply or cancel.

⏪ Atomic undo

All changes (file renames + content edits + import updates) are applied as a single WorkspaceEdit. One Ctrl+Z undoes everything.

🖱️ Rename from file context

Right-click any file and select "Power Rename: Rename This Component" — it renames the parent folder and all sibling files that share the folder name.

🌍 Supported Frameworks

Power Rename is framework-agnostic. It works with any project structure where files share the folder name:

Framework	Typical pattern
Angular	`name.component.ts`, `name.module.ts`, `name.service.ts`, `name.spec.ts`
React	`Name.tsx`, `Name.test.tsx`, `Name.styles.ts`, `Name.stories.tsx`
Vue	`Name.vue`, `Name.spec.ts`
Svelte	`Name.svelte`, `Name.test.ts`
Next.js / Nuxt	Works with any of the above
Plain TypeScript/JavaScript	Any `name.*` pattern
CSS/SCSS/SASS/Less	`name.module.css`, `name.styles.scss`

🧠 How It Works

Scan — reads the folder contents and finds all files whose name starts with the old folder name
Compute — builds the list of file renames, content replacements (PascalCase, camelCase, kebab-case), and import path updates
Preview — shows all planned changes for your review (optional, configurable)
Apply — executes everything as a single atomic WorkspaceEdit
Done — one Ctrl+Z to undo if needed

⚙️ Settings

Setting	Default	Description
`smartRename.autoRenameOnFolderChange`	`true`	Auto-detect folder renames and offer to rename files inside
`smartRename.updateImports`	`true`	Update import paths and references across the project
`smartRename.updateFileContents`	`true`	Update class names, selectors, and references inside files
`smartRename.showPreview`	`true`	Show a preview of all changes before applying
`smartRename.filePatterns`	(see below)	Glob patterns for files to consider when renaming
`smartRename.excludeFolders`	`["node_modules", ".git", "dist", "build", ...]`	Folders to exclude when scanning for import references

Default file patterns

[
  "*.component.ts", "*.component.html", "*.component.css", "*.component.scss",
  "*.component.sass", "*.component.less", "*.component.spec.ts",
  "*.module.ts", "*.service.ts", "*.service.spec.ts",
  "*.directive.ts", "*.pipe.ts", "*.guard.ts", "*.resolver.ts", "*.interceptor.ts",
  "*.stories.tsx", "*.stories.ts",
  "*.test.ts", "*.test.tsx", "*.test.js", "*.test.jsx",
  "*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx",
  "*.styles.ts", "*.styles.css", "*.styles.scss",
  "*.module.css", "*.module.scss",
  "*.tsx", "*.ts", "*.jsx", "*.js", "*.vue", "*.svelte", "*.html", "*.css", "*.scss", "*.sass", "*.less"
]

🚀 Installation

Search Power Rename in the VS Code Extensions panel, or:

code --install-extension danilodevsilva.power-rename

📖 Usage

Option 1: Right-click a folder

Right-click any folder in the Explorer sidebar
Select "Power Rename: Rename Folder & Files"
Type the new name
Review the preview and confirm

Option 2: Right-click a file

Right-click any file in the Explorer sidebar
Select "Power Rename: Rename This Component"
Type the new name
The parent folder and all sibling files are renamed

Option 3: Just rename the folder normally

Select a folder and press F2 (or right-click → Rename)
Type the new name
Power Rename detects the change and asks if you want to rename the files inside

Option 4: Command Palette

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Search for "Power Rename"
Choose one of the available commands

🤝 Contributing

Contributions are welcome! See CONTRIBUTING.md for development setup and guidelines.

💬 Feedback & Issues

Found a bug or have a feature request? Open an issue on GitHub.

If this extension saves you time, consider leaving a review on the Marketplace — it really helps!

📄 License

MIT

Power Rename

Danilo Agostinho