Blade Path Navigator - VSCode Extension

Overview

Blade Path Navigator is a Visual Studio Code extension designed to simplify navigation between Blade template files in Laravel projects. With this extension, developers can quickly jump to the file paths referenced by Blade directives such as @include, @extends, @component, and more, without the hassle of manually browsing directories.

Features

• Automatic Path Detection: Detects paths inside Blade directives like @include('...'), @extends('...'), @component('...'), and others.
• Ctrl+Click Navigation: Click on the paths while holding Ctrl (or Cmd on macOS) to instantly navigate to the corresponding Blade file.
• Dynamic Path Handling: Automatically constructs paths based on your Laravel project structure (resources/views/ folder).
• Real-Time Updates: Detects newly added Blade directives even as you type, ensuring the paths remain clickable.

Supported Blade Directives

The extension supports the following Blade directives:

• @include
• @includeIf
• @includeWhen
• @includeFirst
• @extends
• @component
• @each

How It Works

When you open or modify a Blade template file in your Laravel project, the extension will detect any of the supported Blade directives. It will convert the paths within those directives into clickable links that navigate you to the corresponding Blade file when you press Ctrl + Click.

For example, given the following code:

@include('include.sections.cards.top-filter')

The extension will:

• Extract the path: include.sections.cards.top-filter
• Convert it to a relative path: resources/views/include/sections/cards/top-filter.blade.php
• Allow Ctrl+Click Navigation: Directly navigate to the target Blade file when you click on the path.

Installation

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
3. Search for Blade Path Navigator.
4. Click Install.

Usage

1. Open a Blade file (*.blade.php) in your Laravel project.
2. Hover over any path inside Blade directives (e.g., @include, @extends, etc.).
3. Hold Ctrl (or Cmd on macOS) and click the path to instantly navigate to the corresponding Blade file.

Example

@extends('layouts.app')

@include('partials.header')

@component('components.alert')
@endcomponent

For the above code, you'll be able to navigate to:

• resources/views/layouts/app.blade.php
• resources/views/partials/header.blade.php
• resources/views/components/alert.blade.php

Requirements

• Laravel Project Structure: The extension assumes that the Blade files are located under the resources/views/ folder of your Laravel project.
• Visual Studio Code version ^1.93.0.

Known Issues

• If the path structure is non-standard or if the Blade directive contains variables (dynamic paths), the extension may not correctly resolve the path.
• The extension doesn't currently support non-standard Blade directive names (custom user-defined directives).

Contribution

Contributions, issues, and feature requests are welcome! Feel free to check the issue tracker.

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.