# Visual Studio Code for Education... and CircuitPython

## Overview

![](https://cdn-learn.adafruit.com/assets/assets/000/131/952/medium800/circuitpython_graphic.jpg?1724182835)

Visual Studio Code is a source-code editor developed by Microsoft for Windows, Linux, macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and more.

[Visual Studio Code for Education](https://visualstudio.microsoft.com/vscode-edu/) is a free web version aimed at students and teachers. It is completely online, so you can access it across devices and platforms. There are several use cases Microsoft aims at including Python, web development, and coding adventure games.

Can VS Code for Education be used for CircuitPython development? Yes! This guide will show you how.

Are there other online environments providing CircuitPython support, again yes, and that will be contrasted with VS Code towards the end of this guide.

## Parts

Pick a [CircuitPython compatible microcontroller board](https://circuitpython.org/downloads) and an [appropriate USB cable](https://www.adafruit.com/search?q=USB+Cable&a%5B%5D=i) to go between your board and your computing device.

I happened to have an Adafruit Metro M4 Express handy.

### Adafruit Metro M4 feat. Microchip ATSAMD51

[Adafruit Metro M4 feat. Microchip ATSAMD51](https://www.adafruit.com/product/3382)
Are you ready? Really ready? Cause here comes the fastest, most powerful Metro ever. The **Adafruit Metro M4** featuring the **Microchip ATSAMD51**. This Metro is like a bullet train, with its 120MHz Cortex M4 with floating point support. Your code will zig and zag...

Out of Stock
[Buy Now](https://www.adafruit.com/product/3382)
[Related Guides to the Product](https://learn.adafruit.com/products/3382/guides)
![Angled shot of a Adafruit Metro M4 feat. Microchip ATSAMD51. ](https://cdn-shop.adafruit.com/640x480/3382-13.jpg)

### USB cable - USB A to Micro-B

[USB cable - USB A to Micro-B](https://www.adafruit.com/product/592)
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller

Approximately 3 feet / 1 meter long

In Stock
[Buy Now](https://www.adafruit.com/product/592)
[Related Guides to the Product](https://learn.adafruit.com/products/592/guides)
![USB cable - USB A to Micro-B - 3 foot long](https://cdn-shop.adafruit.com/640x480/592-01.jpg)

# Visual Studio Code for Education... and CircuitPython

## Getting Set Up with Visual Studio Code for Education

![](https://cdn-learn.adafruit.com/assets/assets/000/131/971/medium800/circuitpython_class.png?1724265860)

Head over to the [Visual Studio Code for Education site](https://visualstudio.microsoft.com/vscode-edu/) by Microsoft or go to [vscodeedu.com](https://vscodeedu.com/).

![](https://cdn-learn.adafruit.com/assets/assets/000/131/954/medium800/circuitpython_try.jpg?1724184912)

On the product site click Try it now. 

![](https://cdn-learn.adafruit.com/assets/assets/000/131/955/medium800/circuitpython_start.png?1724185191)

Click Start a project

![](https://cdn-learn.adafruit.com/assets/assets/000/131/956/medium800/circuitpython_credentials.jpg?1724185272)

You can select to use an existing Microsoft or Google account or to sign up for an account. I used my Microsoft account. 

![](https://cdn-learn.adafruit.com/assets/assets/000/131/969/medium800/circuitpython_image.png?1724264592)

If you've not created a project before, you'll be prompted to create one.

![](https://cdn-learn.adafruit.com/assets/assets/000/131/957/medium800/circuitpython_project.jpg?1724185413)

With existing projects in your account, you can create a new project in the upper right or select an existing project on the left. Click Create a new project.

![](https://cdn-learn.adafruit.com/assets/assets/000/131/959/medium800/circuitpython_project.png?1724185599)

Name your project and give it an optional description. For CircuitPython, select Python Program then click Create project.

# Visual Studio Code for Education... and CircuitPython

## Setting Up a Serial Terminal

![](https://cdn-learn.adafruit.com/assets/assets/000/131/972/medium800/circuitpython_webserial.jpg?1724267061)

It appears that VS Studio for Education cannot connect to a board using webserial. The Terminal is for local Python input and output. We want to see the CircuitPython REPL and program output.

This isn't a problem as it only takes another browser window.

There are several online-based serial terminals for web browsers available. This page will show you a lightweight one that passes control characters (which is needed for Control-C to interrupt running code and Control-D for restarting a program.

You can use any web terminal you like if the one presented is not to your liking.

## web-serial-terminal in your computer's web browser

web-serial-terminal is a simple terminal program which runs in Google Chrome or MS Edge or Firefox 151 or later. The source code is even [available on GitHub](https://github.com/rafaelaroca/web-serial-terminal) if needed to run offline or to look at the code.

Connect your CircuitPython board to your computer's with a known good data+power USB cable.

![](https://cdn-learn.adafruit.com/assets/assets/000/131/975/medium800/circuitpython_webserial_2.jpg?1724268176)

Go to [https://bipes.net.br/aroca/web-serial-terminal/](https://bipes.net.br/aroca/web-serial-terminal/) in your computer web browser and press the Connect button. The baud rate really doesn't matter with webserial.

![](https://cdn-learn.adafruit.com/assets/assets/000/131/973/medium800/circuitpython_connect.png?1724267513)

A dialog box will pop up asking what port you want to connect to (Note: the dialog box may look different from above depending on your browser and operating system). Select the CircuitPython CDC control port.

![](https://cdn-learn.adafruit.com/assets/assets/000/131/974/medium800/circuitpython_webserial.jpg?1724267709)

You are now connected. You can see I reset my board with the onboard button and via Control C. I restarted the program with Control D and it printed "NeoPixel" noting that it had found an onboard NeoPixel.

# Visual Studio Code for Education... and CircuitPython

## Using VS Code for EDU with CircuitPython

![](https://cdn-learn.adafruit.com/assets/assets/000/131/960/medium800/circuitpython_editor.png?1724250969)

The main editing window when starting is shown above. Directories and files are to the left and the code is to the right. If a terminal is opened, it is shown at the bottom.

VS Code for Education names the main code file **main.py**. That's fine although if you want to stick to CircuitPython convention, you may right click **main.py** and rename it **code.py**.

## Working On Your Program

At this point you can edit your program or copy code from other places and paste it into the editor. VS Code is fabulous for syntax highlighting. The editor cannot suggest arguments for module functions, though.

```python
"""CircuitPython Essentials Internal RGB LED red, green, blue example"""
import time
import board

if hasattr(board, "APA102_SCK"):
    import adafruit_dotstar

    led = adafruit_dotstar.DotStar(board.APA102_SCK, board.APA102_MOSI, 1)
    print("\nDotStar\n")
else:
    import neopixel

    led = neopixel.NeoPixel(board.NEOPIXEL, 1)
    print("\nNeoPixel\n")

led.brightness = 0.3

while True:
    led[0] = (255, 0, 0)
    time.sleep(0.5)
    led[0] = (0, 255, 0)
    time.sleep(0.5)
    led[0] = (0, 0, 255)
    time.sleep(0.5)
```

![](https://cdn-learn.adafruit.com/assets/assets/000/131/961/medium800/circuitpython_save.png?1724252197)

The editor will save your code to the cloud and Microsoft touts strong security for their infrastructure. Click the "hamburger" icon in the upper left of the screen, select File, then save it wherever you want, cloud or locally.

## Running the Code on Your Board

To run your edited code, you can copy the code to the board **CIRCUITPY** drive. Nearly all CircuitPython boards show up as a "thumb drive" named **CIRCUITPY** when they are connected with a USB cable to your computer (with notable exceptions ESP32 (original) and ESP32-C Series).

![](https://cdn-learn.adafruit.com/assets/assets/000/131/963/medium800/circuitpython_local.png?1724253218)

Click the "hamburger" icon then File and Save As, like in saving your work. Click the Show Local button to save on your local computer. A File Explorer/Finder window will come up.

![](https://cdn-learn.adafruit.com/assets/assets/000/131/965/medium800/circuitpython_CircuitPy.jpg?1724253277)

Save on the **CIRCUITPY** drive as **code.py**. The file should run immediately.

![](https://cdn-learn.adafruit.com/assets/assets/000/131/970/medium800/circuitpython_save_warning.png?1724264729)

You might get a popup saying the file could be dangerous. That's likely your browser making sure you trust VS Code. You can click Save.

In the example code I have, for CircuitPython boards with a NeoPixel or DotStar status LED, it will alternate flashing Red, Green, Blue.

## Strengths and Limitations of VS Code for Education

VS Code for Education is a trustworthy program with no executable to upload in local environments, making it great for portability and for class environments. But it may not be an ideal editor for CircuitPython.

**Strengths**

1. Trustworthy
2. Free
3. No downloads
4. Syntax highlighting

**Weaknesses**

1. A log-in is required
2. The terminal cannot be set to the output of the board
3. Trying to run code in the browser fails as it is set for standard Python

Now to contrast this with other online editors on the next page.

# Visual Studio Code for Education... and CircuitPython

## Using Other Online Editors

The previous page noted the strengths and weaknesses of Visual Studio Code for Education for CircuitPython coding. This page contrasts VS Code for EDU with other online editors available as of the time this guide was written.

## code.circuitpython.org
![](https://cdn-learn.adafruit.com/assets/assets/000/131/966/medium800/code-circuitpython.jpg?1724254025)

[code.circuitpython.org](https://code.circuitpython.org/) is an online browser-based editor provided by Adafruit, the principal developer of CircuitPython. It has additional capabilities not found in VS Code for EDU:

1. Connecting to a board via Bluetooth, WiFi, or USB
2. Knowledge of the board it's connected to
3. A serial terminal that takes the output and displays it to the programmer
4. Great syntax highlighting
5. Knowledge of CircuitPython functions

code.circuitpython.org does not have cloud storage for code. This isn't as handy as VS Code but a log-in is not needed for code.circuitpython.org.

### CircuitPython Web Workflow Code Editor Quick Start - Overview

[CircuitPython Web Workflow Code Editor Quick Start](https://learn.adafruit.com/getting-started-with-web-workflow-using-the-code-editor)
[Overview](https://learn.adafruit.com/getting-started-with-web-workflow-using-the-code-editor/overview)
## The CircuitPython Online Editor
![](https://cdn-learn.adafruit.com/assets/assets/000/131/967/medium800/circuitpython_c_o_ed.jpg?1724254734)

The [CircuitPython Online Editor](https://urfdvw.github.io/circuitpython-online-ide-2/) by River Wang is a capable online editor specifically for CircuitPython. Highlights:

1. Connecting to a board via USB (only)
2. It has knowledge of the board it's connected to
3. A serial terminal that takes the output and displays it to the programmer
4. Decent syntax highlighting

## ViperIDE
![](https://cdn-learn.adafruit.com/assets/assets/000/131/968/medium800/circuitpython_viper.jpg?1724254860)

[ViperIDE](https://viper-ide.org/) is the newest editor available, from a developer in Ukraine. It originally was a MicroPython only editor but the developer states it may be used with CircuitPython also. 

Highlights:

1. Connecting to a board via USB or Bluetooth
2. It has a serial terminal that takes the board output and displays it to the programmer
3. Great syntax highlighting

## Summary and Recommendation

code.circuitpython.org provides the strongest set of features for the CircuitPython programmer for an online environment (contrasted with Mu for downloadable editors).

### Welcome to CircuitPython! - Installing the Mu Editor

[Welcome to CircuitPython!](https://learn.adafruit.com/welcome-to-circuitpython)
[Installing the Mu Editor](https://learn.adafruit.com/welcome-to-circuitpython/installing-mu-editor)
VS Code for EDU has the cloud storage and security features some may like.

If strong board integration, access to any type of CircuitPython board, and cloud storage is needed, it is suggested to use code.circuitpython.org and save code on VS Code for EDU or your favorite cloud storage such as DropBox, Google Drive, etc.

If you are ok with VS Code for EDU's lack of CircuitPython specific features, then the backing by Microsoft and cloud storage are very handy.


## Featured Products

### Adafruit Metro M4 feat. Microchip ATSAMD51

[Adafruit Metro M4 feat. Microchip ATSAMD51](https://www.adafruit.com/product/3382)
Are you ready? Really ready? Cause here comes the fastest, most powerful Metro ever. The **Adafruit Metro M4** featuring the **Microchip ATSAMD51**. This Metro is like a bullet train, with its 120MHz Cortex M4 with floating point support. Your code will zig and zag...

Out of Stock
[Buy Now](https://www.adafruit.com/product/3382)
[Related Guides to the Product](https://learn.adafruit.com/products/3382/guides)
### USB cable - USB A to Micro-B

[USB cable - USB A to Micro-B](https://www.adafruit.com/product/592)
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller

Approximately 3 feet / 1 meter long

In Stock
[Buy Now](https://www.adafruit.com/product/592)
[Related Guides to the Product](https://learn.adafruit.com/products/592/guides)

## Related Guides

- [Adafruit Metro M4 Express featuring ATSAMD51](https://learn.adafruit.com/adafruit-metro-m4-express-featuring-atsamd51.md)
- [CircuitPython Display Support Using displayio](https://learn.adafruit.com/circuitpython-display-support-using-displayio.md)
- [A CLI in CircuitPython](https://learn.adafruit.com/a-cli-in-circuitpython.md)
- [Adding a WiFi Co-Processor to CircuitPython](https://learn.adafruit.com/adding-a-wifi-co-processor-to-circuitpython-esp8266-esp32.md)
- [Alternative languages for programming the SAMD51 boards](https://learn.adafruit.com/alternative-languages-for-programming-samd-boards.md)
- [Quickstart using Adafruit eInk/ePaper displays with CircuitPython](https://learn.adafruit.com/quickstart-using-adafruit-eink-epaper-displays-with-circuitpython.md)
- [Animated NeoPixel Glow Fur Scarf](https://learn.adafruit.com/animated-neopixel-gemma-glow-fur-scarf.md)
- [Native MP3 decoding on Arduino](https://learn.adafruit.com/native-mp3-decoding-on-arduino.md)
- [Esenciales para CircuitPython](https://learn.adafruit.com/esenciales-para-circuitpython.md)
- [Adafruit AirLift Shield - ESP32 WiFi Co-Processor](https://learn.adafruit.com/adafruit-airlift-shield-esp32-wifi-co-processor.md)
- [Make It Talk](https://learn.adafruit.com/make-it-talk.md)
- [MIDI for Makers](https://learn.adafruit.com/midi-for-makers.md)
- [ePaper Maze Maker](https://learn.adafruit.com/epaper-maze-maker.md)
- [CircuitPython 101: Working with Lists, Iterators and Generators](https://learn.adafruit.com/circuitpython-101-list-and-things-iterators-generators.md)
- [Larson Scanner Shades (Trinket-Powered NeoPixel LED Strip Glasses)](https://learn.adafruit.com/larson-scanner-shades.md)
- [Tiny Autostereogram Construction Kit](https://learn.adafruit.com/tiny-autostereogram-construction-kit.md)