https://github.com/panoply/vscode-spx
VSCode support for SPX projects
https://github.com/panoply/vscode-spx
spx vscode-extensions
Last synced: about 1 year ago
JSON representation
VSCode support for SPX projects
- Host: GitHub
- URL: https://github.com/panoply/vscode-spx
- Owner: panoply
- License: mit
- Created: 2024-03-19T16:42:58.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-13T14:26:24.000Z (over 1 year ago)
- Last Synced: 2025-04-06T05:00:07.826Z (about 1 year ago)
- Topics: spx, vscode-extensions
- Language: TypeScript
- Homepage: https://spx.js.org
- Size: 9.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# vscode-spx
Language and intelliSense support for the [SPX](https://spx.js.org) JavaScript/TypeScript framework. Provides syntax highlighting, directive completions and various enhancements those leveraging SPX in their projects.
### Key Features
- Syntax Highlighting for `spx-*` annotations in markup.
- Syntax Highlighting for `dom` markup literals.
- Supports grammar targeting for highlight customizations.
- SPX Specific Directive Completions with descriptions.
- Event Directive Completions with MDN descriptions.
- Component Completions with state defined referencing.
- IntelliSense for state, events and nodes within workspace.
# Usage
The extension exposes an enabled/disable workspace settings which can be used to either activate or deactivate directive completions. Syntax highlighting is automatically applied using HTML grammar injections, as such all `spx-*` attribute occurrences within markup languages apply highlighting.
> Given the large data set applied to event directives, one may prefer to disable the extension when they are not working with SPX.
### Settings
The below workspace settings are made available:
```jsonc
{
"spx.enable": true, // Enable/Disable directive completions
"spx.files": [], // Provide components glob for completions in markup files
"spx.languages": [ // Additional languages extensions which enable spx
"html",
"liquid
]
}
```
# Contributing
Contributions are welcome! This project uses [pnpm](https://pnpm.js.org/en/cli/install) for package management and is written in TypeScript.
1. Ensure pnpm is installed globally `npm i pnpm -g`
2. Leverage `pnpm env` if you need to align node versions
3. Clone this repository `git clone https://github.com/panoply/vscode-spx.git`
4. Run `pnpm i` in the root directory
5. Run `pnpm dev` for development mode
### Developing
The project uses [tsup](https://tsup.egoist.sh) for producing the distributed bundle. You can produce a VSIX by running the `pnpm build` command. The `.vscode/launch.json` file contains the extension host logic.
```bash
pnpm dev # Development in watch mode
pnpm build # Builds extension and packages VSIX
pnpm data # Generates the html-data schema files
```
# Support
Follow me on [X](https://twitter.com/niksavvidis) and say hello! Thought there is no obligation, but coffee is always appreciated.
**PayPal**: [Donate](https://www.paypal.me/paynicos)
**BTC**: `35wa8ChA5XvzfFAn5pMiWHWg251xDqxT51`
🥛 [Νίκος Σαβίδης](mailto:n.savvidis@gmx.com)
# License
Licensed under [MIT](/LICENSE)