How to enable for non *.html files?

[georgeboot]

How can I use this extension in non .html files, like .php?

We use Laravel Blade views, and vscode understands blade files are html with some mixins. But this plugin doesn't activate unfortunately.

How can I get that to work?

[AdrianWilczynski]

If it doesn't work out of the box then I don't think you can. This plugin uses a built-in custom data contribution point (https://code.visualstudio.com/api/extension-guides/custom-data-extension) - it's really just a JSON file with Apline's attributes defined in it.

It could be maybe rewritten to use custom CompletionItemProvider though. I think it would be simple if you're okay with directives showing up in completion list everywhere - not only within HTML tags. With custom data you kinda get parsing & hovers for free - you don't have to implement it yourself or settle for a simpler version.

I think some simple CompletionItemProvider could maybe be added as workaround/compatibility for cases like that.

It's kinda surprising to me that it doesn't work because it works in Razor (templating language in .NET). I think it might be a matter of how C# and PHP extensions implemented HTML support? Did you maybe check if it works with some different PHP extension (I see there are at least two)?

[fredericseiler]

I also tried with Blade, no results.

Does it need something like a customData/blade.json with the same content as html.json? A nightmare to maintain, I guess.

I tried to understand how Tailwind CSS IntelliSense does its magic, but... :sweat_smile:

Edit : isn't it just this ?

https://github.com/AdrianWilczynski/AlpineIntelliSense/blob/ca50dffef36fa329d93bfc14c71aa1aca86c2001/package.json#L28-L40

Something like this ?

"contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/html.json"
            },
            {
                "language": "blade",
                "path": "./snippets/html.json"
            }
        ],
        "html": {
            "customData": [
                "./customData/html.json"
            ]
        },
        "blade": {
            "customData": [
                "./customData/html.json"
            ]
        }
    }

[AdrianWilczynski]

Snippets could work like this but I don't think that Custom Data would (it seems to be only for HTML and CSS). I didn't test it though.

I think you could implement this by writing custom completion provider (https://github.com/microsoft/vscode-extension-samples/blob/master/completions-sample/src/extension.ts).

[fredericseiler]

That's enough for me 😄

[richeklein]

@fredericseiler Were you able to get this extension working for .blade.php files? As a workaround, I've been switching the language mode to HTML when working with Alpine inside Blade file, then switching back to Blade for formatting. Thanks.

[fredericseiler]

Yep, with the modification mentioned above.

[georgeboot]

@fredericseiler could you please create a PR for this? Seems like it'll do it.

[AbidKhairyAK]

@fredericseiler what should i do after editing the package.json file?

[fredericseiler]

Just restart Code.

[Mushr0000m]

So no plan to add snippets/colors for .php, .blade.php files ? I'm not sure on how to apply your temp fix from above ?

[GriceTurrble]

Hi from the future, here's the temp fix:

1. Locate the extension directory on your disc. On Windows, for instance, you'll find it in %USERPROFILE%/.vscode/extensions/adrianwilczynski.alpine-js-intellisense-1.2.0

2. Edit the package.json file in that directory.

3. Find the "contributes" key which looks something like this:

   "contributes": {
    "snippets": [
      {
        "language": "html",
        "path": "./snippets/html.json"
      }
    ],
    "html": {
      "customData": [
        "./customData/html.json"
      ]
    }
   },

4. Add a new object to the "snippets" array for the language of your choice, using the same path. At the same time, add a new key at the same level as snippets and html, also for the language of your choice, with the same customData content.

   For instance, I have the Django extension installed and use the django-html language for templates. I added the snippets and other data like so (compare to above):

   "contributes": {
    "snippets": [
      {
        "language": "html",
        "path": "./snippets/html.json"
      },
      // ---ADD THIS---
      {
       "language": "django-html",
       "path": "./snippets/html.json"
      }
      // ---END---
    ],
    "html": {
      "customData": [
        "./customData/html.json"
      ]
    },
    // ---ADD THIS---
    "django-html": {
     "customData": [
       "./customData/html.json"
     ]
    },
    // ---END---
   },

5. Repeat 4 as needed for any other language you want these snippets included in.

6. Save the file, close and re-open VS Code (it may warn you on startup that the extension was changed on disc and to reload again; click Ok in the notification and do so).

Now the snippets and data are available in your language of choice.

Example, using the snippets of HTML, Django, and Alpine in the same django-html language mode:

---

It would be great if there were some VS Code setting that could be used to contribute these snippets from one language into another, but I can't seem to find one.

Emmet is able to include snippets into other languages using the emmet.includeLanguages setting, but I'm not sure if that's relevant here.

[AltanS]

I am running VS Code on Windows with WSL 2 activated, and the AlpineIntelliSense Extension was running on the remote machine. So the file changes from the comment above didn't work right away. I had to apply the changes on the remote machine (Ubuntu in my case) and not the Windows installation.

[Sogl]

Any changes on this? I use Alpinejs in twig files.

[dr-codswallop]

@Sogl In the absence of extra languages being easily available for this extension, try this one. It has settings for languages other than .html

[morceaudebois]

Haven't managed to make it work with Blade sadly. I tried to add the setting with "html,php" or "html,blade.php" as a value, but no luck even after restarts.

[saberhosneydev]

A better extension is Alpine.js intellisense by P. Christopher Bowers you can add custom languages to it. Example below with blade files

[HassanNawazHiraj]

https://github.com/AdrianWilczynski/AlpineIntelliSense/pull/8 Made a PR. should fix it.