Orion 8.0 – Language Tooling Enhancements – Part 1

The number of language tooling enhancements added to Orion for the 8.0 release is so large we had to break it up into two parts.  Here is the first list of new and improved features available right now at orionhub.org


We have introduced a new orion.edit.hover API to provide tool-tip like hovers in the editor.  The hovers can display detailed information or even provide rich HTML content.  The JS and CSS tooling already implements hovers to provide immediate feedback on what you are looking at.

In the editor:

Hovering over an annotation will provide the complete description of the issue.  You can implement the orion.edit.validator service to add your own translatable problem annotations.  In this screenshot you are also getting a sneak peek at a new feature that we will talk about in Part 2.


You can provide hovers for any part of the file you hover over, not just existing annotations.  For example, in JavaScript files if you have over a function declaration or expression that has JSDoc attached you can see the formatted documentation.


Speaking of documentation, you can use the keybinding Shift-Alt-J or under the menus at Tools > Generate Element Comment to have the tooling generate your JSDoc comment for you.  Be sure to include the return/param types so that you get accurate content assist proposals based on the types.


In the ruler:

There are many annotations visible in the left and right side rulers when editing.  Hovers can be provided for any of these annotations and different content can be displayed based on which ruler is being hovered over.

Multiple annotations on a line will be displayed in the left hand ruler with a ‘+’ symbol.  Hovering over the icon will display the complete list of problems.  Click on the icon in the ruler to select the first annotation.  You can continue to click to skip through the different problems.  You can also double click in the left ruler to bookmark the line, adding an annotation that can easily be jumped back to after scrolling away.


When using the Git tooling, you can see more detailed blame and diff information when hovering over the colored annotations in the rulers.


Occurrences and search results for the entire file are displayed in the right-side ruler.  Hovering over the ruler will display the source of that line.


In content assist:

The hover API is also used to provide detailed information on content assist proposals.  The JS tooling provides detailed information for types provided by indexes.


Rich Content:

The hover API supports plain text and markdown syntax allowing you to style the contents.  For richer content you can also provide HTML content, embedded in an iframe.  The CSS tooling is full of rich hovers to preview what your elements will look like.

Named colors, rgb and hsl values are displayed.


Images are previewed in the hover.

cssimagehoverFont family and font weights can also be displayed.


What’s next:

In 9.0 we plan to continue expanding our usage of hovers.  We are experimenting with interactive content (color picker, regex assistance) and want the look and feel of hovers to be customizable using themes.

In the next part of this language tooling enhancements list we will talk about validation using ESLint and CSSLint, quicker ways of fixing the found problems and how we use hovers to allow faster navigation inside and between files.

This entry was posted in New & Noteworthy. Bookmark the permalink.