VSCode Extension

Developers using the VSCode text editor may like to take advantage of the official SPX Extension. The extension will help improves the development experience with SPX and supports various capabilities designed to improve productivity an usage.

Key Features

• Syntax Highlighting for spx-* annotations in markup.
• SPX Specific Directive Completions with descriptions
• Event Directive Completions with MDN descriptions.
• Component Completions with state defined referencing.
• Supports grammar targeting for highlight customizations.

Workspace Settings

The SPX extension contributes the following workspace settings:

{
  "spx.enable": true,    // Enable/Disable SPX IntelliSense
  "spx.files": [],       // Provide a glob list of component file paths
  "spx.include": []      // Extend support to addition languages (default: html and liquid)
}

Usage

Install the SPX extension from the VSCode Marketplace. By default, IntelliSense capabilities will work within .html and .liquid files, with all global directives available. For developers who are taking advantage of SPX Components, you can active and enable completion features by providing a glob path list within workspace settings.

src
  ├── app
  │   └── components
  └── package.json

{
  "spx.files": [
    "./src/app/components/*.{ts,js}"
  ]
}