Getting Started with CodeTogether

CodeTogether allows you to host and join collaborative coding sessions from Eclipse, IntelliJ or VS Code. Hosts and participants don’t need to have the same IDE, and participants can join sessions using any modern browser too. This guide includes information to help you get started, regardless of which IDE you use. For additional information, refer to the Installation Guides for EclipseIntelliJ and VS Code.

Logging In

You can start a CodeTogether session without a CodeTogether account, however you must log in to join a running session from your IDE. Participants joining from a browser do not need an account.

You can create an account on the website, or if you’re using Eclipse or IntelliJ, you have the option of registering from the login dialog. Be sure to join the Insiders Program for the ability to join sessions from the IDE.

To log in to CodeTogether, click the Log in link in the CodeTogether view, or use the Log in command/action.

Logging In to CodeTogether

Hosting a Session

You can host a pair programming session directly from your IDE. All CodeTogether sessions are end-to-end encrypted.

Note: For details on how your data is kept secure, refer to the Security page.

Starting a Session

Choose any of the following options to start a pair programming session in your IDE:

Eclipse


  • In the CodeTogether view, click Host New Session.
  • Select Help > CodeTogether > Start Hosting Session
  • Use the Start Hosting Session command.
  • Right-click in the editor and select Start Hosting Session Session from the menu.
  • Select text in the editor, and then click Start from the annotation that appears below the selection.

IntelliJ


  • In the CodeTogether view, click Host New Session.
  • Select Tools > CodeTogether: Start Hosting Session.
  • Use the CodeTogether: Start Hosting Session action.

VS Code


  • In the CodeTogether view, click  Host New Session.
  • Use the CodeTogether: Start Hosting Session command
  • Click CodeTogether in the status bar and select Start Hosting Session.

Stopping a Session

Choose any of the following options to stop a pair programming session in your IDE:

Eclipse


  • In the CodeTogether view, click Stop Session.
  • Use the Stop Session command.

IntelliJ


  • In the CodeTogether view, click Stop Session.
  • Select Tools > CodeTogether: Stop Session.
  • Use the CodeTogether: Stop Session action.

VS Code


  • In the CodeTogether view, click the Stop Session button .
  • Use the CodeTogether: Stop Session command.
  • Click In Session in the status bar and select Stop Session.

Inviting Users to a Session

After starting a session, share the Invite URL with others to have them join your coding session. Participants can use this URL in their IDEs, or open the Invite URL in any modern browser.

Use any of the following options to copy the invite URL to your clipboard:

Eclipse


  • In the CodeTogether view, click Copy Invite URL.
  • Click the copy invite URL link at the bottom of an open editor (visible only when there are no participants).
  • If you start a session from selected text, click Invite URL from the annotation that appears below the selection.

IntelliJ


  • In the CodeTogether view, click Copy Invite URL.
  • Click the copy invite URL link at the bottom of an open editor (visible only when there are no participants).
  • Use the CodeTogether: Invite action.

VS Code


  • When you start a session, the Invite URL is automatically copied to the clipboard.
  • Use the CodeTogether: Invite command.
  • Click In Session in the status bar and select Copy Session URL to Clipboard.

Participants can also invite users to a session by clicking the Copy Invite URL button in the CodeTogether view.

Note: The number of participants that can join a session will be limited by your CodeTogether plan when generally available.

Hiding Files and Folders

CodeTogether 2.1 introduced the ability to prevent participants from accessing certain files or folders in the session. To hide files and folders, create a .codetogether.ignore file in the root of the project. Simple wildcard based patterns can be used to match files and folders to exclude from the session. If the session is active, you must restart the session for changes to take effect.

Session Timeout

Sessions automatically timeout:

  • When no participant joins for 90 minutes
  • 45 minutes after the last participant leaves
  • After 90 minutes of inactivity

Joining a Session

As of CodeTogether 3.0, you can join a session from an IDE, in addition to using a browser. Whichever method you choose, you lose access to all shared projects when you leave the session or the session ends,

Joining from an IDE

Prerequisites

  • The CodeTogether plugin/extension must be installed in your IDE. Please see our installation instructions for EclipseIntelliJ and VS Code.
  • Join the CodeTogether Insiders Program. Use or create an account to join the Insiders Program. For the next few releases, IDE to IDE support will be available only to Insiders.

Eclipse


  • In the CodeTogether view, click Join Remote Session.
  • Select Help > CodeTogether > Join Remote Session
  • Use the Join Remote Session command.

IntelliJ


  • In the CodeTogether view, click Join Remote Session.
  • Select Tools > CodeTogether: Join Remote Session.
  • Use the CodeTogether: Join Remote Session action.

