Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax highlighting for @event= attributes not working on Laravel Blade files #1

Open
farmerpaul opened this issue Mar 8, 2022 · 2 comments

Comments

@farmerpaul
Copy link

farmerpaul commented Mar 8, 2022

This extension doesn't seem to be working with the Laravel Blade file type for VS Code. I use the extension shown below to highlight the rest of my Blade files, and I was hoping alpinejs-syntax-highlight would highlight all my AlpineJS attributes as well, but no dice. Is there a way I can add Blade files to its list of recognized file types?

Edit: There is an issue with highlighting Alpine code in Blade files – it doesn't seem to work on the @event= attribute format.

Name: Laravel Blade Snippets
Id: onecentlin.laravel-blade
Description: Laravel blade snippets and syntax highlight support
Version: 1.32.0
Publisher: Winnie Lin
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade

@Sperovita
Copy link
Owner

Adding new file types is fairly simple.

They're added here. Those entries are textmate scopes. You can see those by adding a keybind to vs codes keybinds.json.

{
    "key": "ctrl+alt+shift+i",
    "command": "editor.action.inspectTMScopes"
}

Can use whatever key you want, though that will show the textmate scopes, when used in the desired file, to add to injectTo.

You would need to also add the textmate scope here

Since it's setup to work on php files it seems to work in blade.php in my test. Albeit if you put blade syntax inside of an x attribute it's syntax highlighting is a bit off with my current extensions. It still separates tokens for the most part though, even if it is off from what it looks like outside of an x attribute.

image

The main issue I see with the Laravel Blade Snippets compatibility is the @ shorthand for x-on:. It seems to be due to that extension changing the scope on @something= like in the example above. It's done here in their extension. Removing that actually makes my extension work, though breaks some of their functionality of course.

I'm no expert on texmate syntax files, mines based a lot off of vueter's and some vs code docs on it. There may be some improvements on my implementation that could allow me to override the Laravel Blade Snippet scope change. I've tried a few things with no luck so far.

Alternative workaround for now would be to use the x-on: instead of @. Albeit that's not ideal to change your code base for highlighting. I personally prefer the shorthand.

If you're having issues with x- attributes too, maybe send a snippet, screenshot and/or the file extension for your blade files.

I'll keep looking into @ issue, though it may take a bit.

@farmerpaul
Copy link
Author

Hey @Sperovita, thanks for looking into that so quickly and thoroughly and sending me all that info. It turns out it was just the @event syntax that wasn't working, I guess I'd just done a very cursory check in a file where that was the only type of attribute used. I should have done a little more testing ahead of time!

So I agree, I'd prefer not to have to change my code to switch to x-on syntax everywhere. I'll modify the ticket title accordingly. I understand if it'll take you some time! Thanks again.

@farmerpaul farmerpaul changed the title Not working on Laravel Blade files Syntax highlighting for @event= attributes not working on Laravel Blade files Mar 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants