Configuring your Orion project

Everyone loves to customize stuff.

In Orion 11.0, we provided support for .tern-project files so you can do just that. A .tern-project file, for those unfamiliar with them, is a configuration file that lives at the root of your project, is entirely JSON, and tells Tern how and what to run with.

Lets see an example file (the one used in the Orion client):

{
  "plugins": {
    "node": {},
    "requirejs": {},
    "express": {}
  },
  "ecmaVersion": 5,
  "libs": [
    "ecma5",
    "browser",
    "chai"
  ]
}

See? It’s not so bad. Now lets talk about what all the parts mean, and why you would want to make one.

The first thing typically asked when talking about these files and configuring your project is: “what if I don’t have a .tern-project file?”. The short answer is; we start Tern with a default configuration that contains every plugin we pre-package in Orion.

The longer answer is:

  1. you get all of the required core services plugins from Orion (like HTML support, parsing plugins, etc)
  2. you get all of the pre-packaged plugins (mongodb, redis, mysql, express, amqp, postgres, node, requirejs and angular)
  3. you get a default ECMA parse level of 6
  4. you get a default set of definitions (ecma5, ecma6, browser and chai)

Basically, everything will work right out of the box, the downside is that you get a lot more stuff loaded in Tern than you might need (or want).

ecmaVersion

This is the most common element that people create a .tern-project file for, and its an easy one. If you are coding against ECMA 6, the defaults are fine. If you are not, its best to change this to be 5.

libs

This entry describes type libraries you want Tern to use. These libraries provide type information that is used for content assist and inferencing. At the moment, only the definitions that come pre-packaged in Orion can be entered in this list, which include  ecma5, ecma6, browser and chai.

I know what you are thinking. What if I have a definition not in the list I would like to use? We are working on support for custom definition files directly in the project, and providing a UI to install new ones.

plugins

This entry describes all of the plugins that you want Tern to run with. As mentioned, by default you get everything. Leave it out? You get everything. Empty plugins entry? You get everything.

Regardless of what you put in the plugins entry, you will always get the core services plugins that Orion needs to function – so no, you cannot break the tools.

While everything will work fine right out of the box with all plugins running – you can really improve the performance and memory usage of the tools if you tell us what support you actually need. For example, working on a node.js project? only include the node plugin. Working on AMD browser project? only include the requirejs plugin. You get the idea – only load what you actually need.

At the moment, the list of plugins that can be enabled is amqp, angular, express, mongodb, mysql, node, postgres, redis, requirejs. And yes, we are working on ways to provide your own.

loadEagerly

This entry is a list of files that are so important, that you just have to have Tern load them when it starts up. All joking aside, this entry is best for pointing Tern at the ‘main’ in your project. For example, say you were working on a web page. You could add index.html in the loadEagerly entry to have Tern automatically load that file and all the dependent scripts right away, so everything was primed and ready to go immediately (as opposed to Tern filling in its type information as you open and close files).

dependencyBudget

Don’t change this entry. Set too low, it will cause dependency resolution to time out (incomplete type information). Set too high, the IDE will wait longer before answering whatever you asked it (content assist, open decl, etc).

So thats it. Those are all of the supported entries that can appear in the .tern-project file. A pretty short list.

You can’t break the tools by setting a bad entry – we have sanity checking that will revert to a “something is wrong, load the defaults” state. We also have linting / sanity checking that will alert you if you have broken something in the file.

Tern project file linting

Tern project file linting

Broke the file and still navigated to another file (or maybe brought in a change from git that broke the file)? We will alert you that its bad in the banner, with a handy link to jump to the file and fix it!

Tern project file banner message

Tern project file banner message

Remember, you can ignore all the warnings (if you really want to) and Tern will still start with the defaults as a safety measure.

Feeling a bit lazy and don’t want to type out a brand new file for your project? Just open up the new (empty) .tern-project and hit Ctrl+Space, which will auto-magically insert a shiny new template for you.

Happy configuring!

Posted in General | Tagged , , , | Comments Off on Configuring your Orion project

Your code has mistakes – We can help you fix them

Orion has powerful linting tools that detect potential programming problems as you type.  Our tooling provides a huge list of rules, everything from basic syntax mistakes like missing semicolons to multi-file function reference checking.  Try out the latest at orionhub.org.

