Datastar Extension for Visual Studio Code

Adds autocomplete and syntax highlighting for Datastar to Visual Studio Code.

Configuration

By default, Datastar snippets work in HTML and most common template languages. You can customize which languages and file extensions have Datastar support by configuring the datastar.enabledLanguages setting.

To configure:

Open VS Code Settings (Cmd/Ctrl + ,)
Search for "datastar enabled languages"
Add language IDs (e.g., html, php, twig) or file extensions (e.g., .edge, .njk, .custom)

Example:

{
  "datastar.enabledLanguages": [
    "html",
    "php",
    "twig",
    ".edge",
    ".custom"
  ]
}

Custom Attributes

You can add syntax highlighting support for custom Datastar plugins using the datastar.customAttributes setting.

To configure:

Open VS Code Settings (Cmd/Ctrl + ,)
Search for "datastar custom attributes"
Add your custom plugin names (without the data- prefix)

Example:

{
  "datastar.customAttributes": [
    "my-plugin"
  ]
}

After adding custom attributes, reload VS Code to apply the changes.

License

This plugin is licensed for free under the MIT License.

Requirements

This plugin requires Visual Studio Code version 1.63.0 or later.

Installation

Install the extension from the Visual Studio Code Marketplace or from the extensions panel by searching for “Datastar”.

Datastar