This folder contains extensions or configuration files for different editor to better support .slint files. This README contains information on how to configure various editors.
If your favorite editor is not in this list, it just means we did not test it, not that it doesn't work. We do provide a language server for Slint that should work with most editor that supports the Language Server Protocol (LSP) (see its README.md for more info on how to install it). If you do test your editor with it, we would be happy to accept a pull request that adds instructions here.
For VSCode, we have an extension in this repository, you can install it directly from the market place. This includes the Slint language server and is a one-stop shop to get you started.
Before we start, it's important to note that Kate relies on the presence of syntax highlighting file for the usage of the LSP. Therefore, we'll set up the syntax highlighting first.
The file slint.ksyntaxhighlighter.xml needs to be copied into a location where Kate can find it. See the kate documentation
On Linux, this can be done by running this command
mkdir -p ~/.local/share/org.kde.syntax-highlighting/syntax/
wget https://raw.githubusercontent.com/slint-ui/slint/master/editors/kate/slint.ksyntaxhighlighter.xml -O ~/.local/share/org.kde.syntax-highlighting/syntax/slint.xml
On Windows, download slint.ksyntaxhighlighter.xml into %USERPROFILE%\AppData\Local\org.kde.syntax-highlighting\syntax
After setting up the syntax highlighting, you can now install the Slint Language server. Check the LSP README.md for instructions.
Once it is installed, go to Settings > Configure Kate. In the Plugins section, enable the LSP-Client plugin. This will add a LSP Client section in the settings dialog. In that LSP Client section, go to the User Server Settings, and enter the following in the text area:
{
"servers": {
"Slint": {
"path": ["%{ENV:HOME}/.cargo/bin", "%{ENV:USERPROFILE}/.cargo/bin"],
"command": ["slint-lsp"],
"highlightingModeRegex": "Slint"
}
}
}
To preview a component, first, position your cursor on the name definition of the component you want to preview
(for instance, MainWindow
in component MainWindow inherits Window {
).
Then, activate the Show Preview code action.
You can do this by using the Alt+Enter shortcut to bring up the code action menu,
or find it in the menu bar at LSP Client > Code Action > Show Preview
![](https://private-user-images.githubusercontent.com/959326/320192995-e2e6f1a8-d3b8-46a1-87b3-0273c4a40cfc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NjA3MTEsIm5iZiI6MTcyNDU2MDQxMSwicGF0aCI6Ii85NTkzMjYvMzIwMTkyOTk1LWUyZTZmMWE4LWQzYjgtNDZhMS04N2IzLTAyNzNjNGE0MGNmYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNVQwNDMzMzFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05MTE1NThiMWFiZjNlOTQzYTg5ZWUwNzRlYzVlMTliZDdiNWEzZjg4MzcwMDY1ZDg2ZjFkZmRmYzY1NzYwODcxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.MZzZ-axJ5ePpZJZdhXx1kFAd77GqONuvC6ZdepqmuAM)
For the syntax highlighting, QtCreator supports the same format as Kate, with the xml file at the same location. Refer to the instruction from the previous section to enable syntax highlighting.
To install the Slint Language server, check the LSP README.md.
To setup the lsp:
- Install the
slint-lsp
binary - Then in Qt creator, go to Tools > Option and select the Language Client section.
- Click Add
- As a name, use "Slint"
- use
*.slint
as a file pattern. (don't use MIME types) - As executable, select the
slint-lsp
binary (no arguments required) - Click Apply or Ok
In order to preview a component, when you have a .slint file open, place your cursor to the name of the component you would like to preview and press Alt + Enter to open the code action menu. Select Show Preview from that menu.
To install the Slint Language server, check the LSP README.md.
Vim support the Language Server Protocol via its Conquer of Completion
plugin. Together with the Slint LSP server, this enables inline diagnostics and code completion when
editing .slint
files.
After installing the extension, for example via vim-plug, two additional configuration changes are needed to integrate the LSP server with vim:
- Make vim recognize the
.slint
files with the correct file type
Install the slint-ui/vim-slint
plugin.
Alternatively you can add the following to your vim configuration file (e.g. vimrc
) to
enable automatic recognition of .slint
files:
autocmd BufEnter *.slint :setlocal filetype=slint
-
Make sure the slint language server is installed and can be found in PATH.
-
Configure Conquer of Completion to use the Slint LSP server
Start vim
and run the :CocConfig
command to bring up the buffer that allows editing
the JSON configuration file (coc-settings.json
), and make sure the following mapping
exists under the language
server section:
{
"languageserver": {
"slint": {
"command": "slint-lsp",
"filetypes": ["slint"]
}
}
}
Follow step 1. of the Vim section to get support for .slint
files.
The easist way to use the language server itself in Neovim is via the neovim/nvim-lspconfig
and williamboman/nvim-lsp-installer
plugins. Once these are installed
you can run :LspInstall slint_lsp
to install the lsp binary (on Windows, Linux, and macOS).
Once the slint_lsp language server is installed and running, you can triggger the live preview via the code actions. Unfortunately there are several ways to trigger these, so please check your configuration.
Also, if you use nvim-treesitter
you can install the Tree Sitter parser for Slint using TSInstall slint
for syntax highlighting and indentation support.
To install the Slint Language server, check the LSP README.md.
To setup the LSP:
- Make sure the slint language server is installed
- Using Package Control in Sublime Text, install the LSP package (sublimelsp/LSP)
- Download the Slint syntax highlighting files into your User Package folder,
e.g. on macOS
~/Library/Application Support/Sublime Text/Packages/User/
: https://raw.githubusercontent.com/slint-ui/slint/master/editors/sublime/Slint.sublime-syntax https://raw.githubusercontent.com/slint-ui/slint/master/editors/sublime/Slint.tmPreferences - Download the LSP package settings file into your User Package folder: https://raw.githubusercontent.com/slint-ui/slint/master/editors/sublime/LSP.sublime-settings
- Modify the slint-lsp command path in
LSP.sublime-settings
to point to the cargo installation path in your home folder (Replace YOUR_USER by your username):"command": ["/home/YOUR_USER/.cargo/bin/slint-lsp"]
- Run "LSP: Enable Language Server Globally" or "LSP: Enable Language Server in Project" from Sublime's Command Palette to allow the server to start.
- Open a .slint file - if the server starts its name will be in the left side of the status bar.
In order to preview a component, when you have a .slint file open, place your cursor to the name of the component you would like to preview and select the "Show preview" button that will appear on the right of the editor pane.
https://github.com/kizeevov/slint-idea-plugin has a plugin for the Intellij platform.
Note: This plugin is developed by @kizeevov.
Zed is a high-performance, multiplayer code editor. Luke Jones maintains the zed-slint extension, that integrates the latest release of the slint language server into Zed, offering code completion and syntax highlighting. Install the extension via the following steps:
- Open the extensions tab via the Zed -> Extensions menu.
- In the search field, enter "slint".
- Click on "Install" for the "Slint" extension.