Idea: Code Completion for JavaScript

In 2012, Kate had a GSoC project with the aim of adding a Scripting IDE plugin. The idea was to make it easy to write Kate Part scripts (command line scripts, indenters), that should include rudimentary code completion and a gui to manage available scripts. As detailed in the blog post, a rudimentary list that showed all available scripts is available. However, due to changes in Kate Part’s scripting framework (e.g. changes in the folder structure, require() function to load libraries), the plugin in its current form is not applicable anymore. Still, the idea of having a better JavaScript support is valid.

So this blog post is about some ideas how we can add possibly really cool JavaScript support to Kate as a plugin. This plugin should provide the following features:

  1. provide code completion
  2. support for loading additional modules (jQuery, Node.js, Prototype, Kate Scripting API, …)
  3. specialized support for Kate Part scripting
  4. outline in terms of a function and prototype browser

JavaScript Code Completion

Providing code completion to JavaScript requires a parser so we have an abstract syntax tree (AST) of the current file. This parser needs to be error-tolerant, since during the process of programming, the source code often violates the syntax. Searching the Web, relatively few information about such a parser exists. But one tiny parser shines: Esprima (source code, more info), written by KDE’s “very own” Ariya :-)

Esprima is a JavaScript parser written in JavaScript. It is (to some degree) error-tolerant and returns an AST as shown in the parse demo. The AST is returned in simple JSON syntax, meaning it can be easily parsed with either the JavaScript JSON functions or JSON in Qt5 (JSON for Qt4). Along the error-tolerant mode, the AST returned by Esprima also contains comments and line/column information, if desired.

Interestingly, the idea of using Esprima for code completion arose about a year ago, and meanwhile there are several projects that successfully use the Esprima AST: Eclipse Orion, a web-based IDE, uses Esprima for code completion and for the outline view (sources). The source code for the code completion is available in the orion client git module: lib, code completion (content assist), unit tests.

So What Next?

As it seems the code is all there, the next step would be to start a small standalone project and write a proof of concept to check whether this approach is feasible. I’d suggest to use Qt’s JavaScript interpreter (QtScript in Qt4, QJS in Qt5). In the long run, the goal would be to have code completion and possibly an outline view. If this works, more functionality like support for Kate Scripting could be added. So there is a lot to play around with.

If you are interested, just start working on it. It might be a good GSoC project (although we’d require a quite skilled developer here) :-P Thoughts? Comments?

8 thoughts on “Idea: Code Completion for JavaScript”

  1. Hey!

    I don’t want to criticise the idea or anything (it’s great!), but — kate with AST based code completion functionality? That’s exactly what KDevelop is. And, a basic JS plugin with parser and ast and everything (and even basic semantic code-completion) even exists for KDevelop already:

    So, don’t you think there will be quite a lot of duplicate work if kate now starts its own AST based JS completion tool? ;)

    If I might suggest something similar which would have less overlap with what already exists: a generic completion plugin, which provides the possibility to define basic code-completion for arbitrary languages in an XML file would be very nice. This could then also be used to provide JS completion support, but would be much more flexible.

    If you think this should rather be discussed in private, feel free to delete my comment and email me — but I figured it would be okay to talk about this here. :)


    1. Of course it’s quite some work, and the idea is not to duplicate KDevelop. Fact is rather that JavaScript is more and more used, in the web, but also in KDE applications. This alone is a strong reason for excellent support. Essentially, this blog is about an existing solution that works, with Esprima being a really really well-tested JavaScript parser and the code completion of Orion just adds the lookup code, along with a thousand or so unit tests. So It’s really just a matter of throwing this into a JavaScript interpreter and feeding the code to be parsed. Maybe a day or two and you’d have this working.

      I agree that having rudimentary code completion defined for instance in XML files would already be good. Still, this is static code completion. This blog also is about dynamic code completion.

      I still think it’s an appealing idea and worth a try, especially since all the work is already done and the code well-testet :)

  2. Ok, sure — I mean, a try doesn’t cost much. ;)
    I just hope you won’t end up rewriting half of KDevPlatform.
    But, if the completion library already exists (I misunderstood that at first) then there’s a good chance it will indeed be quite painless, as you said.

  3. I’m well aware you’re not deliberately going to do that, I was just worried that it might be what is going to be necessary to make this work.
    This is somewhat nullified by that I had overlooked that apparently the analyzer code already exists. So, sorry for the noise. ;)

  4. Hi. A thing about code folding. In I see “it now was possible to remember code folding state past sessions and during document reload.”

    Now I am on kde 4.10. If I open a document, close some folds, close the document and reopen it, the folded regions are reloaded correctly. If, instead, I close kate then relaunch it, the file is reopened (it’s saved in my session, I think) but the fold region are all opened.

    Is this a bug? It’s “how it’s supposed to work”? Is there a way to “save” permanently the fold state?


Leave a Reply