Archive for February, 2014

JSHint integration and more JS features in Language Support

Friday, February 7th, 2014

There are a few handy new features coming for JavaScript developers in RSTALanguageSupport.

Probably the coolest feature is JSHint integration.  By default, the JS support uses Rhino to provide syntax checking, code completion, and an outline tree view of code.  This continues to be the case, but you can now configure RSTA to use JSHint for syntax checking (code completion and outline views are still handled via the AST created by Rhino).  To do this, you can use the following new methods in the JavaScriptLanguageSupport class:

LanguageSupportFactory lsf = LanguageSupportFactory.get();
JavaScriptLanguageSupport jspf = (JavaScriptLanguageSupport)lsf.getSupportFor(SyntaxConstants.SYNTAX_STYLE_JAVASCRIPT);
jspf.setErrorParser(JsErrorParser.JSHINT);
jspf.setJsHintRCFile(new File("path/to/.jshintrc")); // This is optional

JsErrorParser is a simple enum that allows you to toggle between Rhino and JSHint for error checking.  Once JSHint is enabled, you can optionally point to a .jshintrc file to dictate what errors/warnings should be flagged.  If you don’t do this, JSHint’s defaults are used, but doing so allows you to fully tailor your JS editing experience.

Here’s an example screenshot showing some warnings and errors identified by JSHint, some of which aren’t caught by Rhino:

JSHint Warnings

JSHint Warnings

A word of caution:  currently, the JSHint parser is executed on the EDT.  This means there could be performance issues (most likely just a short pause when the code is re-parsed).  In the next release I plan on rejiggering the RSTA parsing API so such things can be done off the EDT.  But for typical JavaScript files (under a couple of thousand lines) the pause is pretty negligible, and you can always switch back to Rhino in the short term if it is an issue.

Next, the JS outline tree now recognizes JavaScript “classes” built by extending a prototype:

Prototype Support

Prototype Support

This is the first step in making the Outline Tree for JavaScript code smarter and smarter.

Finally, the current function scope of the caret position in a JavaScript file is now outlined in the gutter, similar to what is done for Java.  This is just a small but useful visual cue as to what scope you’re currently working on in the file:

Current Scope in the Gutter

Current Scope in the Gutter

Hopefully the next RSTA/AutoComplete/LanguageSupport release will be in the next couple of weeks.  Look for it soon!