Back in March of 2017, we introduced the Webtask Editor which allowed development of Serverless Webtasks right in a browser with no installations required. Today we are shipping version 3.0 of the Extend Editor.

The biggest change in this version is a switch to the Monaco editor. This switch enabled the development of several new features that enhance discoverability, quality and development workflow.

Discoverability Features of the Extend Editor

Intellisense Everywhere

The Extend Editor offers intellisense for all built-in Node modules, our webtask context, and NPM modules referenced by your webtasks.

Built-in Modules

Built-in Modules Intellisense

Webtask Context

It is now easy to discover meta, secrets and even the storage API that is available from the webtask context.

Context Intellisense

The editor will even present named meta and secret keys defined in the webtask configuration.

Named Secrets

NPM Modules

The editor will reach out to DefinitelyTyped and pull in intellisense definitions for any NPM modules referenced by the webtask.

NPM Modules Intellisense

Note: This feature depends on the module maintainers keeping updated definitions on DefinitelyTyped.

Inline Support for NPM Modules

In the previous version of the editor, you needed to open the NPM Modules panel to add a dependency on a package. The new editor allows you to add that dependency directly from the code editor.

To add a dependency from the code editor:

  • Simply require any package available on NPM; e.g. const _ = require('lodash')
  • Click the blue add icon in the left hand margin.

Inline NPM Modules

That is it! Checking the NPM Modules panel, the module is added as expected. When hovered the module version is displayed. Command clicking the module in the editor opens the NPM page for the module in a new window.

Note: When using inline support for modules, the latest version is used by default. To get a specific version, use the NPM Modules panel.

Quality Features of the Extend Editor

Editor Customization

Most developers have strong opinions on editor settings, Extend Editor allows you to quickly set common settings to your preferences and stores them in local storage. Font Size, Word Wrap, Minimap and several other options can be set via the gear icon menu located in the lower right hand corner.

Editor Settings

ESLint Support

ESLint is a type of static analysis that is used to find problematic patterns in code. JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. Without the benefit of a compilation process, JavaScript code is typically executed in order to find syntax or other errors. Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.

We have added support for ESLint directly in the editor. Rules can be defined by clicking the ESLint link in the footer of the main editor window. You can also disable ESLint completely by selecting the option in the settings menu.

ESLint Rules

Inline ESLint Modifications

Not sure what ESLint rules to enable? Simply enable the ESLint inline edition setting, and add rules on the fly.

Inline ESLint Rules

Prettier Support

Prettier is an opinionated code formatter that removes all original styling and ensures that all code conforms to a consistent style.

We have also added support for Prettier directly in the editor. Features can be toggled by clicking the Prettier link in the footer of the main editor window. To apply Prettier formatting, hit Command-K or you can apply it on save by enabling this feature in the settings menu.

Prettier

Accessing the Extend Editor 3.0

Using Webtask.io

The Extend Editor used by Webtask.io has already been upgraded to version 3.0. Just head over to webtask.io/make, log in with your preferred credentials, and you will be presented with the 3.0 version of the Extend Editor.

Using an Extend Cluster

Please submit a request to have your default editor migrated to the new Extend Editor 3.0.

Using the Extend Editor 3.0

To use the Extend Editor in your existing application integration, simply update your script reference to one of the following:

Note: The version specificity in the URL are conveniences for pinning your application to a specific version. Using the top most URL will automatically pick up minor updates and bug fixes. The final version will not be updated at all and allows you to update manually.

There are also new configuration settings available, specifically via a functionEditor block:

{
  "functionEditor": {
    "minimap": true,
    "fontSize": "13px",
    "mouseWheelZoom": true,
    "readOnly": false,
    "renderIndentGuides": true,
    "scrollBeyondLastLine": true,
    "wordWrap": "off",
    "tabWidth": "2",
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "disablePrettier": false,
    "disableEditingSettings": false,
    "disableEditingLinterRules": true,
    "linter": {
      "enabled": false,
      "rules": {},
      "globals": {}
    },
    "snippets": {
      "enabled": true,
      "collection": [
        {
          "label": "snippet label",
          "value": "snippet code",
          "description": "snippet description"
        }
      ]
    },
    "autocompletion": {
      "enabled": true,
      "disableWebtaskCompletion": false,
      "disableNodeCompletion": false,
      "disabledNpmModulesCompletion": false,
      "collection": [
        {
          "name": "autocompletion name",
          "definition": "ts declaration"
        }
      ]
    }
  }
}

For detailed configuration settings, please see the configuration documentation.

Summary

The release of version 3 of the Extend Editor represents months of development, refining, and testing by the entire team. We are excited to share this release with you and hope you are as enthusiastic about the new features as we are.

The Extend Team

If you encounter an issue, please submit an issue to Extend Support. This will allow us to track the issues as they come in and notify you of resolutions as they are released.