mirror of https://github.com/slint-ui/slint.git synced 2025-10-03 07:04:34 +00:00

History

J-P Nurmi c5248c005e Allow specifying paths for `@library` imports		2023-10-20 16:47:00 +02:00
..
.vscode	Reformat vscode	2022-11-22 11:32:17 +01:00
css	tools: Fix property editor rendering input too big	2023-06-23 13:03:05 +02:00
src	vscode: Create highlight function again and pass it to the LSP	2023-10-19 15:01:46 +02:00
static	Update Slint logo folder with new design (#3432 )	2023-09-11 16:41:06 +02:00
.eslintrc.json	Reformat vscode	2022-11-22 11:32:17 +01:00
.gitignore	vscode: Make local-package work on windows and fix license warning	2023-04-26 14:54:56 +02:00
esbuild.js	Revert "vscode: Use ESM modules"	2023-10-19 15:01:46 +02:00
extension-logo.png	Update the VS code extension logo to a variant with a white background	2023-09-13 10:03:16 +02:00
language-configuration.json	Reformat vscode	2022-11-22 11:32:17 +01:00
package.json	Allow specifying paths for `@library` imports	2023-10-20 16:47:00 +02:00
README.md	vscode: Use the new LSP/Previewer WASM bundle	2023-08-25 13:19:34 +02:00
slint.injection.json	vscode: inject Slint syntax highligting in rust's `slint!` macro	2022-12-19 09:13:58 -08:00
slint.tmLanguage.json	LSP: support for enum in the outline and in the goto definition	2023-06-12 13:02:14 +02:00
tsconfig.json	vscode: Add a simple Welcome page	2023-07-21 18:12:46 +02:00

README.md

Slint for Visual Studio Code

This extension for VS Code adds support for the Slint design markup language.

Features

Syntax highlighting
Diagnostics from .slint files
Live Preview of a .slint 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. Afterwards it is automatically activated when editing files with the .slint 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 "Slint: Show Preview" command from the command palette when editing a .slint 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 Slint issue tracker.

Building from source and debugging

The following step will build a local version of the vscode extension and the LSP

cargo install wasm-pack
cargo build -p slint-lsp
cd editors/vscode
npm install
npm run build:wasm_lsp
npm run compile

Later, you only need to do the steps for the part you change like cargo build -p slint-lsp to rebuild the lsp binary or npm run compile to rebuild the typescript.

You can run vscode with that extension by running, in the editors/vscode directory:

code --extensionDevelopmentPath=$PWD ../..

If you want to load the web extension, add --extensionDevelopmentKind=web

How to build the extension package

To create a .vsix package for local installation:

Follow the setup steps above to build the lsp binary and install npm dependencies.
Create a .vsix package (needs vsce installed)

npm run local-package

Install the .vsix file with

code --install-extension slint-*.vsix

Reload your VS code windows

Note that the resulting .vsix package contains your locally built debug LSP server. It is not suitable for distribution.