Using Cloud IDE¶

Cloud IDE provides an environment that allows you to edit your code, while also allowing you to browse and discover the files in your directory or project.

By default, the user interface displays the Explorer view, but additional views are available. For more information about these views, see Using views to learn more about your environment.

Using the Explorer view¶

The default Explorer view enables you to get started with your project. From this view, you can perform the following tasks:

Create, delete, and rename files and folders.
Move files and folders with drag and drop.
Explore all options with the context menu.

After opening a folder in the user interface, the contents of the folder are displayed in the Explorer view, which contains the following areas:

Explorer view

Editor: Displays the file editing pane. You can open several editors, either vertically and horizontally.
Sidebar: Displays different views, such as the Explorer view, to assist you while working on your project.
Status Bar: Displays information about the opened project and the files you edit.
Activity Bar: Enables you to switch between views. The activity bar also gives you additional context-specific indicators, such as the number of outgoing version control changes. For more information, see Activity Bar in the Explorer.
Panels: Displays output or debugging information, errors and warnings, or an integrated terminal. You can move this panel to the right-hand side of the window for more space.
Minimap: Displays a high-level graphical overview of your file’s structure. For more information, see Using the Minimap.

Tips for using the Explorer view

To quickly search for a file by name and open it, use the following keyboard shortcuts (based on your operating system) to display the Quick Open search bar:
- macOS: Command+P
- Windows: Ctrl+P
- Linux: Ctrl+P
To run a command-line tool in the context of the currently open folder, right-click (Windows/Linux) or Control-click (macOS) the file, and then click Open in Terminal.
By default, hidden files and folders (such as .git) are excluded from the Explorer view. You can configure your Cloud IDE to display these files by adding them to the files.exclude setting in the Files section of the preferences, as described in Settings and preferences.

The Explorer view preserves your folder selection, layout, and opened files. When you next open your Cloud IDE, you can resume work without interruption.

Cloud IDE displays open files as tabs at the top of the editor region. To learn more about tabbed headers, see Managing files by using tabs.

Activity Bar in the Explorer¶

The Activity Bar displays a vertical row of icons on the left-hand side of the user interface. You can navigate between views by clicking the view’s icon in the Activity Bar. You can rearrange the order of these icons by dragging them into your desired order. The currently selected view is indicated by a vertical bar.

Displays the row of icons on the Activity Bar in the user interface

Multi-selection in the Explorer¶

You can select more than one file in the Explorer view to perform actions (such as deleting, downloading, or copying) on several files or folders. To select files, use the information in the tab that’s based on your local operating system:

To select individual files: Press the Command key while clicking.
To select a range of files: Press the Shift key while clicking.

After selecting two items, you can select Control while clicking to open the context menu. Click Compare with Each Other command to perform a diff on the two files you’ve selected.

To select individual files: Press the Control key while clicking.
To select a range of files: Press the Shift key while clicking.

After selecting two items, you can right-click one of the files to open the context menu. Click Compare with Each Other to perform a diff on the two files you’ve selected.

Outline view¶

The Outline view displays the symbol tree of the currently active editor in Cloud IDE. To display the Outline view, click the Outline view icon to the right of the Editor pane.

Cloud IDE displaying a pointer to the outline view icon

Side-by-side editing¶

You can open several editors simultaneously, and then arrange them horizontally or vertically, as needed. If you have already opened files for editing, you can drag the title of any existing tab to resize it, or reposition the tab to any side of the Editor region.

When working with more than one file, the Editor currently selected as active displays the content of its file. To open a file into a specific Editor, click anywhere inside the editor to select it, and then open a file.

Using the Minimap¶

The Minimap displays a high-level overview of your source code to the right of your Editor pane, helping you more easily navigate large files. You can click or drag the shaded area to jump to different sections of your file.

Minimap is displayed next to a code sample

Configure the following settings in the Editor section of the preferences to customize your display settings, as described in Settings and preferences:

"editor.minimap.enabled": true: Enables the minimap.
"editor.minimap.side": "left": Sets the minimap location to the left of the Editor pane.

Using indentation guides¶

You can configure Cloud IDE to display vertical lines as indentation guides to help ensure having consistent indentation levels in your code.

Use the following setting in the Editor section of the preferences to configure your guides, as described in Settings and preferences:

"editor.renderIndentGuides": true: Enables indent guides.

Looking for something?