slint/editors/vscode
Aurindam Jana 0cfeec1a31
Update Slint Community License (#4994)
Updated the version from 1.1 to 1.2 
Renamed the header to "Slint Royalty-free Desktop, Mobile, and Web Applications License"
Added definition of "Mobile Application" and grant of right
Moved "Limitations" to 3rd section and "License Conditions - Attributions" to 2nd section
Added flexibility to choose between showing "MadeWithSlint" as a dialog/splash screen or on a public webpage
Moved the para on copyright notices to section under "Limitations"
2024-04-15 15:18:55 +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 Update Slint Community License (#4994) 2024-04-15 15:18:55 +02:00
static Update Slint Community License (#4994) 2024-04-15 15:18:55 +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 Update Slint Community License (#4994) 2024-04-15 15:18:55 +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 Bump version number to 1.6.0 2024-03-27 07:49:22 +00:00
README.md Update Slint Community License (#4994) 2024-04-15 15:18:55 +02:00
slint.injection.json vscode: Improve language injection 2024-01-27 00:58:34 +01:00
slint.tmLanguage.json tmlanguage: don't make everything a keyword 2024-02-28 15:22:37 +01:00
tsconfig.json vscode: Add a simple Welcome page 2023-07-21 18:12:46 +02:00

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:

  1. Follow the setup steps above to build the lsp binary and install npm dependencies.

  2. Create a .vsix package (needs vsce installed)

npm run local-package
  1. Install the .vsix file with
code --install-extension slint-*.vsix
  1. Reload your VS code windows

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