The linting tools are based on ESLint, but we have our own set of rule implementations.  These rules are used to test the code in your editor as you type.  Discovered issues are marked with annotations, squiggly yellow or red underlines reminiscent of Eclipse.

linting1

Hovering over the annotation will give you a tooltip hover with a description of the problem.  In addition the hover may show buttons representing quick fixes.  Quick fixes modify your code to fix the linting problem.  While no quick fix should ever break your code, you can always undo the effects (Ctrl+Z).  Most fixes will automatically fix the code, adding or removing content, but a few will start a rename operation requiring you to type a new name.

linting2

linting3

Some quick fixes also have a ‘Fix All’ option which will fix all instances of that problem in your file.

linting4

Our rule list continues to expand.  We have incorporated rule implementations from ESLint, added rules specific to our translations support, and now we are working at writing rules that use our type inference engine to detect reference problems between scripts.

linting5

If a rule goes against the programming practices your dev team follows, you can change which rules run on the JavaScript Validation settings page.

linting6

If you want to run a linting pass on multiple files you can use the Show Problems command.  Select a file or folder in the file navigator, right click and press Show Problems… (Ctrl+Alt+P).  This will run the linter on all of the files and display them in a table.  You can click on any problem to navigate to it.

linting7

linting8

 

Posted in Tips & Tricks | Comments Off on Your code has mistakes – We can help you fix them

What is new and awesome in Orion 11.0

With Orion 11.0 officially released, it is time again to share with you the new & noteworthy items developed during this release.  Unlike previous announcements we will be posting more in-depth articles about the new functionality and how to use it.

11references

Where is this function used?  Where is it declared?  What if I need to change its signature? Global search is not the only tool for answering these questions if you use Orion 11.0.  Find All References can search through your project or workspace find potential matches and then figure out which ones are actually referencing the function (or variable) you are interested in.  Orion will sort all the matches into reference types and then provide a green check if we are sure this is a matching reference, a question mark if it is a possible reference, or a red X if it is not a reference (but matches the search text).  You can take it a step further and refactor the contents of multiple files at once.  There is a full write-up on Planet Orion with the details.

11jsdocassist

Documentation of your APIs not only is good practice, it makes the existing language tools work better.  When your JSDoc (add it to any function using Alt+Shift+J) specifies the type of a function’s arguments and returns, the tooling can offer more accurate content assist and hovers.  To help you fill in these types we now offer content assist inside JSDoc.

11quickfixall

Our JavaScript linting (based on the ESLint validator) continues to expand with new rules, new quick fixes and more.  Remember that all of the rules can have their severity configured on the JavaScript Validation settings page.  The excited new feature for 11.0 is ‘fix all’, applying quick fixes to the entire file.  Open up a file with warnings throughout and quickly apply safe fixes to clean up the whole file.  There is a lot happening in our validation support during this release and the next, so we will have a more in-depth look at the features in an upcoming article.

 

11ternproject

Many of the JavaScript tools work closely with our type inferencing engine, Tern.  To get the most accurate content assist, correct navigation and detailed hovers it is best to have your project set up in a way Tern can easily analyze your code.  The best way to provide our tooling and Tern with this information is through creation of a .tern-project file.  In the coming weeks we will give a full write-up on how to do this and exactly how it will benefit your project.

11htmlassist

Our tooling for HTML has seen impressive improvements during this release.  The parser we use was entirely replaced with HTMLParser2 providing us with much more accurate ranges and more recovery options for incomplete HTML.  Content assist has expanded to support accessibility attributes, specifically ARIA roles.  We also provide assist for many attribute values, not just the elements and attributes.  See the full write up here.

11tagmatch

We also highlight the selected tag and its matching tag close.  Have Show Occurrences option turned on in the Editor Settings to see it.

The Orion client continues to improve each release.  There were more than 150 bugs fixed during 11.0.  We have updated the libraries that we depend on to pick up their hard work:   Acorn 2.6.4 Doctrine 0.7.1 Estraverse 4.1.1 ESLint 1.9.0.  Our test suites continue to expand, the shining example being JavaScript tools which has 2232 tests and growing.

Try it right now at orionhub.org!

 

Posted in New & Noteworthy | Comments Off on What is new and awesome in Orion 11.0

Announcing Orion 11