VS Code


  • In the CodeTogether view, click Join Remote Session.
  • Use the CodeTogether: Join Remote Session command.
  • Click CodeTogether  in the status bar and select Join Remote Session.

In the Join Remote Session dialog, paste in the Invite URL, and specify an identifiable name to join the session.

Note: If you are not logged in, you will be prompted for your user name and password.

Joining a session

The resulting workspace is slightly different based on which IDE you use to join the session:

  • Eclipse—A new CodeTogether project is created in your existing workspace. All projects shared in the session appear as individual nodes immediately under this project.
  • IntelliJ—You can choose to join the session from the current window or from a new window. Whatever you choose, the projects shared will appear as a top level nodes within the Project view.
  • VS Code—A new window is automatically opened with a CodeTogether workspace. The projects shared appear as top level nodes under this workspace.

Joining from a Browser

When participants join a CodeTogether session through a browser, they still get a full-fledged IDE experience.

Customizing the IDE Experience

When you open the Invite URL the first time, you are prompted to customize your IDE experience—choose the look and feel of your favorite IDE, and key bindings that you’re familiar with, for a smooth coding experience in the browser. You can change these settings every time you join a session; or, from within a session, select File > Settings > CodeTogether: Change IDE Experience.

Specifying Your Name and Joining

After opening the Invite URL in the browser (and customizing the IDE on the initial session), you are prompted for the name to use in the session. Type your name and click Join Now. To change your name during a session, click your name in the status bar or the CodeTogether view and type a new name—the name can be changed at any time, and is persisted across sessions.

Workbench Layout

Use the following options to adjust the layout to your liking:

  • Double-click on an editor tab to have it take up the entire browser window, and maximize your coding real estate.
  • Press Alt+Shift+C to collapse all side panels.
  • Select the View menu to access additional options to customize the workbench.

Understanding Session Basics

CodeTogether supports multi-file parallel editing, allowing the host and each participant to choose whether to code alone or code together in a group. Multiple groups of developers, as well as individual developers, can code or browse the shared workspace simultaneously.

To start coding, a developer simply needs to start typing, whether in a group or alone. There is no need to request control, and no confirmation dialog to step through. Several developers can be editing different files at the same time, and starting with CodeTogether 3.0, simultaneous edits in the same file (similar to Google Docs) are also supported.

Note: When multiple developers are typing simultaneously in the same file, language features like content assist, validation, navigation, etc., will continue to work for each editor, but may sometimes be affected. We are continuing to improve the reliability of these features in such cases.

Coding Together

When in a group, typically, all members of the group share the same editing context—the same cursor position and the same selection, in the same file. Any member of the group can drive the session by opening new files, making selections or editing code. Other members in the group will follow the driver. No special process is needed to switch drivers, just open a file or start coding yourself, and the others will now be following you.

Quick Investigations and Edits

If a member is actively typing in the group, but another member wants to make a small correction elsewhere or just take a quick look at another piece of code, they can do so without leaving the current group. They can just navigate to the point of interest, and even make edits if desired. After a short timeout, they will be brought back to the active coder’s location. Other members in the group, and most importantly, the active coder, will not be affected by this and they will continue to remain in the same location.

To join a group:

  • When you join a session, you are automatically placed in a group of developers.*
  • In the CodeTogether view, click a member name from a different group.
  • When currently coding alone:
    • In the browser, turn on the Shared Cursor toggle in the menu bar, or use the Ctrl + K C hotkey*
    • In Eclipse and IntelliJ, an annotation in the bottom right of the editor will have a link to a group.
    • In VS Code, click the Editing alone status bar item to bring up the Join others action.

* Participants are placed in the largest group in the session. If all groups are the same size, they join the host’s group.

Joining a group

Coding Alone

Coding alone is similar to coding in a regular IDE. The developer alone decides which files to browse or edit. Other members of the session are not disrupted, nor do they follow along as the developer opens new files and makes edits.

To code alone:

  • In the browser, turn off the Shared Cursor toggle in the menu bar, or use the Ctrl + K C hotkey.
  • In Eclipse or IntelliJ, in the CodeTogether view, click the Edit on your own link, or the Editing Alone node in VS Code
  • In Eclipse or IntelliJ, use the edit on your own link in the editor annotation at the bottom right.
  • In VS Code, you click the Driving / Watching status bar item to bring up the Edit on your own action.

Coding alone

Using the CodeTogether View

To see an overview of the pair programming session, take a look at the CodeTogether view in the IDE or the browser.

