IntelliSense for Alpine.js

Related tags

Learning resource alpine-intellisense
Overview

IntelliSense for Alpine.js

alpine-intellisense Example

Features

Provides syntax highlighting for Alpine.js directives along with autocomplete for all base directives and modifiers.

This extension aims to keep as small a footprint as possible by injecting a simple grammar to provide JavaScript highlighting rather than implementing an entirely new language and by using the Custom Data Extension to add custom HTML attributes. Snippets are provided through the default API via VS Code.

This extension was heavily inspired by AdrianWilczynski/AlpineIntelliSense and Sperovita/alpinejs-syntax-highlight. This extension aims to combine their functionalities while also adding better autocompletion and syntax highlighting.

Extension Settings

This extension contributes the following settings:

  • alpine-intellisense.settings.languageScopes: Defines the language scopes for which the snippets will be available.
    Use comma separated values. For example: html,php,twig,nunjucks.
    Default is html.
Comments
  • highlighting tailwind class directives

    highlighting tailwind class directives

    First, I"m happy with seeing highlighting instead of a single color, so thank you for your work!

    It's fairly obvious why the below happens, but just pointing it out.

    image

    Possible to limit parsing to x-*= @data-name= :data-name= maybe?

    I have a feeling the x- directive is being removed in future Alpine releases however.

    opened by shaynem 3
  • Inspiration for personal project

    Inspiration for personal project

    Hello and first of all thanks for this good extension, sorry for asking here in the issues but there is no discussion tab.

    I want to extend .html too for a non alpinejs related project what I noticed when writing events with this extension there is not really an autocomplete for the javascript code written in the script tag, for example

    <body>
    <script>
      function clickHandler() {
        console.log("boo");
      }
    </script>

    // the alpine click gives no autocomplete
    <div x-on:click="clickHandler()">Here</div>

    //the native onclick gives autocomplete for clickHandler
    <div onclick="clickHandler()">Here</div>
</body>

    Is this supposed to work that way and if not is it possible to tell an custom attribute that everything between "..." should be javascript?

    Again sorry for asking here but I'm currently really interested in solving this for me without creating a whole new language. Thanks

    unrelated 
    opened by ivanjeremic 2
  • Issue with intellisense in 'regular' text.

    Issue with intellisense in 'regular' text.

    I'm seeing the extension be a bit aggressive in terms of suggestions when typing. So for example, on a page w/ no JS at all, I typed:

    <p>
Hello world.
</p>

    When I typed the period at the end, I got:

    image

    As I'm a fast typer, I ened up with: Hello world.alt.

    Any reason why it is prompting for stuff with just a period?

    opened by cfjedimaster 1
  • fix: :bug: Narrowed injection scope

    fix: :bug: Narrowed injection scope

    Narrowed injection scope to remove bugs associated with syntax highlighting in improper places like within an attribute our between html tags. Fixes #1.

    opened by pcbowers 0
  • Blade syntax conflict

    Blade syntax conflict

    When using [Laravel Blade Snippets] extension, which provides syntax highlighting for Blade files that could contain Alpine.js code, the syntax highlighting for Alpine.js code works flawlessly; except for overriding Laravel's Blade directives highlighting, where it makes them pure white!

    Here is the look with Laravel Blade Snippets extension alone: image

    And here is how it looks with your extension along (both altogether): image

    opened by GoodM4ven 0
  • The documentation feature only works for HTML files

    The documentation feature only works for HTML files

    Greetings, and thank kindly you for the amazing extension.

    I noticed that the documentation feature, which I consider to be the best out of the extension's, doesn't work for any other file types, even when defined using the extension setting.

    Is there any easy solution to make that documentation popup shows up for Blade files, after setting it using the following code?

    "alpine-intellisense.settings.languageScopes": "blade",
    opened by GoodM4ven 0
  • The extension doesn't respect workspace settings, only user's

    The extension doesn't respect workspace settings, only user's

    I'm working with VSC a DevContainer and I usually rely on settings that are put in [./.vscode/settings.json] within the project's directory, which is read as "overriding", "workspace" settings that should have priority over user settings as far as my understanding goes... (gasp)

    So, no, the extension doesn't respect those!

    When I apply:

    "alpine-intellisense.settings.languageScopes": "blade",

    It only works if it's in my personal [settings.json]. And when it's deleted from it and added to the workspace's, the extension defaults back to only supporting html instead.

    opened by GoodM4ven 0
  • Quotes within a PHP tag aren't ignored

    Quotes within a PHP tag aren't ignored

    Quotes within a PHP tag aren't ignored as they should be. This causes syntax highlighting to break.

    Here's an example of an inline PHP tag within a <script> tag with proper JavaScript syntax highlighting: image

    Here's the same example using this plugin: image

    The syntax highlighting is broken after encountering the first ' inside of the PHP statement as it thinks it's a matching quote. If I swap single or double quote on the attribute it has the same issue.

    opened by benjibee 0