We are pleased to announce the eleventh release of Orion, “Your IDE in the Cloud”. You can run it now on OrionHub or download the server to run your own instance. Once again, thanks to all committers and contributors for your hard work.  There were 163 bugs and enhancements fixed, across 435 commits from 21 authors! Thank you to everyone for your hard work this release.

What’s new in Orion 11?  The Orion 11 release continues to emphasize our JavaScript tooling.  In particular, the new References feature allows you to quickly browse and refactor your code.  Think of this capability as a kind of structured search: It finds raw references, then categorizes and weighs them based on how well they match your initial search and finally, provides a prioritized view for you to browse and edit.

Another area in Orion 11 that was improved was git page.  Support for pull requests and the “train tracks” (git merge/branch history) view was added.

Finally, we’ve improved our accessibility support to make it easier for you to write accessible code on the web.

Enjoy!

Posted in Announcements, New & Noteworthy | 2 Comments

What the heck does this code do? Find out before you refactor

A common problem for developers is being able to work effectively with and understand large code bases. This problem can affect everyone on a team, whether you’re new or experienced. It’s hard to know every line, and everyone needs to find their way around the code base.

Better not refactor!

Refactoring JavaScript code can be intimidating, so many developers avoid it. Over time, they write code to fix bugs and implement features, and the code base grows. As it grows, it becomes harder to maintain. At the same time, team members with tribal knowledge leave and others come on board. The technical debt grows and grows.

Orion to the rescue

Imagine that you’re browsing a code base and you see a function call. You might ask yourself:

“Where is this function defined? Are there multiple declarations? Who else uses this thing? If I change the implementation, who is affected?”

Fortunately, Orion has a new feature to help in this scenario. It’s called “References.” To use it, click a code element, such as a function call, and select an option from the References menu:

Web IDE with References menu selected

A window opens to show each match, categorized and weighted:

References window, showing categories

Categories

In the window, you can browse by category to focus on the most important matches first. For example, “Function Declarations” and “Function Calls” are important and interesting categories. If a category doesn’t contain any matches, the category is not shown. All matches are categorized, including those that occur in comments and strings. In JavaScript, strings can be evaluated (don’t do this) and JSDoc contains valuable information.

Weights

Orion includes a type-inference engine that can determine the type and scope of a function or variable. This information is used to weigh the results.

Here is a handy legend:

  • Green check mark: Perfect match
  • Blue question mark (?): Potential match
  • Red (x): Not a match

Go ahead and refactor

It’s no accident that the user interface (UI) for the References feature looks like the UI for the Global Search feature. When you’re wondering how a function is used, you need to see the calls and declarations, but you also need more information. JavaScript is a dynamic language where strings can be evaluated and functions can be saved in properties and then called or even passed around as arguments. A function can be used in meta programming; you need to be aware of that when you refactor.

You can refactor the references that you found to the main() function to be main2() by clicking Preview:

References window, showing replacements

A simple rename consists of these actions:

  1. Finding all of the references
  2. Inspecting each reference by category, noting any checks and question marks
  3. Selecting or clearing the replacement check box
  4. Clicking Replace

Of course, refactoring is more than renaming, but the first step is to find and categorize each match.

Conclusion

You can use the new References feature in Orion to understand how a variable or function is being used. Understanding the code is the first necessary step towards refactoring.

Steve

Posted in General | Comments Off on What the heck does this code do? Find out before you refactor

New Support for ARIA Content Assist in Orion

Orion’s HTML Content Assist now supports WAI-ARIA attributes and their values.

For example, when typing attributes into the start tag of a div, you can type Ctrl+Space to pop up a list of all attributes that div supports, including ARIA attributes. Use the up or down arrow keys or type the initial character(s) of an attribute name to select it in the list and read its documentation. Type Enter to have the selected attribute inserted into your file at the caret location.

The screen snapshot below shows the aria-atomic attribute selected in the pop-up list of proposals, with its documentation from the W3 WAI-ARIA 1.0 Specification alongside.

Content Assist popup list showing ARIA attributes, with aria-atomic selected

If you resize the proposals list, you can see all of the ARIA attributes that the current HTML element supports (div supports all 36 of the ARIA 1.0 attributes). The snapshot below shows the full list with role selected. The documentation for the role attribute lists 61 possible values!

Content assist proposal list with role selected

