Using Code Server for Code Development

Interface Layout and Features

The Code Server interface is divided into the following main areas.

Core Features

• Full extension ecosystem: Code Server uses the Open-VSX extension marketplace by default. You can search for and install the vast majority of popular open-source extensions, such as Python, GitLens, and Prettier, via on the left.
• Built-in terminal and Git: The integrated terminal is a major highlight, allowing you to complete the entire workflow from coding to building, testing, and deployment right inside your browser, delivering an experience just like local development. Meanwhile, the source code management view integrates Git operations, making it easy to commit code, manage branches, and view differences.
• Convenient port forwarding: When developing web applications or needing to access specific service ports on the server, you can use Code Server's built-in port forwarding feature. You can easily map remote ports to your local machine within the PORTS panel for convenient debugging.
• Settings sync and persistence: Code Server's configurations, themes, keyboard shortcuts, and installed extensions are all saved in the configuration directory on the server. This means no matter which device you log in from, you will get a completely consistent development environment.

Extension Marketplace

The Code Server extension marketplace provides a rich selection of development tools. The notebook instance comes pre-installed with several commonly used extensions, and you can also download additional ones as needed.

Figure 4 Extension marketplace

The pre-installed extensions in the notebook instance and their descriptions are as follows.

You can also download other required extensions from the marketplace. Taking Markdown extensions as an example: type Markdown into the search bar, select the extension you need to download, and click Install.

Preparing Code

1. Right-click in the workspace to create a new Python file with a .py extension, for example, test.py.
   Figure 5 Creating a new Python file
   
2. Copy and paste the following Python code into the file:

   import os 
   print(os.environ.get('PATH'))
   print("Hello World")
   print("Welcome to Code Server")

   Figure 6 Copying Python code
   

Running the Python File

Click in the upper right corner of the Python file, and the TERMINAL tab at the bottom will display the execution results.

Figure 7 TERMINAL execution results

Debugging the Python File

1. Add a breakpoint to the Python file. Left-click to the left of the line numbers to add or remove breakpoints.
   Figure 8 Adding a breakpoint
   
2. In the left activity bar, click , click Run and Debug and choose Python Debugger. In the Select a debug configuration pop-up, choose Python File: Debug the currently active Python file to enter debugging mode.
3. The code will run and pause at the first breakpoint. You can inspect variables in the left panel or use the top control bar to retry, continue, or perform other actions.