Owner
P Christopher Bowers
A systems admin by day and a web developer by any-free-time-I-get
P Christopher Bowers
GitHub https://marketplace.visualstudio.com/items?itemName=pcbowers.alpine-intellisense
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Add focal point alignment of images to your Alpine 3.x components with a custom directive.

Alpine Focal Add focal point alignment of images to your Alpine 3.x components with a custom directive. This package only supports Alpine v3.x. About

Michael Lefrancois 2 Oct 12, 2021
Animate your Alpine components.

Animate your Alpine components ?? This package provides you with a simple helper to animate your ALpine.js components. Installation The recommended wa

Ralph J. Smit 18 Nov 16, 2022
⏱ Simple Alpine.js plugin to display the human-readable distance between a date and now.

⏱ Alpine TimeAgo ⏱ An Alpine.js plugin to return the distance between a given date and now in words (like "3 months ago", "about 2 hours ago" or "in a

Marc Reichel 47 Dec 22, 2022
Adds a handy $parent magic property to your Alpine components.

✨ Help support the maintenance of this package by sponsoring me. Alpine $parent Access parent components using a handy $parent magic variable. This pa

Ryan Chandler 10 Aug 29, 2022
A clean integration between Cleave.js and Alpine. ✨

✨ Help support the maintenance of this package by sponsoring me. Alpine Mask This packages provide a custom x-mask directive and $mask magic variable,

Ryan Chandler 48 Dec 26, 2022
↕️ A little Alpine.js plugin to automatically resize a textarea to fit its content.

↕️ Alpine Autosize ↕️ A little Alpine.js plugin to automatically resize a textarea to fit its content. ?? Installation CDN Include the following <scri

Marc Reichel 42 Nov 5, 2022
A simple library for handling keyboard shortcuts with Alpine.js.

✨ Help support the maintenance of this package by sponsoring me. Alpine.js Mousetrap A simple library for handling keyboard shortcuts with Alpine.js.

Dan Harrin 102 Nov 14, 2022
E-commerce website using Laravel, Tailwindcss and Alpine.js

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

TheCodeholic 15 Dec 12, 2022
Multi-step wizard helpers for Alpine.js

Alpine Wizard This package provides an Alpine directive (x-wizard) and a magic helper ($wizard) that allow you to quickly build multi-step wizards usi

Galahad 74 Dec 23, 2022
📦 Alpine JS plugin to extend the functionality of the official $persist plugin

Alpine JS Persist Extended Alpine JS magic method $storage extends the official $persist plugin to help you work with local storage ?? Example ?? <div

Mark Mead 11 Dec 28, 2022
Alpine.js Language Features (Volar) extension for coc.nvim

[Experimental] coc-volar-alpinejs fork from vscode-alpine-language-features Alpine Language Features extension for coc.nvim Note @volar/alpine-languag

yaegassy 6 Oct 12, 2022
Little Alpine.js plugin to add a typewriter effect to any HTML element.

⌨️ Alpine Typewriter ⌨️ An Alpine.js plugin to add a typewriter effect to any HTML element. ?? Installation CDN Include the following <script> tag in

Marc Reichel 58 Dec 28, 2022
Straightforward interactive HTTP requests from within your Alpine.JS markup

Alpine Fetch Straightforward interactive HTTP requests from within your Alpine.JS markup. View the live demo here What does this do? Alpine.JS is a ru

null 29 Dec 21, 2022
Alpine.js wrapper for @formkit/auto-animate.

?? Alpine AutoAnimate ?? An Alpine.js wrapper for @formkit/auto-animate. ?? Installation CDN Include the following <script> tag in the <head> of your

Marc Reichel 16 Dec 28, 2022
Easy to use and flexible router for Alpine.js

alpinejs-router Easy to use and flexible router for Alpine.js Installation npm npm install @shaun/alpinejs-router yarn yarn add @shaun/alpinejs-router

Shaun 33 Dec 30, 2022
Provides intellisense, search and preview of emoji

Features Suggest emoji names after typing : or / (can be changed) Browse emojis by category Fuzzy search emojis Intellisense emojiIntellSense.language

Xiaoqian Zhang 5 Oct 15, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022