Built-in Code Editor

Contents
  Opening, Saving, and Adding a File
  Customizing Your Editing Environment
  Managing Editor Extensions
  Standard Editing Keys for Daily Use
  Sample Output from a Find Command
  File/Navigation Features
  Using Code Autocompletion Hints
  Using Quick Edit
  Using Quick Open
  Resources

The Develop tab of Intel® XDK lists those files associated with the active project in the upper-left sidebar. After you open or create a project, click the Develop tab. If needed, click the CODE button to use the built-in code editor:

  When editing html files associated with certain projects, the toolbar displays CODE and DESIGN buttons to let you switch between the editor Code view and GUI Design view. To the right of Working Files, buttons let you sort the file names in the tree and enable or disable split view .
  After you open and modify a file, a Working Files section appears above the project name, similar to a "tab view" in other editors. To add a file immediately to the Working Files section, double-click its name in the left sidebar file tree. You can view image and .md files as well as text files.
  The left sidebar below the project name shows all files associated with the project in a file tree. The files displayed are updated as you add or remove files in the file system below the project root.
  The editor Code view (shown) appears for most files. This area shows the menu bar and name of the file actively being edited.
  The Code view (shown) appears for most files. After you open html files associated with certain projects, a GUI Design view may appear instead - click the CODE button to switch to the Code view.
This built-in code editor in the Develop tab is tightly integrated with the Emulate tab. After you save a file in this editor, that file can be automatically reloaded when you click the Emulate tab. In contrast, if you save a modified file using your favorite editor external to the Intel XDK, you may need to click the Reload button to update all files in the Emulate tab. If you save a modified file using an editor external to the Intel XDK, that file will be silently reloaded in the built-in editor when you open it. To control Emulator automatic reloading, use the Emulate tab settings. This Intel XDK built-in editor is based on the Brackets* project. To install and manage Brackets extensions, see Managing Editor Extensions.

For projects created with the App Designer layout editor, the Design view appears providing access to a GUI layout editor when you open an HTML file in the Develop tab. To switch between the Code and the Design (GUI) views, click the CODE or DESIGN buttons. This tab also supports many Live Development and Live Preview features, as well as the ability to explore and integrate web services. For an overview of this tab, see the Develop Tab Overview.

Opening, Saving, and Adding a File

To open a project file for editing - such as index.html - click its name in the sidebar file tree. The selected file’s content appears.

To open and edit files not in the project's file tree, click the File > Open menu item (or keyboard short cut). Once opened, these non-project files will appear in the Working Files section.

After you modify the opened file, a Working Files section appears above the project name. To add a file immediately to the Working Files section, double-click its name.

Saving a File

To save a file, do one of the following:

  • Click the File > Save menu item.
  • On Microsoft Windows* systems, press Ctrl+S.
  • On Apple Mac* systems, press Cmd+S.

To save the file with a different name or in different directory, click the File > Save As... menu item (or use the keyboard short cut Ctrl/Cmd+Shift+S).
When using File > Open or File > Save As..., you can import files or save files from other projects, such as JavaScript libraries, images, and so on.

Adding a File

To add a file, you can use your native file system GUI or the file tree:

  • In the file tree, right-click the directory name where you want to add the file. This displays a context menu. For example, to create a file in the js directory:

  • Choose New File from the context menu (as shown above).
  • Type the file name.
  • A blank file appears in the code editor. To copy a file's contents into the editor, drag and drop the file from your file system's GUI interface (such as Microsoft File Explorer* or Apple Finder*) into the editor window.
As you add or delete files below the project root using your file system, they appear in the file tree. To view the project root, either hover over the project name or right click a directory or file and choose Show in Explorer from the context menu.

Using Context Menus

Both the Working Files section and the file tree sidebar support context menus. To display the context menu, right click within the Working Files section or within the file tree sidebar.

You can use the context menu to add a folder or file, rename or delete a file, show a directory in the file system explorer GUI tool, find or replace strings in a file, and refresh the file tree. If you right click a file under Working Files, you can also highlight the file in the file tree (Show in File Tree).

Customizing Your Editing Environment