Typing the initial characters of an attribute filters the list to make it easier to scan. The typed characters are also inserted into the file. The screen snapshot below shows only attributes that begin with “aria”.

Content assist proposal list showing only aria attributes, with aria-activedescendant selected

If you type the first few characters of an attribute name before typing Ctrl+Space, the list will be filtered when it is opened. If enough characters are typed to uniquely identify an attribute, then the list is not opened; instead, the completed attribute is inserted into the file immediately. Attributes are assigned the empty string when inserted, and the caret is placed between the quotes of the empty string, which is conveniently where it needs to be for you to type the attribute’s value. For example, role is the only attribute that starts with ‘r’, and it will be inserted as role="".

Typing r and invoking content assist inserts role="" into the text

If you need help remembering an attribute’s possible values, there’s Content Assist for that, too. Type Ctrl+Space while the caret is between the attribute value’s quotes, and a list of value choices will pop up. Alternatively, start typing a character or two of the value you want, and type Ctrl+Space to get a reduced list. This comes in handy with attributes like role, where typing a ‘t’ will reduce the list to “only” 10 values instead of 61!

Content assist proposal list showing role attribute values starting with 't', with tab selected

In the same way that attribute Content Assist provides documentation for the selected attribute, value Content Assist provides documentation for the selected value, complete with a link to the value’s description in the WAI-ARIA 1.0 spec.

Orion is an “Authoring Tool” according to the definition in the W3 ATAG Specification:

Authoring Tool: Any web-based or non-web-based application(s) that can be used by authors (alone or collaboratively) to create or modify web content for use by other people (other authors or end users).

One of the goals of an Authoring Tool is to:

…ensure that all authors are enabled, supported, and guided by the authoring tools that they use toward producing accessible web content (WCAG).

Orion’s new ARIA Content Assist is a step toward achieving that goal.

Posted in General | Comments Off on New Support for ARIA Content Assist in Orion

New Graphical Git Log on Orion Git Page

Orion now supports a graphical view of commit history, similar to the git log –graph command on the Git command line.

On the Orion Git page, you will notice this small icon has been added into the header of the commit list:

20151209141244

And as the tooltip says, it draws the graph. Toggle it, and you will see this graph merged beautifully into the original commit history container.

20151209141410

It also draws the history graph for outgoing and incoming items, based on their branch commit history:

20151209141506

And the drawing stretches with the commit information container.

20151209141955

Once you click for more commits, it will keep drawing the graph from its last seen state:

20151209142118

20151209142142

Enjoy!

Posted in New & Noteworthy | Comments Off on New Graphical Git Log on Orion Git Page

New Support for GitHub Pull Requests in Orion

Orion now supports viewing and working with GitHub pull requests. Once a repository is cloned from a GitHub project, the associated pull requests can be viewed from the references dropdown menu under the expandable pull requests section.

Once the pull request section is opened under the references dropdown, you will see the pull requests associated with the repository. The source and destination branches of the pull request are shown, along with the title and request number.

There are two commands available for working with pull requests: checkout pull request and a link to the GitHub page.

pullrequestreference

The checkout command lets the user checkout the pull request like a normal branch and creates a new remote branch for the pull request, and can be viewed like any other branch in Orion. Once checked out, it will be in the state indicated by the references shown as the title of the pull request.

referenceview

newbranch

The link command opens a new tab in the browser for the GitHub page associated with the pull request, where the owner of the repository can choose to merge or reject the pull request.

Posted in New & Noteworthy | Comments Off on New Support for GitHub Pull Requests in Orion

Language Tooling in 10.0 – Moving at the furious pace of web development

The 10.0 release of Orion is now out in the wild.  A ton of work has gone into language tools since the last official release, but I hope you haven’t been waiting over 4 months to check it out.  This is a DevOps world, with fixes and improvements being delivered continuously.  Sign up for OrionHub or IBM Bluemix DevOps Services and use the latest and greatest in language tooling on the web.

Meshing HTML and JavaScript tooling

In the last release, our focus was improving our JavaScript tooling to be best in class, matching or exceeding what is being done on a desktop IDE. Orion provides a strong set of tools that could go beyond a single script file and understand your Node.js or RequireJS dependency graph.  For 10.0 we have extended this cross-file support for HTML pages.

