Skip to content

VS Code extension to instantly toggle all file paths between relative and absolute. Supports `src`, `href`, and CSS `url()` attributes across the entire file with a single command.

License

Notifications You must be signed in to change notification settings

fatonyahmadfauzi/Path-Switcher

Repository files navigation

🪄 Path Switcher

VS Code Version License: MIT Build Status Repo Size Last Commit Installs Downloads Rating

🌐 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 ↔️ absolute paths with just one keyboard shortcut.


✨ Features

  • 🔁 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.

✅ Supported VS Code Versions

  • Minimum version: 1.85.0
  • Tested on Windows, macOS, and Linux.

🧩 Installation

From Marketplace (Recommended)

  1. Open Visual Studio Code.
  2. Go to the Extensions view (Ctrl+Shift+X).
  3. Search for Path Switcher.
  4. Click Install.

For Development (from Source Code)

  1. 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
  2. Open the folder in VS Code.
  3. Press F5 to launch the Extension Development Host.

⌨️ Commands & Shortcuts

Command Name Command ID Shortcut
Toggle Relative ↔️ Absolute path-switcher.togglePath Ctrl + Alt + P

🧠 Example

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" />

🛠️ Development

Compile TypeScript:

npm run compile

Lint code:

npm run lint

Run tests:

npm test

🧑‍💻 Contributing

  1. Fork the repository.
  2. Run npm install to install dependencies.
  3. Make your changes.
  4. Compile TypeScript: npm run compile.
  5. Test in VS Code (press F5 → Extension Development Host).
  6. Submit a Pull Request.

🐞 Bugs & Issues

Report issues on the GitHub Issues page.


🧾 License

MIT License © Fatony Ahmad Fauzi

About

VS Code extension to instantly toggle all file paths between relative and absolute. Supports `src`, `href`, and CSS `url()` attributes across the entire file with a single command.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published