The screen above shows the file tree sidebar and line numbers. In addition to adding editor extensions (see Managing Editor Extensions), you can customize the editing window by using the View menu or its key combination shortcuts (with Microsoft Windows* systems, press Ctrl; with Apple Mac* systems, press Cmd):

To Do This Key Combination View Menu Item
Open a split view of multiple files View > Vertical View (side-by-side)
View > Horizontal View (above-and-below)
Close a split view by closing the current pane Click View > No Split
Show/Hide the sidebar (toggle) Ctrl/Cmd+Shift+H View > Hide Sidebar (for increased width)
View > Show Sidebar (to use sidebar)
Choose visual theme View > Themes...
Choose color scheme, font pixel size, and so on
Increase/Decrease font size Ctrl/Cmd++
Ctrl/Cmd+-
View > Increase Font Size
View > Decrease Font Size
Restore font size (toggle) Ctrl/Cmd+O View > Restore Font Size
Highlight active line (toggle)   View > Highlight Active Line
Show line numbers (toggle)   View > Line Numbers
Allow word wrap (toggle)   View > Word Wrap
Show/Hide graphical hover tips for colors and images (toggle)   View > Quick View on Hover
Display the JSHint pane (toggle)   View > Lint Files on Save
For other actions, open the View menu   View

Configure JSHint

To configure JSHint, create a .jshintrc file in the project root, as described at http://www.jshint.com/docs/. Unlike the standalone JSHint, only the .jshintrc file in the project root will be read for configuration settings. An orange triangle in the lower-right indicates the number of JSHint problems if View > Lint Files on Save is active, or contains a green checkmark if no issues are detected or a white circle if View > Lint Files on Save is disabled. Click the orange triangle to show or hide the JSHint panel.

Enable Split Views of Multiple Files

To view multiple files:

  1. To create a side-by-side view of multiple files, click View > Vertical Split.
  2. To create an above-and-below view of multiple files, click View > Horizontal Split.
  3. To disable split screen view and close the pane not in focus, check View > No Split.

After you enable a split screen view, operations apply to the split pane with current input focus, such as opening or saving a file. Also, the Working Files heading above the file tree is replaced with either Left and Right with a vertical split, or Top and Bottom with a horizontal split.

For example, if you split the views vertically and open files index.html and main.js when using the Brackets Dark theme (View > Themes...):

Managing Editor Extensions


To view and manage your extensions added to this Brackets-based editor, click the File menu and select Extension Manager.... To view the:
  • Available Brackets extensions not yet installed, click the Available tab. Use the vertical scroll bar to view the complete list of available third-party extensions. After reading the extension's documentation by clicking the More info... link, consider clicking the Install button to install that extension.
  • Brackets extensions already installed, click the Installed tab. The installed extensions appear. With the Intel XDK, one extension installed by default is the XLint for Intel XDK, which is a static analyzer provided by Intel. XLint applies only to CSS files. To read the extension's documentation, click the More info... link. To update an extension, click the Update button (if available) near its name. To remove an extension, click Remove near its name.

Once you install an extension, it is effective immediately, unless the extension informs you that a restart is required.

For more information about extensions and setting preferences, see: Brackets* editor documentation.

Standard Editing Keys for Daily Use

The following table lists editing actions you might use every day. Most key combinations are used by other editors (with Windows systems, press Ctrl; with Mac systems, press Cmd).

