Features

aclement edited this page Oct 9, 2012 · 23 revisions

This page gives an overview of all the features in Scripted.

Navigation and Search

Scripted provides several ways to navigate and search your project for content.

Outline view

The outline view is a dialog containing list of all functions in the current JavaScript file. You can use this to navigate to the declaration of any one of these functions. Typing will filter the list.

The outline view

You can open the outline view by typing Ctrl/CMD+Shift+O.

Find file

The find file dialog allows you to search for and open files inside of your project. You can use * wildcards in the search string.

The find files dialog

You can open the find file dialog by typing Ctrl/CMD+Shift+F.

Search files

The search dialog allows you to grep through all files in your project for a particular string.

The search dialog

Navigator

Scripted uses a standard file navigator on the left-hand side that lists all files in the project and allows quick navigation to them. The navigator is very basic at the moment and was primarily created for use in the early days of development when the 'open file' dialog did not exist. If you find it too limiting (and just plain annoying!), you can turn it off, see FAQ question How do I turn off the navigator?

Breadcrumb

Above the editor is a breadcrumb that shows all parent directories of the current file and allows quick navigation to any file in one of those directories. Just hover over an element of the breadcrumb to see other files in the same directory.

History

That strange icon to the left of the breadcrumb is the history navigator. It lists all recently visited files and allows quick navigation to any one of them.

Editor

The Scripted editor is borrowed from Eclipse Orion. So, the look and feel will be familiar to any Eclipse users. To see the full list of supported key bindings, open the help panel (icon in the top right or use Cmd/Ctrl+h).

Sub-editor

To the right of the main editor is an area we are calling the side panel. This is normally closed but can be opened to show information relevant to the task being worked on in the main editor. At the moment the only component (pane) that can be shown in the side panel is a secondary editor which is often called the sub-editor. This can be used for browsing secondary parts of the codebase without losing main editor context. It can be opened using the icon in the top right or the key binding Cmd/Ctrl+Shift+E. Or by simply using the Shift modifier key when opening file links (in the open file view) or navigating to declarations with F8, the result will be opened in the sub-editor. The two editors can be switched around (the main editor will open the file currently visible in the sub-editor, and vice versa) by pressing the icon at the top of the sub-editor

Content assist

Content assist in Scripted uses an inferencer to calculate proposals. The inferencer attempts to propose semantically relevant items, as you can see here:

Content assist

You can see that fun and funToo are proposed with the appropriate return type. Underneath that, you can see the non-inferred proposals. These are any properties found in the file that match the prefix of the current identifier, but cannot be shown to be statically relevant at the location. Since JavaScript is a dynamic language, accuracy in type inferencing will always be weaker than in statically typed languages like Java. For this reason, Scripted also shows the non-inferred proposals in an attempt to propose items that could possibly be relevant.

Hovers

Hovering over identifiers will display a tooltip that describes the identifier's inferred type. For example:

Hover support

Navigate to definition

Pressing F8 will navigate the caret to the inferred declaration of whatever is currently selected. Shift+F8 will open the declaration in the sub-editor. Ctrl/CMD+F8 will open the declaration in a new tab.

Navigate to module

Selecting a module name in a define or require call and pressing F8 will navigate the caret to the module declaration corresponding to the dependency. As with navigate to definition, Shift+F8 will open the module in the sub-editor. Ctrl/CMD+F8 will open the module in a new tab.

JSdoc support

Scripted recognizes JSdoc comments in the source code and parses them to feed into its inferencer. Currently, Scripted recognizes @type, @param, and @return tags. See the Google Closure Compiler for a complete description of how to specify tags and type definitions. Here is an example showing how to specify an object literal as in JSdoc:

JSdoc support

Inferred Project root

Scripted attempts to locate the root of the project by looking for a nearby .git or .project in the file system hierarchy around the file you have opened. If it cannot find one it will run in single file mode. If you wish to force a root (because you don't yet have the other marker files around) you can do so by creating a .scripted file - which can simply be empty. Scripted needs to know the root because, of course, some operations (like content assist, dependency resolution, search) happen in the context of a project.

Key bindings

Scripted has been designed so that it is keyboard-friendly.

(Note: for simplicity we use the Windows/Linux bindings in this section. For Mac users, replace Ctrl with CMD and the binding will work.)

The following is a list of the most interesting keybindings:

  • Ctrl+Shift+F : open find files dialog
  • Ctrl+F : find-in-file
  • Ctrl+L : go to line
  • Alt+Shift+F : Reformat selection or entire file using JSBeautify
  • Alt+Up : Move selected lines up
  • Alt+Down : Move selected lines down
  • Alt+Shift+Up : Copy selected lines up
  • Alt+Shift+Down : Copy selected lines down
  • Ctrl+Shift+O : Show outline
  • Ctrl+Space : Invoke content assist (this keybinding is the same on Mac as on Windows/Linux. Do not used CMD)
  • Ctrl+Shift+E : Toggle sub-editor
  • Ctrl+Shift+S : Switch between sub and main editors
  • Ctrl+D : Delete selected lines
  • Ctrl+/ : (un-)comment selected lines
  • F8 : Navigate to definition of a

And there are others. In the Scripted editor, click on the ? icon (or press Ctrl+h) to see a complete list.

Where appropriate, we have used the default Eclipse bindings. However, due to clashes with default browser key-bindings, certain keybindings are not available to Scripted. For example, Ctrl+Shift+R is open resource in Eclipse, but in browsers, it is a hard refresh. So, in Scripted, we use Ctrl+Shift+F instead.

Navigation bindings

For any navigation commands like F8 or link clicking in dialogs, Scripted uses the following keybinding idioms:

  • Invoking command with no key modifiers will open the link in the current main editor
  • Invoking command with the Shift key pressed will open the link in the current sub-editor
  • Invoking command with the CMD/Ctrl key pressed will open the link in a new tab

Configuration

Here is a complete listing of configuration options available in the .scripted file:

  • ui
    • font : String
    • fontsize : num
    • navigator : bool (hide/show the navigator)
  • JSLint See the JSLint docs for a full list of options
    • global : list of global variables
    • options : list of jslint options
  • formatter
    • js
      • indent_size (default 4) : indentation size,
      • indent_char (default space) : character to indent with,
      • preserve_newlines (default true) : whether existing line breaks should be preserved,
      • preserve_max_newlines (default unlimited) : maximum number of line breaks to be preserved in one chunk
      • jslint_happy (default false) : if true, then jslint-stricter mode is enforced. jslint_happy will give 'function ()' !jslint_happy will give 'function()'
      • brace_style (default "collapse") :
        • collapse put braces on the same line as control statements (default),
        • expand put braces on own line (Allman / ANSI style)
        • end-expand put end braces on own line.
        • expand-strict put brace on own line even in such cases:
        var a =
        {
            a: 5,
            b: 6
        }
         This mode may break your scripts, so beware\! - e.g when returning an object literal.
  • exec : this section configures shell commands to be executed when certain keybindings or events occur. For a detailed description visit the Executing Shell Commands page.