QML/JavaScript language plugin for KDevelop

Wow… the last days are a blur. I hoped to blog more but once more failed at doing so. What an awesome sprint this is… Once again, many thanks to Joseph for organizing this! But lets now blog about really noteworthy stuff!

Inline Syntax Errors for QML in KDevelop
Inline Syntax Errors for QML in KDevelop

QML/JS language support

Aleix was doing quite some QML work-work recently. Sadly KDevelop has no language support for that, so to stay productive you start to use Qt Creator for the QML files sooner or later. This is of course perfectly fine, except for those people that love to use Kate e.g. or for those that prefer our interpretation of the IDE metaphor and C++ language support. So what should we do about that? Right, lets write a QML/JS Plugin.

Cannot Parse

But writing a KDevelop language plugin is not an easy task. To get something useful, probably the most essential ingredient is a proper language parser. And of course that is nothing you do over night. Furthermore, you should always try to not write that stuff on your own, instead leverage the work done by others. This is what Aleix did. We now use an internal copy ( not a fork, see below) of the QML/JS parser from Qt Creator. I’ve wrapped that in the basic KDevelop language plugin code. Without much work we are now already able to show syntax errors inside the editor for JavaScript and QML files!

Inline Syntax Errors for JavaScript in KDevelop
Inline Syntax Errors for JavaScript in KDevelop

The Future

Of course it is still a long long way until we even get close to the feature set offered by Qt Creator for QML files. I’m quite sure though that we will continue to work on that. Considering more and more people relying on QML/JS for their UI work, or looking at the role of JS in the web, I think this is an essential step towards a better KDevelop.

So what are the next steps? Personally, I think we should try to whip up a basic DUChain integration that gives you some context browsing. Once that is done, try to support imports such that we can figure out the QML API for Qt built in files. Then, we can think about kick-ass code completion. It’s going to take time but we can do it!


Now I said this is not a fork, and I mean it. We copied the code since there is no reusable library (and that just makes sense, you don’t want to keep a stable API for a language AST). I’ve added a README to the copy though, that reads the following:

This code here is copied from Qt Creator:

This contents of this folder can be found in src/libs/. For license information see LICENSE.LGPL and LGPLG_EXCEPTION.TXT.

NOTE: This is not a fork! Do not touch anything beside the CMake build files. Everything else must stay in sync. If you find a bug or have an improvement, make sure to contribute it back to Qt Creator! This plugin would not be possible without their work, so that is the least we can do.

I mean what I wrote there. Many many thanks to the work done by the diligent Trolls and Nokia for creating a reusable parser for QML/JS. I’ve talked with a few Qt Creator developers over the years, and they are a nice bunch of talented developers. I tip my virtual hat and bow to their achievements.

And last but not least: Thanks Aleix for doing the dirty lib import and CMake build system so I could concentrate on the KDevelop language plugin integration :) Without you I wouldn’t have done that! And once more many thanks to the KDE e.V. and Joseph for making the sprint possible!



Want to comment? Send me an email!

Comment by cojack (not verified) (2012-12-06 21:43:00)

And also you forgot about url to the repo ;>

Comment by Milian Wolff (2012-12-06 21:55:00)

Comment by Kevin Krammer (not verified) (2012-10-28 20:43:00)

I guess one of the difficult to support ascpects of QML is that imports often to not refer to parsable files (like headers or JS files) but to modules provided by some plugin.

This severly limits what any IDE can do in the QML realm, i.e. without support for auto completing types or their properties, it’s bascially just syntax highlighting, block scoping and things specified within the current project.

At some point we might want some kind of plugin meta data spec that allows IDE’s to introspect QML plugins without having to instantiate them.

Comment by Sho (not verified) (2012-10-28 18:13:00)

Super-excited about this! Currently doing QML work as well - in KDevelop …

Comment by Nikita Krupenko (not verified) (2012-10-28 17:10:00)

Awesome news! Right now I’m using QtCreator for one project because of QML support. There already exists qmake plugin but qml support was missing. Also adding template QML projets would be useful too. Offtop: are there any plans for KDevelop builds for Windows? AFAIK, building is non-trivial, so I can use it only on Linux.

Comment by Milian Wolff (2012-10-28 13:43:00)

Oh and I forgot to add: While at it, I started to dump a few of the required steps into something that could become documentation eventually:

Help there or at writing this plugin would be greatly appreciated!

Published on October 28, 2012.