🌐 Available in other languages: Bahasa Indonesia | Français | Deutsch | 日本語 | 中文 | Español | Polski | Русский | Português | 한국어
A Visual Studio Code extension that helps you easily switch all paths in a file (HTML, CSS, JS, images, etc.) between relative paths
- 🔁 Automatically toggles between relative and absolute paths.
- 💡 Supports paths in:
<script src="...">
<link href="...">
<img src="...">
url("...")
inside CSS
- ⚡ Triggered via keyboard shortcut.
- 🧭 Changes all paths in a file at once.
- Minimum version: 1.85.0
- Tested on Windows, macOS, and Linux.
- Open Visual Studio Code.
- Go to the Extensions view (
Ctrl+Shift+X
). - Search for
Path Switcher
. - Click Install.
- Clone this repository:
git clone [clone https://github.com/fatonyahmadfauzi/Path-Switcher.git](https://github.com/fatonyahmadfauzi/Path-Switcher.git) cd Path Switcher npm install
- Open the folder in VS Code.
- Press F5 to launch the Extension Development Host.
Command Name | Command ID | Shortcut |
---|---|---|
Toggle Relative |
path-switcher.togglePath |
Ctrl + Alt + P |
Before:
<script src="js/meta-update.js"></script>
<link rel="stylesheet" href="css/style.css" />
<img src="assets/logo.png" />
After (Absolute):
<script src="/js/meta-update.js"></script>
<link rel="stylesheet" href="/css/style.css" />
<img src="/assets/logo.png" />
After (Relative):
<script src="js/meta-update.js"></script>
<link rel="stylesheet" href="css/style.css" />
<img src="assets/logo.png" />
Compile TypeScript:
npm run compile
Lint code:
npm run lint
Run tests:
npm test
- Fork the repository.
- Run
npm install
to install dependencies. - Make your changes.
- Compile TypeScript:
npm run compile
. - Test in VS Code (press F5 → Extension Development Host).
- Submit a Pull Request.
Report issues on the GitHub Issues page.
MIT License © Fatony Ahmad Fauzi