To Do This Key Combination Edit Menu Item
Cut selected code
Copy selected code
Ctrl/Cmd+X
Ctrl/Cmd+C
Edit > Cut
Edit > Copy
Paste selected code Ctrl/Cmd+V Edit > Paste
Undo last action
Redo last action
Ctrl/Cmd+Z
Ctrl/Cmd+Y
Edit > Undo
Edit > Redo
Select all lines
Select current line
Ctrl/Cmd+A
Ctrl/Cmd+L
Edit > Select All
Edit > Select Line
Add multi-line cursor to previous line
Add multi-line cursor to next line
Alt+Shift+up-arrow
Alt+Shift+down-arrow
Edit > Add Cursor to Previous Line
Edit > Add Cursor to Next line
Find string (matches are highlighted)
Find next
Find previous
Ctrl/Cmd+F
F3
Shift+F3
Edit > Find
Edit > Find Next
Edit > Find Previous
Find string in files Ctrl/Cmd+Shift+F Edit > Find in Files
Multi-cursor select all matches of selected string
Multi-cursor select next match of selected string
Alt+F3
Ctrl/Cmd+B
Edit > Find All and Select
Edit > Add Next Match to Selection
Indent
Unindent
Ctrl/Cmd+Shift+]
Ctrl/Cmd+Shift+[
Edit > Indent
Edit > Unindent
Insert/Remove line comment (toggle) Ctrl/Cmd+/ Edit > Toggle Line Comment
Insert/Remove block comment (toggle) Ctrl/Cmd+Shift+/ Edit > Toggle Block Comment
Duplicate Ctrl/Cmd+D Edit > Duplicate
Delete selected line Ctrl/Cmd+Shift+D Edit > Delete Line
Move selected line up
or down
Ctrl/Cmd+Shift+uparrow
Ctrl/Cmd+Shift+downarrow
Edit > Move Line Up
Edit > Move Line Down
Show code hints (autocomplete)
Show parameter hints
Also see Using Code Autocompletion Hints
Ctrl/Cmd+Space
Ctrl/Cmd+Shift+Space
Edit > Show Code Hint
Edit > Show Parameter Hint
For other actions, open the Edit menu   Edit

To allow characters you type to appear on multiple lines, enable multiple cursor support. For example, if you move a file to a subdirectory, you may need to insert the directory name on multiple lines that reference that file name. You can hold down the Alt key and drag vertically (diagonally) or use the Edit menu items above, such as Add Cursor to Previous/Next Line or Find All/Next Match to Selection. To learn more about using multiple cursors, see http://blog.brackets.io/2014/04/15/brackets-0-38-release-multiple-cursors/.

In addition to the Edit menu, you can access several common functions from a context menu in the editor Code view. Select the line(s) of text, right click to display the context menu, and choose the menu item, such as Copy, Cut, Paste, and Select All.

Sample Output from a Find Command

This built-in editor provides many helpful visual cues. For example, press Ctrl/Cmd+F (Edit > Find) and type the search string <script. The editor highlights occurrences of <script and its scroll bar indicates where in the file the string occurs:


You can right click in the file tree sidebar or Working Files section to display a context menu. To display the native OS file system's GUI interface (such as Microsoft Windows Explorer* or Apple Finder*), choose the Show in OS menu item. Similarly, the OS file system's GUI interface appears when you click File > Open or File > Save As... (or equivalent keyboard shortcuts).

This editor also provides advanced navigation features. The following table lists navigation or file actions (with Windows systems, press Ctrl; with Mac systems, press Cmd):

To Do This Key Combination Menu Item
Quickly open a file from a displayed list of project files. Also see
Using Quick Open below.
Ctrl/Cmd+Shift+O Navigate > Quick Open
Quickly go to a line number (nnn) in this file Ctrl/Cmd+Shift+O and type :nnn
Or instead use Ctrl/Cmd+G
Navigate > Quick Open and type :nnn
Navigate > Go to Line
Quickly go to a function definition (func) in this file.
Also see Using Quick Open.
Ctrl/Cmd+Shift+O and type @func
Or instead use Ctrl/Cmd+J
Navigate > Quick Open and type @func
Navigate > Jump to Definition
Open the next Working File for editing
Open the previous Working File for editing
Ctrl/Cmd+Tab
Ctrl/Cmd+Shirt+Tab
Navigate > Next Document
Navigate > Previous Document
Go to specified line number in this file Ctrl/Cmd+G Navigate > Go to Line
Go to the location of a function definition Ctrl/Cmd+T Navigate > Quick Find Definition
Jump to the location of the selected function's definition Ctrl/Cmd+J Navigate > Jump to Definition
In JSHint Errors pane (View > Lint Files on Save), go to first error and show its location in editor. F8 Navigate > Go to First Error/Warning
Use the inline editor to edit a selected function or CSS definition. See
Using Quick Edit below.
Ctrl/Cmd+E (toggle) Navigate > Quick Edit (toggle)
Get pop-up help on the selected keyword. Limited to CSS properties.
To close, press Esc or Ctrl/Cmd+K.
Ctrl/Cmd+K Navigate > Quick Docs
Show a file's location in the sidebar file tree   Navigate > Show in File Tree
For other actions, open the Navigate menu   Navigate

Using Code Autocompletion Hints

This built-in editor displays options (hints) as you type HTML code, JavaScript code, or CSS code. It is aware of most API objects and their methods.

For code hints to appear while editing JavaScript* files, you may need to type a delimiter character and/or move the mouse pointer to a certain position for valid tag name parameter keywords, values, or files automatically appear. For example, if you only type cordova.device no hints appear until you type the trailing period. The intel.xdk APIs also have code hints, such as intel.xdk.player:

The provided code hints are based on the analysis of the files included in the project. Also, code hints are built-in for the JavaScript language itself, intel.xdk namespace, Apache Cordova* API, jQuery library, and browser’s global objects. You can configure the JavaScript code autocompletion by placing the .jscodehints file in the project root. For the format of this file, see https://github.com/adobe/brackets/wiki/JavaScript-Code-Hints#configuration.

With HTML tags you need to press Ctrl/Cmd+space or click Edit > Show Code Hint. For example:

On a new line, start typing <scr and press Ctrl/Cmd+space. The hint choice(s) appear in a context menu:
Scroll and click one of the displayed items. In this case we must choose script!  
After you choose the tag name, type a space to view possible parameter keyword values:
Scroll to and click charset.  
With the mouse cursor between the quotation mark characters, scroll to and click one of the displayed parameter values:
Scroll to and click utf-8 or a value needed for your app.  
To enter another parameter, move the mouse cursor back to a space after the <script tag and press Ctrl/Cmd+space (Edit > Code Hint) to view the list of parameters again:
Scroll to and click type or a value needed for your app.  
With the mouse cursor between the two quotation mark characters, scroll to and click a displayed parameter value, such as text/javascript.
After you have added all the parameters, close the <script tag by typing a > character.  
The <script> tag is automatically terminated by an inserted </script> tag:

TIP: To enable the automatic display of parameters or parameter value hints (before you press Ctrl/Cmd+space for HTML code), you:

  • Need to position the mouse cursor at the proper place so the editor knows what you want to do - especially if you edit an existing line. For example, to display a list of project images, type:
  • May need to type a delimiter character to provide the proper syntax, such as a space character, quotation mark ("), period (.), or =. For example, to display image files, type <image src=" and press Ctrl/Cmd+space.

Using Quick Edit

Quick edit displays a pop-up editing window for the selected definition within the current window. It appears with a grey background and is limited to JavaScript (such as functions) and CSS code. The Quick Edit feature is available only at places where a corresponding definition is available.

For example, using the Towers of Hanoi demo app's index.html file, position the mouse pointer on the div shown below:

After you press Ctrl/Cmd+E or click Navigate > Quick Edit, the corresponding definition from the CSS file toh.css appears in a pop-up pane with a grey background, so you can view/edit that definition:

After you edit it, press Ctrl/Cmd+S to save the inlined pop-up file. To close the pop-up editor pane, press Esc or Ctrl/Cmd+E, or click Navigate > Quick Edit.

Similarly, when editing a JavaScript file, position the mouse pointer on a function reference (such as Create_Pins) and press Ctrl/Cmd+E or click Navigate > Quick Edit to display and edit the function's definition using Quick Edit. For example, when editing toh.js:

After you press Ctrl/Cmd+E or click Navigate > Quick Edit:


Using Quick Open

Use Quick Open to navigate quickly to various files, line numbers, or function definitions.

Press Ctrl/Cmd+Shift+O or click Navigate > Quick Open to display a pop-up pane in the upper right of the editing window. It initially displays a list of files:

To Do This Type This
Filter (reduce) the list of file names Letter(s) of a file name to match
Go to a line number in this file (similar to Navigate > Go To Line) A colon followed by a number, in the format :nnn
Display hints of the functions defined in this file An at-sign character, in the format @
Go to a function definition (similar to Navigate > Quick Find Definition) An at-sign character and a function name xxx, in the format @xxx

Resources


For more complete information about compiler optimizations, see our Optimization Notice.