Page History

This section describes useful code writing features in Servoy Script Editor.

h2. Code Completion

Servoy supports code completion. As users type into the Script Editor, all known, non-private functions are displayed in a drop-down select box that becomes filtered as more characters are typed. A description box also shows when an item is selected (see below).   !7-CodeCompletion.png|border=1,align=center!
* To insert a selected item into the code, hit *Enter.*
* If a code containing variables is 	selected, hit the tab key to enter the items in sequence. !8-AutocompleteTabbed.png|border=1,align=center!

h2. Code Hints

To see information relevant to a particular code item, users can hover over the relevant parts of the code. This is true for both the code list shown in the Solution Explorer, as well as code in the Script Editor view. Servoy will provide an item description if it exists, for both out-of-the box functions as well as functions defined by the user via JSDoc (see{_}Support for JSDoc{_}section).

h2. Dynamic Code Validation

Code is dynamically validated at design-time. The success of the validation process is partially dependent on comprehensive JSDoc commenting, which enables Servoy to provide more information regarding code errors and other warnings. Warnings are flagged in the vertical ruler and outline bar, and details are provided in the Problems view at the bottom of the Servoy Workbench (see image below). !9-DynamicCodeValidation.png|border=1,align=center!


As previously mentioned, the type of warnings/annotations that Servoy shows can be customized using the *Preferences* menu (found in the Script Editor context menu).

h2. *Script Templates*

Servoy allows users to create templates for frequently-used scripts and JSDoc comments. These scripts are then enabled by Servoy for use in code completion.

Templates can be created by accessing *Preferences* from the contextual menu in Script Editor (users may have to unfold the menu tree on the left of the Preferences window to see the Templates option, see below).


!10-ScriptEditorTemplates.png|border=1!

h2. *Support for JSDoc*

Servoy features support for regular comments and JSDoc comments. Importantly, disciplined use of JSDoc comments when creating functions and variables ensures more complete information for Servoy in refactoring and code completion.

JSDoc tags can be created for an existing function by accessing the context menu Script Editor > Source > Generate Element Comment) or using the keyboard shortcut ALT+SHIFT+J (_alt+cmd+J_).

{info:title=Note}If business logic is added from Form Editor, JSDoc comment templates are automatically generated based on the  context. Users can complete the comment information as needed in Script Editor.{info}

When creating JSDoc comments, code completion is also available for the following supported tags (type '@' first, then Control-Space):
| @AllowToRunInFind\\
@author {userName}\\
@constructor\\
@deprecated\\
@example\\
{color:#000000}@param {Type} name{color}\\
{color:#000000}@private{color} | {color:#000000}@return {Type}{color}\\
{color:#000000}@see{color}\\
{color:#000000}@since{color}\\
{color:#000000}@throws {Type}{color}\\
{color:#000000}@type {Type}{color}\\
{color:#000000}@version{color} |
A complete list of other supported tags in JSDoc is provided in the Programming Guide.

h1. Code Navigation

Servoy features several options for navigating and searching for code resources. These include the default IDE navigation and search buttons on the toolbar, as well as Script Editor-specific toolbar and context menu items. This section addresses the navigational features found in Script Editor. For a discussion on general search and navigational features, see +Servoy Navigation+.

h2. Navigating Within a JavaScript File

The following tools allow users to easily find and jump to items within an open JavaScript file.
* Toggle Mark Occurrences (1)
* Next and Previous Annotation (2)
* Quick Outline
* Quick Diff !11-Annotations.jpg|align=center!
*# *Toggle Mark Occurrences* highlights every instance of a selected item within the open editor 	window. To use this function, click on the item to highlight, then 	click on the *Toggle Mark Occurrences* button.\\
{tip:title=Tip}To jump to each occurrence, 	customize the Next/Previous Annotation drop-down, discussed below.{tip}\\
*# *Next* *Annotation* (CTRL+.) and *Previous Annotation* (CTRL-SHIFT-.) allows users to navigate to  items with annotations 	(cautions, error warnings, etc.) in the open editor window, allowing 	users to jump from one annotation to the next. To customize the type 	of annotations to include in the navigation, use the dropdown menu 	next to either annotation icon (see image below).