| copyright | lastupdated | ||
|---|---|---|---|
|
2017-6-9 |
{:new_window: target="_blank"} {:shortdesc: .shortdesc} {:screen:.screen} {:codeblock:.codeblock} {:pre: .pre}
{: #web_ide}
The Eclipse Orion {{site.data.keyword.webide}} is a browser-based development environment where you can develop for the web. You can develop in JavaScript, HTML, and CSS with the help of content assist, code completion, and error checking. The {{site.data.keyword.webide}} works with nearly any language and offers syntax highlighting for most file types. Source control is built in, and you can deploy code locally to test and debug your apps. {:shortdesc}
Best of all, the {{site.data.keyword.webide}} is powered by the web. You have nothing to install, nothing to maintain, and nothing to scale. You can develop anywhere that you have an internet connection.
{: #editorsetup}
The {{site.data.keyword.webide}} is customizable so that you can choose the color schemes, technical tools, and settings that meet your development needs. To view and modify the settings, from the menu on the left, click the Settings icon 
.
If you often need to change certain settings while you edit, you can access those settings quickly from the Local Editor Settings icon 
.
By default, the settings for the editor style and font size are always shown. To include other editor settings in the menu, follow these steps:
-
Click the Local Editor Settings icon
. -
Click Editor Settings.
-
To include or exclude a setting from the Local Editor Settings menu, click the star for each setting.
{: #editcode}
The {{site.data.keyword.webide}} has two main sections. The first section is the file navigator, which shows your project files in a tree structure. From the file navigator, you can create, rename, delete, and manage your files and folders.
Tip: To upload files to the file navigator, drag them from your computer to the file navigator.
The second section is the editor pane. The editor provides several coding features, including content assist and syntax validation.
- To work with two files at the same time, click the Change split editor mode icon
. - From the menu that opens, select a view.
After you select a view, if a file was already open in the editor, it is shown in both editor views.
To open or change a file that is shown in one of the editor views:
- Move the cursor to the editor view that you want to change.
- In the file navigator, click a file.
Many of the commands in the {{site.data.keyword.webide}} are accessible through keyboard shortcuts.
To see a list of the keyboard shortcuts in the editor, click Tools > Show keys. Alternatively, you can see the list by pressing Alt+Shift+?, or on MacOS, Ctrl+Shift+?. You can customize a shortcut by hovering over the key, clicking the pencil, and typing the new key binding.
{: #sourcecontrol}
The {{site.data.keyword.webide}} is integrated with source code management tools. To work with your Git repository, click the Git Repository icon 
.
Tip: If you are using the {{site.data.keyword.webide}} with open toolchains, your workspace is pre-populated with your GitHub, {{site.data.keyword.ghe_short}}, or Git Repos and Issue Tracking repos. The repos that are associated with your current toolchain are highlighted.
{: #deploy}
- To deploy your app, from the run bar, either select or create a launch configuration.
- Click the deploy icon
. An instance of your app is deployed by using the current contents of your workspace and the environment that is defined in your launch configuration. - After your app is deployed, you can use the run bar to stop, restart, or debug your app, view logs, and more.
 | Stop the app |
 | Open the deployed app |
 | View the logs of the deployed app |
 | Open the app's Dashboard |
If you are developing a Node.js app, enable Live Edit mode: 
 | With Live Edit mode enabled, restart the app quickly, without redeployment |
 | With Live Edit mode enabled, access the debugger |
{: #supported_languages}
The Eclipse Orion {{site.data.keyword.webide}} provides content assist, tooltips, previews, validation, and syntax highlighting for JavaScript, HTML, CSS, and Markdown files. Syntax highlighting is also supported for these file types:
|
|
{: #toolchain_tutorials}
Check out one of these tutorials on the IBM® Cloud Garage Method 
{:new_window}:
- Create and use your first toolchain (GitHub) {:new_window}
- Create a toolchain that uses Git Repos and Issue Tracking {:new_window}
- Create and use a microservices toolchain with DevOps Insights (v2) {:new_window}