VSCode Livewire Language Support

Vittorio Emmermann 3 months ago Follow on Twitter

IDEs are the daily landscape we're looking on. Enhancing this personal landscape it day-by-day is essential. There are so many extensions and settings you can customize, and you should do it. Why? Because every developer has other needs. Every coding-style is different.

If you're using Livewire, you'll fastly recognize that VSCode is highlighting it with a dangerous red color (if you're using <livewire:.../> tags) and doesn't help you with auto-completes. Working with it this way was quite annoying for me. I think one big reason is that I recently migrated from PhpStorm to VSCode, and I miss so or so some helpers while coding. Because of that, I started with Cierra, an Extension for VSCode for Livewire language support.

Here you can check it out and install it: Livewire Language Support

What are the Features?


You have some snippets for the default directives like @livewire, @livewireScripts, @livewireStyles

Component Auto-Discovery

If you want to mount a component, you get hints for what components are available in your project:

Properties Auto-Fill

If you have in your `mount()` function some parameters, they will be automatically written into the component:

We'll improve this package further. So stay tuned!

Do you want to stay up to date?

I'll never spam you, I swear. My newsletter will be send all 2 or 3 weeks with some interesting things for you.

Also you can follow me on twitter where I post recent learnings, hints and comments.

Imprint Data privacy Contact