Tuesday, June 04, 2013

typescript syntax highlighting in jedit and netbeans

Typescript syntax-highlighting is available in a few editors (vim, emacs, sublime) thanks to editor plugins published by Microsoft, and deeper type-aware language support with code-completion and refactoring is available for Visual Studio. Of course the code editors I usually use (jedit and netbeans) don't include typescript support, so I took a little time to see if I could get something working.

Adding basic typescipt support to jedit was easy. JEdit's syntax highlighting and indentation logic for a particular file is driven by the "mode" xml file associated with the file's extension (.js, .ts, .java, whatever). JEdit extracts lexical rules for syntax-coloring from the lists of keywords, operators, and regular expressions in the mode file. For typescript I associated .ts files with jedit's javascript mode, and added a few items to the keyword lists in javascript's mode xml file (declare, export, ...), and I was pretty happy with the result. This thread on stackoverflow describes where to find mode xml files, and the mode "catalog" file. I also disabled the typoscript (European CMS - who knew?) entry in the catalog, because typoscript also uses the ".ts" file extension:

<MODE NAME="javascript"  FILE="javascript.xml"
    FILE_NAME_GLOB="{*.{js,ts},Buildsub}" />

<MODE NAME="typoscript"  FILE="typoscript.xml"

I tried a similar trick with netbeans, and followed these instructions to configure netbeans to treat ".ts" files as javascript. Unfortunately the resulting behavior in a netbeans editor is not that great. Netbeans builds its language support around a parser of the full language grammar - it doesn't just highlight keywords. The various syntax structures in typescript that are not legal in javascript are highlighted as errors in netbeans. Ugh! Anyway - it's better than nothing. This page has instructions for coding in java a netbeans module for a new language. It would be a fun project to code up a typescript extension for netbeans using the typescript tsc compiler via the java-based rhino javascript engine. This entry describes running tsc with rhino on the command line. I'll save that project for another day ...

Post a Comment