The Code Editor

Writing code is, obviously, one of the most important aspects of software development, and what you spend a lot of time on. That's why Fire and Water come with a sophisticated code editor that was designed and written from scratch to make you productive writing code.

Aside from being good at letting you type code, the editor comes with many advanced features to help you be more productive.

Basic Editing

Of course the editor lets you type and edit code, and navigate around the code file, using the mechanisms and shortcuts familiar to the respective platform, such as using ⌥-Left/Right (on Mac) or Ctrl+Left/Right (on Windows) to navigate between words or tokens. You can find a full overview of all shortcuts in the Keyboard Shortcuts topic.

Fire and Water automatically take care of saving any changes yu make to your code, when needed, and will also automatically reload files when their content changed outside of the IDE. You can focus on coding, and let the editor take care of the rest. (The IDE will save your changes to disk when building, when you focus away from the app, or at 30-second intervalls, to make sure your dode is always safe).

Code Formatting

The editor can reformat code for you, to match proper indentation and code style. This can happen automatically, in certain scenarios, as well as be invoked manually.

By default, the editor will adjust the indentation of code when you paste, to a sure the newly added section has the right offsets. For C#, Swift and Java, it will also reformat the current block of code when you type a closing curly brace (}). Of course this can be turned off and back on in Preferences.

You can also manually ask to reformat the current selection or the whole file, using the "Reformat *" menu items or their corresponding keyboard shortcuts.

Reformatting is supported for all Elements languages, whole-file reformatting is also available for XML-based files, including XAML.

Syntax Highlighting

The code editor of course provides syntax highlighting, making different parts of cour code sho in different colors and styles in order to make the code more easy to read and understand, and to notice obvious mistakes better. Syntax highlighting (and some of the other advanced features discussed below) is provided for all Elements languages, as well as some other file formats:

  • Oxygene (.pas)
  • C# (.cs)
  • Swift (.swift)
  • Java (.java)
  • Go (.go)
  • Mercury (.vb)

plus:

  • XML (.xml, .plist, and more)
  • XAML (.xaml)
  • HTML with nested JavaScript, CSS, and the five Elements languages (.html, .aspx)

Code Smarts

As you write or adjust your code, the code editor provides a whole bunch of advanced tools to make it easier for you to write the code:

Code Completion

Code Completion can provides a dropdown of all valid identifiers at the current cursor position. It helps you remember the names of classes or their members as you type them, and even lets dou discover new APIs. Code Completion (also referred to as "CC") can be set to pop up automatically as you type (in Preferences) or can be invoked using ⎋ (Escape) on both platforms, or with Ctrl+Space on Windows.

Fire and Water's Code Completion is very sophisticated, and the Code Completion topic dives into all its capabilities in more detail.

Code Completion is supported for the five Elements languages, XAML, Android XML Files and .pList files.

Peek at Definition

Peek at Definition can be invoked via ⌘D (Fire) or Ctrl+D (Water) and it shows you a popup window where you can see the definition of the current identifier. This is very handy if you just want to know what type the current variable is, or see all the members of a class.

Peek at Definition lets you have a quick peek, without disturbing your flow. If you need to take a stop further, you can use the next feature:

Go to Definition

Go to Definition ("GTD") works similar to the previous feature, but it takes you from your current position in code to the place where the identifier is defined. This could be a a different location in the same file, or a different file in your project. If thje code in question is not define din your project but externally – say you're invoking GTD on a system type – the IDE will generate a source representation of the type or member for you, in the programming language used by your current file, and open that in a read-only editor.

You can invoke Go to Definition with ^⌥D (Mac) or Ctrl-Alt-D (Windows).

Inline Symbol Information

You can optionally turn on Inline Symbol Information in in Preferences in order to always have the editor show you a quick hint at how the identifier currently underneath the cursor is defined.

Smart XML Closing Tags

in XML files, typing </ will automatically insert the matching closing tag, assuming the XML structure of the file is valid up to the current cursor location.

Search and Replace

The code editor (and Fire and Water in general) have extensive support for searching and replacing, in the current code file or solution-wide. The separate Search and Replace topic goes into all the capabilities, in more detail.

