Using Code Editor

This section provides examples and walk-throughs that demonstrate how to use Code Editor.

Launching Code Editor

You can start code editor by clicking the Cloud Shell/Code Editor icon in the Console header and selecting Code Editor from the drop-down menu. :Code Editor Console start screenshot

Code Editor can also be started from an OCI Service workflow. In this example, Code Editor is being launched from the Functions console by clicking the Create Using Code Editor link:Launching Code Editor from a console service workflow

This will start Code Editor in the context of the specific OCI Service. In this example, Code Editor is being started from with the Functions console, so Code Editor opens with the Functions plug-in expanded in Code Editor's navigation pane on the left, with the Create Function template open in the Code Editor main window:Code Editor function template example screenshot

Understanding the Code Editor User Interface

Code Editor has a feature-rich user interface that is designed to make it easy to create, edit, and commit files to git or GitHub from within the same environment. This section discusses the major features of the Code Editor user interface.

This is the main Code Editor window:

Code Editor User Interface map

Here's an overview of the main elements in the Code Editor user interface. Working from the left in the screen shot:
  • The Tool Bar is on the far left side of the Code Editor window. This includes icons that enable you to navigate between different Code Editor activities that show up in the Side Bar panel immediately to the right. Working from top to bottom, the icons are:
    • The Explorer icon (top), which is selected in this screen shot, shows the open editors in the top half of the Side Bar and a file explorer view in the bottom half.
    • The Search icon, which allows you to search through files in your active workspaces.
    • The Source Control icon, which enables using source control functionality (such as git) from within Code Editor
    • The Oracle Cloud Infrastructure icon, which displays OCI server plug-ins that can be used from within Code Editor
  • The Side Bar displays information based on which icon is selected in the Tool Bar bar.
  • Open files are displayed in a tabbed list in the upper right section of the Code Editor interface. In our example, a file named 'testfile.txt' is open for editing.
  • An Output panel can be displayed below the editor windows. This area can display debugging information, errors and warnings, or an open terminal window for running ad-hoc commands from a Cloud Shell session. The drop-down list box at the top right of the Output panel can be used to toggle between the output of various tools and commands.
  • The bottom of the screen is occupied by the Status Bar, which shows information about the file you're currently editing, as well as providing clickable shortcuts that enable you quick access to commonly used features (such as git commands and editor options. You can toggle the Output panel on and off by clicking the panel icon on the far right of the Status Bar.

Changing Code Editor Views

You can customize Code Editor's position on the screen to suit your needs.

You can view options clicking the View menu at the top of the screen:

Code Editor view menu

Stacked View

In the Stacked view, the screen is equally divided vertically between Cloud Shell and Code Editor. You can adjust the width of either window as required by clicking and dragging the grey border between the two windows:

Code Editor stacked view

Tabbed View

In the Tabbed view, Code Editor and Cloud Shell both run full screen, with tabs at the top of the screen to select which window has focus.

Code Editor tabbed view

Accessing the Cloud Shell Home Directory

You can access files in the Cloud Shell home directory:
  1. Click on the Explorer icon in the Code Editor Tool Bar. This will load a hierarchical view of the files in the Cloud Shell home directory.
  2. Click on a directory to expand that node and display the files in that directory.
  3. To open a file, double-click on it.

Creating a New File

To create a new file:
  1. In the menu at the top left of the Code Editor window, click File.
  2. Select New File. This displays a dialog box requesting a name for the new file.
  3. Type the name of the new file and then click OK.
  4. Edit the file.

The new file is saved in the current working directory of the active workspace.

Using the Command Palette and Keyboard Shortcuts

Code Editor features a Command Palette that is accessible at any time by pressing the F1 key. The Command Palette displays a searchable list of available Code Editor commands, along with their keyboard shortcuts (if available):Code Editor command palette

You can search for any command by typing in the Command Palette's search box. The Command Palette will highlight search matches as you type.

