[Language Support] Extending JavaScript Syntax

Hi,

I use the React JavaScript Library and I need to work with JSX syntax within JS files. JSX is an XML-like syntax similar to Mozilla's [now deprecated] E4X. In fact, IntelliJ (in ES5.1 mode) will recognize some simple JSX components as E4X and syntax-hightlight nicely. However I need to work with more complex JSX components and I need to do so in ES6 mode so I can use some cutting edge ECMAScript features.

Basically, I need to extend the JavaScript (ES6) language support in IntelliJ to support JSX syntax. I am looking at some tutorials on custom language support but these generally introduce a new language with a new file extension. I need to extend an already supported language, specifically when a comment exists at the top of the file: /** @jsx React.DOM */

Is this possible? Can someone point me to a plugin that does somethign similar?

3 comments

This certainly sounds interesting!

Unfortunately I believe the JS plugin has no public API or documentation. However, I believe you can make use of the existing classes by simply adding the jar as a dependency to your plugin

0

Extending a language is generally not possible within IntelliJ IDEA's API. All of the code written to support a particular language (and that's much, much more than just parsing and syntax highlighting) is designed to handle the constructs defined in the language specification and will not be able to handle the constructs of the extension.

If you're only interested in syntax highlighting, the simplest thing you can do is configure a TextMate bundle for your language.

0

OK, as a workaround, I'm working on a Node.js based transform script that converts the JSX syntax to ES6 "template-string" syntax so the file can be happily edited in IntelliJ/WebStorm and then the reverse transform is done prior to saving it back to the dev server.

My plan is soon to have a Node.js FTP server running on localhost that acts as a proxy for the dev server and does this transform in real-time as IntelliJ downloads and uploads JS files.

A great feature would be a JetBrains Plugin that would allow some inline transforming on open/save or download/upload. #suggestion

Will be nice to use my favorite IDE again!

0

Please sign in to leave a comment.