mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-01 14:21:16 +00:00
73 lines
2.3 KiB
Markdown
73 lines
2.3 KiB
Markdown
# SixtyFPS for Visual Studio Code
|
|
|
|
This extension for VS Code adds support for the [SixtyFPS](https://sixtyfps.io) design markup language.
|
|
|
|
## Features
|
|
|
|
- Syntax highlighting
|
|
- Diagnostics from .60 files
|
|
- Live Preview of a .60 file
|
|
- Completion of properties
|
|
- Jump to definition (currently, only definition of Component)
|
|
|
|
## Installation
|
|
|
|
You can install the extension directly from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=SixtyFPS.sixtyfps-vscode). Afterwards it is
|
|
automatically activated when editing files with the `.60` extension.
|
|
|
|
## Live-Preview
|
|
|
|
In addition to the usual code editing features such as completion and syntax highlighting, this extension
|
|
also offers the ability to view a rendering of the file you're editing and update it on-the-fly when making
|
|
changes.
|
|
|
|
You can issue the "SixtyFPS: Show Preview" command from the command palette when editing a `.60` file. This
|
|
will create a new top-level window that renders the file you're editing. Any changes you make are immediately
|
|
visible, it is not necessary to save the file.
|
|
|
|
## Reporting Issues
|
|
|
|
|
|
Issues should be reported in the [SixtyFPS issue tracker](https://github.com/sixtyfpsui/sixtyfps/labels/vscode-extension).
|
|
|
|
## Building from Source
|
|
|
|
1. Build the LSP
|
|
|
|
```sh
|
|
cargo build --bin sixtyfps-lsp
|
|
```
|
|
|
|
2. run npm install in the vscode directory
|
|
|
|
```sh
|
|
cd vscode_extension
|
|
npm install
|
|
```
|
|
|
|
## How to debug the LSP
|
|
|
|
At the moment you need to load this directory in VS code and then start debugging (Run -> Start Debugging).
|
|
That will "debug" the vs code extension and create a new VS code window. The LSP server binary will be started if previously built
|
|
You can see the output in the output pane "SixtyFPS LSP" (that's the drop-down that usually shows "Tasks").
|
|
|
|
## How to build the extension package
|
|
|
|
To create a `.vsix` package for local installation:
|
|
|
|
1. Follow the setup steps above to build the lsp binary and install npm dependencies.
|
|
|
|
2. Create a `.vsix` package (needs `vsce` installed)
|
|
|
|
```sh
|
|
npm run local-package
|
|
```
|
|
3. Install the `.vsix` file with
|
|
|
|
```sh
|
|
code --install-extension sixtyfps-vscode-*.vsix
|
|
```
|
|
|
|
4. Reload your VS code windows
|
|
|
|
Note that the resulting `.vsix` package contains your locally built debug LSP server. It is not suitable for distribution.
|