To run a command from the Command Palette, you can:
  • Click on the command in the list
  • Press the Enter keyto run the currently highlighted command in the list

Working with Workspaces

A Code Editor workspace is simply a directory (or multiple directories) that stores related files for a project. When you first start Code Editor, your home directory is the default workspace.

Code Editor will automatically create a workspace for you when you open a folder. You can configure custom settings per workspace, including debug and task options and UI settings (such as window arrangments or font and color schemes), and Code Editor will persist the state of that workspace if you leave the Code Editor environment and start it later.

Starting a Terminal Session

You can open a Cloud Shell terminal session from within Code Editor in two ways:
  • By selecting Terminal from the main Code Editor menu. This will open a Cloud Shell terminal session in your home directory.
  • By right-clicking on a folder or a file inside a folder in the Side Bar and selecting Open In Terminal from the pop-up menu. This will open a Cloud Shell terminal session with that folder as the current working directory.

Performing File Operations

The Code Editor user interface allows you to perform basic operations on your files, including moving, deleting, renaming, and downloading.

To perform an operation on a file, right-click on the file in the Explorer view and select an option from the context menu:

Code Editor file operations

For example, to upload or download a file from Code Editor:

  • To upload a file, you can either right-click on a folder or empty space in the Explorer panel and select Upload Files... to select one or more files from your local files system, or you can simply drag and drop one or more files from your local machine into a folder in Code Editor's File Explorer view.
  • Right-click on the file in the File Explorer view and select Download from the context menu. The file will be saved in your browser's default download destination.

You can also move files between folders by dragging and dropping the file in the Explorer view.

Using Git and GitHub

This section describes how to use the embdedded Git functionality in Code Editor.

Configuring Git and GitHub

There are several methods for setting up authentication for Git and GitHub. This documentation assumes you've read and followed the instructions in the following documentation and have configured your authentication as appropriate:

For purposes of the examples shown in this documentation, we've created Personal Access Token with GitHub and have cached those credentials locally in Cloud Shell.

Cloning a Repository

You can clone a repository from within Code Editor.

To clone a repository:
  1. Open the Command Palette by pressing Control-Shift-P
  2. Type git clone and press Enter
  3. Type or paste the name of the repository that you want to clone and press Enter. A file dialog appears.
  4. Select the folder that you want to use to clone the repository and then click the Select Repository Location button.
  5. A dialog box will prompt you to either open the repository or to add it to the current workspace.
  6. You've now cloned a repository and can edit files using Code Editor.

Performing Basic Git Operations

Once you've made changes to a files in a git repo, you can perform git operations on those files directly from within the Code Editor.

The Source Control icon in the left navigation panel will show a number indicating the number of modified files, and the Changes view will show a list of the changed files. For example:Code Editor source control view screenshot

The "…" (More Actions) menu at the top of the Source Control side bar view enables access to all of the git operations possible from within the Code Editor UI:

Code Editor git more actions menu

The following sections cover some of the more common git actions.

Stage

To stage updated files:
  1. Move the mouse pointer over the changed file and select the "+" (Stage Changes) icon. This will stage changes for git.
  2. Note that the icon now changes to a "-". You can click this icon to unstage changes.

Commit

To commit your changes:
  1. Click the check mark (Commit) icon at the top of the Source Control panel.
  2. A message box appears, prompting you to provide a commit message. You can type in a commit message here and press Enter, or you can press the Esc key to cancel the commit operation.

Push

To push your changes:
  1. Select the "…" (More Actions) menu from the top of the Source Control panel, then select Push.
  2. Your commit is pushed to the repository.

Sync

To perform a git sync:
  1. Select the "…" (More Actions) menu from the top of the Source Control panel, then select Pull, Push.
  2. Select Sync from the pop-out menu.

Viewing File Changes

To view file changes:
  1. Click the "M" icon next to a change file to bring up a file change view:Code Editor git file changes view