In the IDE


Open the CodeTogether view in the host IDE as follows:

  • Eclipse—Select Window > Show View > Others > CodeTogether > CodeTogether.
  • IntelliJ—Select View > Tool Windows > CodeTogether.
  • VS Code—Select View > Open View > CodeTogether.

Shown in IntelliJ

In the Browser


The CodeTogether View defaults to the right sidebar in the browser.

Tip: You can click the CodeTogether icon to quickly show/hide the view.

Shown in Chrome

These views have multiple sections as described below:

Coding Together

All groups of developers who are coding together are listed here, along with the file they are actively editing. This section may list multiple groups. To join a group, click any member of the group.

Editing Alone

All developers who are coding alone are listed here, along with the file they are actively editing.

Recently Modified

Displays files that were recently modified in the current session.

File Links

Click any file listed in the CodeTogether view to open that file. Opening a file does not change your current group.

Participating from a Browser

As a participant, you have several options to navigate the code base.

Explorer View

Participants have access to all files in the host’s workspace. You can use the Explorer view (View > Explorer) to dive into the projects in the host’s workspace. Expand any folder and double-click any resource to open it. You can also use Quick Open Ctrl/Cmd+P to filter through and open any file in the workspace.

Peek/Go to Definition

Press Ctrl/Cmd while hovering over an element to view the definition of the element inline. You can click the hyperlink to navigate to the definition, whether in the same file or another. Alternatively, use the Go to Definition context menu item to navigate.

Peek References

From the context menu of an element, select Peek References to view all references to the element inline. You can examine each reference in detail without leaving your current editing context.

Documentation on Hover

Hover over an element to view corresponding documentation, if available.

Outline/Go to Symbol

The Outline view (View > Outline) displays a structural outline of the file being currently edited. You can use the Outline view to navigate within the file.

You can also use Go to Symbol (Ctrl/Cmd+Shift+O) to open up a filterable list of symbols to quickly navigate to a particular symbol in the file you’re currently editing.

File Content Search

Use the Search view (View > Search) to search for text within file contents. Regular expressions are supported and you can navigate directly to the matched section from the search results.

Note: This feature is currently not available when joining a session from the IDE.

Selection and Cursor Annotations

If you are following the Host or another participant, their selections and cursor locations as they type are displayed as a labeled annotation.

Code Folding

When you hover the column to the left of your code, a down arrow  indicates the start of a section that can be collapsed. Click the down arrow to hide the block of code. The first line in the block of code remains visible with a right arrow. Click the right arrow to expand the block of code.

Editing Features in the Browser​

In addition to basic editing capabilities like undo, redo, and clipboard access, the following code features are available.

Content Assist

Press the appropriate key binding (typically Ctrl+Space) to invoke content assist. On accepting a proposal, you can press Tab to jump from one parameter stop to the next as you key in the parameters to a constructor or method.

Quick Fixes

When the cursor is within an error squiggly, a quick fix bulb appears if one or more fixes are available. Click the bulb and choose the desired fix action to make the recommended changes to your code.

Validation

Errors from the host workspace appear in all participant sessions. This includes errors from files that are not currently open or being edited, as long as the host has validated those files.

Errors typically appear and disappear as you type, as validation takes place on the host and the markers are transferred over to the participants.

To see a list of all errors, you can open the Problems view (View > Problems) from where you can easily navigate to the referenced files.

Formatting

You can format the entire file by using the Format Document context menu action. The ability to format selections is coming soon.

Participating from an IDE

When you join a session from an IDE, you get your IDE’s key bindings, look and feel – workbench layout, and general behavior.

Coding in a session as a participant is different from using that same IDE as a host to edit the same project. A fundamental difference is that while you have access to the entire project shared by the host (minus files intentionally hidden from the session), you don’t actually have all the files and libraries downloaded on your system. Files are fetched on demand, and at one time, only the files being actively edited are local to your system. This should help you understand which features in the host IDE you can expect to work.

Language smarts come from the host IDE—it doesn’t matter what plugins/extensions you have installed or what your IDE is inherently capable of. Content assist suggestions, validation, quick fixes and navigation support are all delivered by the host IDE. Refactoring is not currently available, but will be coming soon.

Support for shared console output as well as a shared terminal is in development.

No IDE views other than the Project/Resource views and the Problems views will provide meaningful support for shared projects.

Participating from an IDE

Getting Help

To chat with our dev and support teams live on Gitter, select Help > CodeTogether > Chat on Gitter or visit https://gitter.im/CodeTogether-com/community/. To report issues, use our GitHub issue tracker.