Cloud Foundry Blog

About Andy Clement


Using the New Scripted JavaScript Editor for Node.js Development

This week VMware released the Scripted code editor on GitHub: https://github.com/scripted-editor/scripted.

Scripted, a JavaScript editor from VMware, is a general purpose code editor intended to be very lightweight with an initial focus on giving a great JavaScript editing experience– particularly around content assist and awareness of module systems. It is a browser-based editor that runs locally on a developer’s machine with a Node.js instance serving the editor code and performing the editor operations. The only pre-req for running Scripted is that you have a recent version of Node.js installed. Scripted is implemented in 100% JavaScript, HTML and CSS. If you are interested in more background on Scripted, you can read more about it on the SpringSource.org blog.

Features

  • Fast startup, lightweight
  • Syntax highlighting for JavaScript, HTML and CSS
  • Errors and warnings:
    • JSLint is integrated to provide error/warning markers on JavaScript code
    • AMD and CommonJS module resolution: There is basic resolution where unresolved references will be marked as errors
  • Content assist:
    • Basic content assist for HTML, CSS
    • For JavaScript, content assist is driven by a type inferencing engine which is aware of AMD/CommonJS module dependencies and also uses JSDoc comments to help it understand the code
  • Hovers: Hovering over a JavaScript identifier will bring up the inferred type signature
  • Navigation: Press F8 on an identifier (that the inferencer has recognized) and the editor will navigate to the declaration. This also works on module identifiers (e.g., in define() clauses)
  • Formatting: JSbeautify is integrated
  • Sidepanel: Alongside the main editor, a sidepanel can be opened. Currently this can be used to host a second editor
  • Key binding to external command: Key bindings in the editor can invoke external commands (less, mvn, etc.)

There is much more detail on these features in the wiki documentation.

For Node.js Development

As listed in the features above, Scripted understands the CommonJS module system, as employed by Node.js apps. Understanding modules means two key things:

  • References to non-existent modules can be reported at editing time.
  • Knowing the module, we can look inside and from the contents offer appropriate content assist where the module is being used.

The following screenshot shows Scripted being used on a Node.js module and in this case an invalid module reference is being reported:

In that same piece of code, here we can see that because we recognized the module, content assist is correctly proposing the two methods from the users module, called getUser(id) and getUserCount():

The keen eyed amongst you will notice that in the content assist proposals the return value of getUser(id) was shown as a Person. This was inferred by using JSDoc that was attached to the definition of getUser(id) in the users module:

Knowing the return value then enables smart content assist at the location where the return value of the function is referenced.

For an integrated experience with Cloud Foundry, you can use the key binding configurations for Scripted to cause a vmc operation to execute from the editor. Configuration of Scripted is done through a .scripted file at the root of the project, a bit like a .virc file for vi. This file is a JSON format document, and the supported configuration options are covered in the documentation (see the section on configuration here). Using the exec-keys config option, it is possible to connect a key binding to invocation of a command. Here is some vmc related configuration:

{
    "exec": {
        "onKeys": {
            "ctrl+shift+alt+p": {
                "name": "vmc push scriptedapp",
                "cmd": "vmc push -n scriptedapp --runtime node08 --path .",
                "timeout":60000
            },
            "ctrl+shift+alt+u": {
                "name": "vmc update scriptedapp",
                "cmd": "vmc update -n scriptedapp",
                "timeout":60000
            }
        }
    }
}

In this next screenshot you can see:

  • On the right the help panel is open and the new key bindings are listed for our vmc operations.
  • The command output currently goes to the JS console (this will be improved!). The console here is showing the command has been invoked and the push was successful.

Want To Try It Out?

If you wish to try it out for yourself, arm yourself with a copy of Node.js then jump onto the Scripted GitHub page for instructions on how to get started.

Future Plans

Over the next few months we are going to focus on a few things:

  • Even smarter content assist and improved navigation options.
  • More side panel contents. This is something I haven’t focused on in this article but it is shown in the video available on the project homepage. The side panel is intended to host information relevant to the task you are trying to achieve in the main editor. This might be code, documentation, search results or a preview. Watch the video to see the side panel in action.
  • A plugin system for extending Scripted. Plugins, like Scripted itself, will be 100% JavaScript, HTML and CSS.
  • Debugging integration. Exploring integration with tools like Chrome Dev Tools and Node.js inspector.

We open-sourced Scripted to accelerate adoption and collect feedback. If you want to help us shape the editor, please join in the discussion. There is a scripted-dev Google Group for discussing it and a jira issuetracker for logging bugs, enhancement requests and voting on existing issues to ensure they are prioritized appropriately. If you want to start hacking on the codebase yourself we are definitely open to submissions–see the GitHub page for more information. The codebase is very new at the moment so there isn’t really a steep learning curve.

Please try it out! https://github.com/scripted-editor/scripted.

Andy Clement

Andy Clement is a staff engineer in the SpringSource division of VMware, based in the languages and tools lab in Vancouver. He has more than ten years experience in Enterprise Application Development and now spends his time building tools for languages like AspectJ, Groovy and JavaScript and frameworks like Grails. He currently oversees the Groovy Grails Tool Suite deliverable, a variant of the Spring Tool Suite with a focus on Groovy and Grails.

 

Facebook Twitter Linkedin Digg Delicious Reddit Stumbleupon Email