QML language support for Zed

Features

By leveraging qml-js tree-sitter, the extension provides:

• Syntax highlighting (including JS used in QML files)
• Outline support for UI components and functions
• Automatic indenting and auto closing brackets, strings etc.

Installation

zed-qml is available in the Extension Gallery. See Zed documentation for more info.

Dependencies

QML Language Server (qmlls)

The qmlls binary should be installed locally from your Qt install.

MacOS

Make sure you have qmlls available in your $PATH. If you have installed Qt using the online installer you may need to do that manually.

The simplest way to achieve that is by adding this line at the end of your .zshrc file:

export PATH=$PATH:/Users/$USER/Qt/6.8.0/macos/bin

This assumes the version of Qt you have installed is 6.8.0.

Linux

On Linux in most cases you can just install qmlls by using your package manger.

Ubuntu

sudo apt install qt6-declarative-dev-tools

Fedora

sudo dnf install qt6-qtdeclarative-devel

Arch

sudo pacman -S qt6-languageserver

Void Linux

sudo xbps-install qt6-declarative-tools

Void installs qmlls to /usr/lib/qt6/bin/qmlls so you either need to symlink it to /usr/bin/qmlls or just add it to your $PATH like so:

echo "export PATH=\$PATH:/usr/lib/qt6/bin" >> ~/.bashrc

Language Server Configuration

See Qt documentation for configuration.

Extra Arguments

For qmlls to recognize modules in your QML_IMPORT_PATH, you can add the -E argument to your Zed settings like so:

{
  "lsp": {
    "qml": {
      "binary": {
        "arguments": ["-E", "additional-args"]
      }
    }
  }
}

Configure Build Directory

For qmlls to recognize your QML modules, you have to specify the build directory of your project. The simplest way to do that is by specifying it in a file called .qmlls.ini in your project root like so:

[General]
buildDir=path/to/build/dir

Then after building your project once all errors regarding "module not found" should be resolved.