If you add <script> blocks to your HTML you will have access to all of our excellent JS tooling.  Content assist, syntax highlighting, navigation hovers, ESDoc support, occurrences, etc.  This tooling works in embedded scripts as well as onLoad, onClick and other DOM event attributes.

Orion10a

Orion10b

We also enabled our CSS tooling for embedded CSS blocks.

Orion10c

The biggest change here is having tooling that is aware of your other scripts.  If you have a script block that points to an separate JS file, we will lookup the contents of that script.  You can navigate in-between files using tooltip hovers as well as Open Declaration and Open Implementation (more on this later).  Content assist proposals will list variables and functions you declared in other files, neatly organized by their source.

Orion10d

Orion10e

What if you have a project setup where you reference multiple files without a definitive <script src=…> link?  While not out for the 10.0 release, going forward we will allow you to customize your project setup.  Give you control over what scripts and pages should be connected to the tooling.  Currently this will be implemented using .tern-project files which can specify files to load or avoid in the tooling.

There are massive improvements to the tooling for writing HTML too.  The content assist got a complete rewrite and now the proposals you see are limited to what is valid in HTML 5.  There are proposals for attributes as well as element tags.  The tooltips for these proposals include descriptions of their purpose, annotations if they have been deprecated in the ongoing HTML 5 spec, and links for more information.  Moving forward we are investigating htmllint as a validator and adding accessibility tooling as well.

Orion10f

Orion10g

Innovative JS

Many of the Orion developers have a background in Java development using Eclipse.  Developers in Eclipse have many features at their fingertips for navigation and refactoring.  These operations are key to speeding up development, but the nature of JavaScript makes it difficult to provide them.

Open Declaration (F3) and Open Implementation (Ctrl-F3) are now available in the Orion editor.  Open Declaration will jump you to where an expression was defined, anywhere in the dependency graph.  No need to explore the file system or do a global text search to figure out who defines the function you are using.  Open Implementation operates similarly but goes an extra step, following the right hand side of assignment expressions until a final ‘code’ stopping point.  Rather than jumping you to a require() call or the define statement of a RequireJS module, Open Implementation will take you to the implementation of the function.

Orion10h

Currently Orion allows you to perform a rename command.  This will find all references to the selected type and rename them.  This is much faster than Search and Replace.

Orion10i

Right now this is limited to a single file, but there is a huge new feature coming shortly that will change this!

Orion10j

The Orion language tools have support for ES6 constructs.

Orion10k

No single blog post is going to cover everything we have done for 10.0 and new functionality is getting released daily.  Here are a few other ways we are improving the user experience:

  • Speeding up common operations: New quick fixes are available, there is a context menu for the editor, and shortcuts were added to editor settings.
  • Let the user know what it going on: There is progress reporting as the tooling starts or as longer operations run and more detailed explanations are shown when a command doesn’t work.
  • Fixing bugs: If you found a case where the tools just didn’t work, try it again.  We are constantly making fixes and we updated to the newest versions of the libraries we use to pick up all of their hard work (escope 2.0.4 Tern 0.10.0 then 0.12.0 Acorn 2.0.4).  The language tooling has over 1800 unit tests to check for regressions as we deliver new features.
Posted in New & Noteworthy | Comments Off on Language Tooling in 10.0 – Moving at the furious pace of web development

Announcing Orion 10.0

The tenth release of Orion was made available this week. You can check it out now on OrionHub, or download the server to run your own instance. In numbers, this release contains 255 fixes and enhancements, in 650 commits, by 33 unique authors. Thanks to all contributors for your work on this release!

This release contains significant enhancements to both JavaScript and HTML tooling. In JavaScript tooling, there is a new Open Implementation command that will traverse across references to find the declaration of a function, including traversal across source files. HTML tooling now includes content assist for the full set of both HTML tags and attributes, including hover documentation to help you make sure you are using the right attributes. Stay tuned for a future blog post going into more detail on the language tooling improvements in Orion 10.

Another major new feature in Orion 10 is support for working with Git sub-modules. Read our detailed blog post and user guide for more details.

The Orion user interface has had a number of nice improvements, outlined in a recent blog by Eric Moffat. There has also been good progress on the Node implementation of Orion, which has gained support for global search, as well as early support for working with Git.

Enjoy the release!

Posted in Announcements, New & Noteworthy | 1 Comment