Orion 6.0 – Language Tooling Enhancements

The upcoming Orion 6.0 release will bring many improvements to your online IDE experience.  Many enhancements and improvements have been added to the language tooling support in Orion, especially for Javascript development.  Here is a list of the more notable changes prepared for 6.0!

Additional syntax highlighting

Orion now provides syntax highlighting for .c .h. cpp and Arduino (.pde/.ino) files.

Generating JSDoc

A new command has been added to help with creating JSDoc for function declarations and function expressions. It is found in the Tools menu for JavaScript source and is called Generate Element Comment with the key binding Alt+Shift+J (Win / *nix) and Ctrl+Shift+J on Mac OS.

The command:

… will insert JSDoc like this on function expressions:

… and will insert this JSDoc on function declarations:

Javascript tooling inside HTML script blocks

Much of the Orion Javascript Tooling support is now available while working in the HTML editor.  Linting support will now run on Javascript code inside of <script> tags.  Show occurrences will function when variables and functions are selected inside your scripts.

Javascript validation overhaul

The validation/linting support for Javascript in Orion, built on ESLint, has been given an overhaul with new rules, an updated engine and more user flexibility.  The validator will scan your Javascript files (as well as HTML <script> tags) and add errors or warnings to the margin of the editor.  Hovering provides a more detailed explanation of the issue.

Users can now customize the warnings they see on the new validation settings page, Settings > Validation.  Each validation rule can be set to error, warning or ignore.

A large number of rules have been added, warning you of discouraged code styles, missing documentation, unused variables, unreachable code and many other common programming problems.  All of the rules have variable severity which you can set on the Validation settings page.

New code validation rules

There have been a lot of new rules added to ESLint in Orion in 6.0, some of the more notable ones are:

Unused params:

Duplicate object keys:

Unreachable code:

Scoped code templates

When activating content assist (Ctrl-Space) the Orion Javascript Tooling Support provides many code templates for common code patterns and common library usage.  Previously the entire template list would be made available to the content assist proposal list, only being filtering by the characters typed.  Now, the location you are in is used to scope the proposals so that only applicable code patterns are provided.

Unscoped proposals:

Scoped proposals:

Show occurrences of object properties

Selecting a named object property with Show Occurrences turned on will highlight the property definition as well as all references to it within the object expression (via this object).

The outliner has also been improved to list the properties of an object.

ESLint updated

Orion is now using the the latest version of ESLint – 0.4.2

Esprima updated

The Esprima parsing library that underpins much of the Javascript tooling support in Orion has been updated to 1.1.0-dev.

Parser updates

The Orion customized version of the Esprima parser has seen many updates in 6.0, from performance improvements in  the token stream and ESLint integration to improved parser errors that direct users how to correct their code problems.

There have also been a few updates to the parser’s tolerance while parsing code with errors in it. Additional recovery support has been added for the following scenarios:

Missing tokens in call expressions:

Missing tokens in object expressions:

Missing declarations in object properties:

Missing tokens in if statements:

Missing tokens in while statements:

Missing tokens in for statements:

Experimental Web Worker Support

The JavaScript Tools engine can now be hosted in a web worker, off the main browser UI thread. The worker delivers increased responsiveness when editing very large files, as expensive operations like parsing and validation do not block the UI. The worker is turned off by default in the Orion 6.0 release, but users can enable it by doing the following:

1. Go to Settings > Plugins.
2. Scroll down to “Orion JavaScript Tool Support” and click the Plugin link.
3. Click the “Use a web worker” checkbox:
   
4. Reload the Orion editor. You won’t see any visual changes, but under the hood, the JS tooling will be super fast.