You can find all the relevant commands (and their keyboard shortcuts) in the "Edit|Find sub-menu. Most relevant, ⌘F / Ctrl+F will bring up the find pane at the top of the editor. ⌘F / Ctrl+F lets you set the search term to the current selection or the token currently at the cursor, and ⌘G / Ctrl+G let you jump to the next occurence of the search term in the current file.

Build Messages

As you build your project, compiler messages such as errors, warnings or hints will automatically show in the editor, highlighting the relevant line in red, yellow or green, respectively, and showing a short version of the error message at the end if the line.

In the case where there's not enough room and the message overlaps with code, the message will automatically move out of the way as the cursor enters the line in question. If several messages are reported for the same line (e.g., often an error might come with additional hints on how to fix it), you can use ⌥⌘-Left/Right (Mac) or Alt-Shift-Left/Right (Windows) to toggle between them.

Debugging

When Debugging, the editor provides several features that help you test your code.

  • Breakpoints can be set at any line, by clicking the very left few pixels or (when visible) the gutter with the line numbers. A ligt blue bubble will show to indicate a breakpoint, which will turn dark blue when breakpoint becomes active in a debug session, or red when it is invalid. Breakpoints can also be set via the "Debug|Add Breakpoint on Current Line" menu item, or ⌘/.

  • When hitting breakpoints, or otherwise paused on an exception or stepping thru code, each Stack Frame will be highlighted with a colored line and an indicator arrow on the left. This includes the current debugging position, but also any locations up the stack or from other threads. The thread ID will be shown at the end of each such line.

  • The debugger will also attempt to Evaluate the current selection or the token currently underneath the cursor, and – if succesful – will show its value at the end of the line.

  • Finally, for the active stack frame, all known Local Variables will also be evaluated, and their values will show at the end of the line where they were defined.

Refactoring

Refactorings allow you to let the IDE make complex (and not so complex) adjustments to your code for you, rather than having to do them manually. These can go from simple things such as uncommenting a block of code, to changes with wide-ranging effects such as renaming a public member of a class.

(Un)-Comment Code

Pressing ⌘/ / Ctrl+/ will comment out (i.e. deactivate) the current line or selection or – if it is already commented-out – reactivate it. This feature works as you might expect, in various scenarios:

  • Without a selection, it toggles the presence of // at the beginning of the current line
  • With a multi-line selection or a fully-selected line, it toggles the presence of // at the beginning of the all lines covered by the selection. Even some lines already start with //, each line will get an extra //. Only if all lines start with //, will the // be removed.
  • With a partial selection in the current line, the selected part will be surrounded by /* and */ comment delimiters, or, if the exact selection (ignoring whitespacce) is already wrapped in any comment delimiter valid for the language, it will be removed.

This probably sounds more complex than it is, in reality you will find that ⌘/ / Ctrl+/ simply does what you expect ;).

Flatten/Expand Selection

Flatten Selection (^X on Mac) will collapse the current selection into a single line, converting all line breaks and indentation intoa single space each. This is useful form consolidating a statement that spans multiple lines, or to collapse a simple C# property declaration.

Expand Selection, only available for C#, Swift and Java, will undo the above by (re-)inserting appropriate linebreaks around all curly braces in the current selection, and then reformatting the relevant code to bring it back into proper shape.

Rename

Remove Unused Namespace Usings/Imports

Oxygene: Move Selected Methods into the Class Declaration

Oxygene: Move Selected Methods out of the Class Declaration

Oxygene: Complete current Class

Oxygene: Sort Implementations to Match Declaration Order

Swift 3.0 Migration: Add _ to Unlabeled First Parameters

Oxidizer

Oxidizer is a tool that allows you to convert source code from certain languages (including C#, Java and Objective-C) into the language of your current project. Among other options, it integrates with the editor via the "Edit|Paste" submenu to let you p[aste foreign code and have it converted on the fly.

This is very helpful if you, for example, find code snippets that you want to re-use online, but they are in a different language (say, C# for a .NET snippet, but your project uses Swift, or old Objective-C code, for a Cocoa task.

You can read more about Oxidizer here.