Visual Studio Code Extension Examples

Increase the power of Visual Studio Code through Extensions. The features that Visual Studio Code includes out-of-the-box are just the start. VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. Introduction ‘Visual Studio Code Extension for Tizen’ enables to develop Tizen.NET application using VS Code. This documentation discusses step by step guide to prepare development environment for Tizen.NET application using VS code and deploy a sample application.

1. Writing Visual Studio Code Extensions
2. Visual Studio Code Extension Development
3. Visual Studio Code Extension Sample
4. Visual Studio Code Language Extension Example
5. C++ Visual Studio Code Example

Develop and debug applications for Espressif ESP32, ESP32-S2 chips with ESP-IDF IoT Development Framework.

Download Visual Studio Code Install the Salesforce Extensions. Code Builder (coming soon) Code Builder is a browser-based version of Salesforce Extensions, with everything installed and pre-configured for you. It’s provides all the goodness of the desktop experience, but provides you the flexibility to work anywhere, from any computer. Node.js, a JavaScript runtime that powers VS Code extensions; Yeoman, a scaffolding tool that will build the framework for your extension pack; Visual Studio Code Extension Generator, the Yeoman generator that will help you build your extension; Node.js is a popular open source JavaScript runtime that executes JavaScript outside of the browser.

The ESP-IDF extension makes it easy to develop, build, flash, monitor and debug your ESP-IDF code, some functionality includes:

• Quick Configure ESP-IDF extension for first time user to help you download, install and setup ESP-IDF and required tools within Visual Studio Code extension.
• Quick prototyping by copying ESP-IDF examples with ESP-IDF: Show ESP-IDF Examples Projects.
• App tracing when using ESP-IDF Application Level Tracing Library like in ESP-IDF Application Level Tracing Example.
• Size analysis of binaries with ESP-IDF: Size analysis of the binaries.
• SDK Configuration editor to configure your ESP-IDF project (esp-idf menuconfig).
• Easily Build, Flash and Monitor your code for the ESP-32 and ESP32 S2 chip.
• Syntax highlighting for KConfig and ESP-IDF Kconfig style syntax validation if enabled.
• Localization (English, Chinese, Spanish) of commands which you can also add a language contribution.
• OpenOCD server within Visual Studio Code.
• Code Coverage for editor source highlighting and generate HTML reports.
• Search text editor's selected text in ESP-IDF documentation with ESP-IDF: Search in documentation... right click command or with its keyboard shortcut. Results will be shown in ESP-IDF Explorer Tab if found on ESP-IDF Documentation based on your current vscode language, ESP-IDF version in idf.espIdfPath (latest otherwise) and idf.adapterTargetName.

Prerequisites

There are a few dependencies which needs to be downloaded and installed before you can continue to use the extension. All the other dependencies like ESP-IDF or toolchain will be taken care by the setup wizard process.

• Python 3.5+
• CMake and Ninja for Linux or MacOS users. For Windows users, it is part of the extension setup wizard.

Please note that this extension only supports the release versions of ESP-IDF, you can still use the extension on master branch or some other branch, but certain feature might not work fully.

Quick Installation Guide

There are several ways to install this extension to your VSCode, easiest one is from VSCode Marketplace. However if you are looking to contribute to this project we suggest you to have install in Source mode.

Marketplace Installation

Link to the marketplace

Launch VSCode Quick Open (⌘+P on Mac or Ctrl+P on Windows) and then paste the following command and press enter

Install from .vsix file

To install from .vsix file, first head to releases page pick the latest release and download the esp-idf-extension-VERSION.vsix file and press F1 and type Install from VSIX and then select the downloaded .vsix file.

Build from Source Code

• Install Node.js
• Make sure have the C/C++ Extension from Visual Studio Code Marketplace.
• Clone this repository git clone https://github.com/espressif/vscode-esp-idf-extension.git
• Install all the dependencies, using yarn
• Press F5 to Run with Debugger, this will launch a new VSCode Extension Development Host to debug the extension.
• Compile project with yarn webpack (optional for production)

Build vsix locally

• Build the Visual Studio Code extension setup with yarn package.

Uninstalling the plugin

• In Visual Studio Code, go to the Extensions tab.
• Click on the EspressifIDF extension lower right icon.
• Click Uninstall.
• Go to your ${VSCODE_EXTENSION_DIR} and make sure to delete the Espressif IDF plugin folder.

How to use

• First set up your Visual Studio Code as explained in the former section.

• Then

  • Either open Visual Studio Code and create a workspace folder.
  • Run code ${YOUR_PROJECT_DIR} from the command line.

• Press F1 and type ESP-IDF: Configure ESP-IDF extension to configure the extension Please take a look at SETUP for more detail about extension configuration.

• Press F1 and type ESP-IDF: Create ESP-IDF project to generate a template ESP-IDF project.

  Note: If you want to get code navigation and ESP-IDF function references, build the project a first time. This will generate the required compile_commands.json used by Microsoft C/C++ Extension to resolve header/source links. You can do a rebuild by pressing F1 and typing ESP-IDF: Build your project. If you don't want to build your project beforehand, you can configure your project using C/C++ Configuration

• Do some coding!

• Check you set the correct port of your device by pressing F1, typing ESP-IDF: Select port to use: and choosing the serial port your device is connected.

• When you are ready, build your project. Then flash to your device by pressing F1 and typing ESP-IDF: Flash your device then selecting Flash allows you to flash the device.

• You can later start a monitor by pressing F1 and typing ESP-IDF: Monitor your device which will log the activity in a Visual Studio Code terminal.

• If you want to start a debug session, just press F5 (make sure you had at least build and flash once before so the debugger works correctly). To make sure you can debug your device, set the proper idf.openOcdConfigs settings in your settings.json or by pressing F1 and typing ESP-IDF: Device configuration.

Available commands

Click F1 to show Visual studio code actions, then type ESP-IDF to see possible actions.

Command Description	Keyboard Shortcuts (Mac)	Keyboard Shortcuts (Windows/ Linux)
Configure ESP-IDF extension
Create ESP-IDF project	⌘ E C	Ctrl E C
Add vscode configuration folder
Add Arduino ESP32 as ESP-IDF Component
Configure Paths
Set Espressif device target
Device configuration
SDK Configuration editor
Set default sdkconfig file in project
Select port to use	⌘ E P	Ctrl E P
Full clean project	⌘ E F	Ctrl E F
Build your project	⌘ E B	Ctrl E B
Flash your project	⌘ E F	Ctrl E F
Monitor your device	⌘ E M	Ctrl E M
Build, Flash and start a monitor on your device	⌘ E D	Ctrl E D
Open ESP-IDF Terminal	⌘ E T	Ctrl E T
Pick a workspace folder
Size analysis of the binaries	⌘ E S	Ctrl E S
Show Examples Projects
Add Editor coverage
Remove Editor coverage
Get HTML Coverage Report for project
Search in documentation...	⌘ E D	Ctrl E D
Install ESP-ADF
Install ESP-MDF
Open NVS Partition Editor

The Add Arduino ESP32 as ESP-IDF Component command will add Arduino ESP32 as a ESP-IDF component in your current directory with in ${CURRENT_FOLDER}/components/arduino. You can also use Create ESP-IDF project with the arduino-as-component template to create a new project folder that includes arduino as ESP-IDF component.

The Show Examples Projects command allows you create a new project using one of the examples in ESP-IDF, ESP-ADF or ESP-MDF directory if related configuration settings are set. The Install ESP-ADF will clone ESP-ADF and set idf.espAdfPath (idf.espAdfPathWin in Windows). Install ESP-MDF will clone ESP-MDF and set idf.espMdfPath (idf.espMdfPathWin in Windows).

ESP-IDF Configure extension

Initial configuration is done easily by executing ESP-IDF: Configure ESP-IDF extension Please take a look at SETUP for more in-depth detail.

This windows helps you setup key Visual Studio Code configurations for this extension to perform included features correctly. This is how the extension uses them:

1. idf.pythonBinPath is used to executed python scripts within the extension. In ESP-IDF: Configure ESP-IDF extension we first select a system-wide python executable from which to create a python virtual environment and we save the executable from this virtual environment in idf.pythonBinPath. All required python packages by ESP-IDF are installed in this virtual environment, if using ESP-IDF: Configure ESP-IDF extension
2. idf.customExtraPaths is pre-appended to your system environment variable PATH within Visual Studio Code (not modifying your system environment) before executing any of our extension commands such as openocd or cmake (i.e. build your current project) else extension commands will try to use what is already in your system PATH. In ESP-IDF: Configure ESP-IDF extension you can download ESP-IDF Tools or skip IDF Tools download and manually enter all required ESP-IDF Tools as explain in SETUP which will be saved in idf.customExtraPaths.
3. idf.customExtraVars stores any custom environment variable we use such as OPENOCD_SCRIPTS, which is the openOCD scripts directory used in openocd server startup. We add these variables to visual studio code process environment variables, choosing the extension variable if available, else extension commands will try to use what is already in your system PATH. This doesn't modify your system environment outside Visual Studio Code.
4. idf.adapterTargetName is used to select the chipset (esp32, esp32 s2, etc.) on which to run our extension commands.
5. idf.openOcdConfigs is used to store an array of openOCD scripts directory relative path config files to use with OpenOCD server. (Example: ['interface/ftdi/esp32_devkitj_v1.cfg', 'board/esp32-wrover.cfg']).
6. idf.espIdfPath is used to store ESP-IDF directory path within our extension. We override Visual Studio Code process IDF_PATH if this value is available. This doesn't modify your system environment outside Visual Studio Code.

Note: From Visual Studio Code extension context, we can't modify your system PATH or any other environment variable. We do override the current Visual Studio Code process environment variables which might collide with other extension you might have installed. Please review the content of idf.customExtraPaths and idf.customExtraVars in case you have issues with other extensions.

ESP IDF Settings

This extension contributes the following settings that can be later updated in settings.json or from VSCode Settings Preference menu (F1 -> Preferences: Open Settings (UI)).

ESP-IDF Specific Settings

These are the configuration settings that ESP-IDF extension contributes to your Visual Studio Code editor settings.

Setting ID	Description
idf.espIdfPath	Path to locate ESP-IDF framework (IDF_PATH)
idf.espIdfPathWin	Path to locate ESP-IDF framework in Windows (IDF_PATH)
idf.espAdfPath	Path to locate ESP-ADF framework (ADF_PATH)
idf.espAdfPathWin	Path to locate ESP-ADF framework in Windows (ADF_PATH)
idf.espMdfPath	Path to locate ESP-MDF framework (MDF_PATH)
idf.espMdfPathWin	Path to locate ESP-MDF framework in Windows (MDF_PATH)
idf.toolsPath	Path to locate ESP-IDF Tools (IDF_TOOLS_PATH)
idf.toolsPathWin	Path to locate ESP-IDF Tools in Windows (IDF_TOOLS_PATH)
idf.pythonBinPath	Python absolute binary path used to execute ESP-IDF Python Scripts
idf.pythonBinPathWin	Python absolute binary path used to execute ESP-IDF Python Scripts in Windows
idf.customExtraPaths	Paths to be appended to $PATH
idf.customExtraVars	Variables to be added to system environment variables
idf.useIDFKconfigStyle	Enable style validation for Kconfig files
idf.showOnboardingOnInit	Show ESP-IDF Configuration window on extension activation
idf.adapterTargetName	ESP-IDF target Chip (Example: esp32)
idf.openOcdConfigs	Configuration files for OpenOCD. Relative to OPENOCD_SCRIPTS folder
idf.saveBeforeBuild	Save all the edited files before building (default true)
idf.coveredLightTheme	Background color for covered lines in light theme for gcov coverage
idf.coveredDarkTheme	Background color for covered lines in dark theme for gcov coverage
idf.partialLightTheme	Background color for partially covered lines in light theme for gcov coverage
idf.partialDarkTheme	Background color for partially covered lines in dark theme for gcov coverage
idf.uncoveredLightTheme	Background color for uncovered lines in light theme for gcov coverage
idf.uncoveredDarkTheme	Background color for uncovered lines in dark theme for gcov coverage
idf.notificationSilentMode	Silent all notifications messages (excluding error notifications)

When you use the command ESP-IDF: Set Espressif device target it will override idf.adapterTargetName with selected chip and idf.openOcdConfigs with its default OpenOCD Configuration files. If you want to customize the idf.openOcdConfigs alone, you can modify your user settings.json or use ESP-IDF: Device configuration and select Enter OpenOCD Configuration File Paths list by entering each file separated by comma ','.

Board/ Chip Specific Settings

These settings are specific to the ESP32 Chip/ Board

Setting	Description
idf.port	Path of selected device port
idf.portWin	Path of selected device port in Windows
idf.flashBaudRate	Flash Baud rate

Writing Visual Studio Code Extensions

The ESP-IDF Monitor default baud rate value is taken from your project's skdconfig CONFIG_ESPTOOLPY_MONITOR_BAUD (idf.py monitor' baud rate).This value can be override by setting the environment variable IDF_MONITOR_BAUD or MONITORBAUD in your system environment variables or this extension's idf.customExtraVars configuration setting.

Log Tracing Specific Settings

These settings are specific to the Log Tracing

Setting	Description
trace.poll_period	poll_period will be set for the apptrace
trace.trace_size	trace_size will set for the apptrace
trace.stop_tmo	stop_tmo will be set for the apptrace
trace.wait4halt	wait4halt will be set for the apptrace
trace.skip_size	skip_size will be set for the apptrace

NOTE: Please consider that ~ and $VAR are not recognized when you set one of the previous path. You can instead set any environment variable in the path using a ${env:VARNAME} such as ${env:HOME} or you can refer to other configuration parameter path such as ${config:idf.espIdfPath}.

Use of environment variables in ESP-IDF settings.json and tasks.json

Environment (env) variables and other ESP-IDF settings (config) current values strings can be used in other ESP-IDF setting as ${env:VARNAME} and ${config:ESPIDFSETTING}, respectively.

Example : If you want to use '~/esp/esp-idf' you can set the value of idf.espIdfPath to '${env:HOME}/esp/esp-idf'.

Available Tasks in tasks.json

There is also some tasks defined in Tasks.json, which can be executed by running F1 and writing Tasks: Run task and selecting one ofthe following:

1. Build - Build Project
2. Set Target to esp32
3. Set Target to esp32s2
4. Clean - Clean the project
5. Flash - Flash the device
6. Monitor - Start a monitor terminal
7. OpenOCD - Start the openOCD server
8. BuildFlash - Execute a build followed by a flash command.

Note that for OpenOCD tasks you need to define OPENOCD_SCRIPTS in your system environment variables with openocd scripts folder path.

SDK Configuration editor

This plugin includes a GUI menuconfig that reads your current project folder's sdkconfig file (if available, otherwise it would take default values) and start a configuration server process (confserver.py in ${ESP-IDF-DIRECTORYPATH}/tools) that enables the user to redefine ESP-IDF board parameters.

Visual Studio Code Extension Development

When the user modify a parameter value, the value is send to the confserver.py process, which return the new value and other values modified to GUI menuconfig and then update the values in the UI.

Values are not automatically saved to the sdkconfig file until you click save changes. You can cancel any changes and load the values from the sdkconfig file by clicking cancel changes. If you click set default the current sdkconfig file is replaced by a template sdkconfig file and then loaded into the GUI menuconfig rendered values.

The search functionality allows to find a parameter by description, i.e the name that appears in the sdkconfig file.

An IDF GUI Menuconfig log in Output is created to print all communications with ${idf.espIdfPath}toolsconfserver.py. It can be be used to track any errors.

Working with multiple projects

For big projects, a user will typically have one or more projects to build, flash or monitor. The ESP-IDF uses the Visual Studio Code Workspace file schema to identify all projects folders inside the current workspace (which would be the root folder).

You can select the current project by clicking the IDF Current Project Item in the Visual Studio Code Status bar or by pressing F1 and typing ESP-IDF: Pick a workspace folder for IDF commands which will determine the folder where to obtain the ESP-IDF Settings such as current device USB port, ESP-IDF path, etc.

Projects folders and workspace level settings are defined in the .code-workspace file such as:

Settings in the root folder's .code-workspace can be used when your current project directory doesn't contain a .vscode/settings.json file.

If you want to open a project with multiple subprojects in Visual Studio Code, click Menu File then Open Workspace which will open a window to select the .code-workspace of your root project. You can either manually create this .code-workspace file and define all sub folders (projects) or when you click Menu File --> Save Workspace as... which doesn't automatically add any folder inside the current directory. You can add a folder to the workspace when you click Menu File --> Add Folder to Workspace....

NOTE: You still need to manually select the debug configuration in the Debug tab that correspond to your current workspace folder. There is a project folder suffix on each debug configuration.

Code Coverage

We provide editor code coverage highlight and HTML reports for ESP-IDF projects, if coverage files are generated on a ESP-IDF project's build directory. For more info please take a look at Code Coverage.

Debugging

Click F5 to start debugging. For correct debug experience, first build, flash your device and define the correct idf.customExtraPaths paths and idf.customExtraVars using SETUP.

When you start debug, an OpenOCD process starts in the background. OpenOCD Output log window is created in Visual Studio Code lower panel. To configure your project's launch.json to debug, please review DEBUGGING.

Log & Heap Tracing

We support log and heap tracing out of the box, which enables users to perform log/heap tracing with just few button clicks and present the results of tracing data with UI.

You can follow this quick step-by-step guide for heap tracing.

System View Tracing Viewer

We have provide a system view tracing viewer inside the vscode extension which will enable you to view the traces along with other relevant details.

Kconfig files editor

When you open a Kconfig, Kconfig.projbuild or Kconfig.in file we provide syntax highlighting. If idf.useIDFKconfigStyle is enabled, we also provide ESP-IDF Kconfig style syntax validation such as indent validation and not closing blocks found (Example: menu-endmenu). Please review Kconfig Formatting Rules and Kconfig Language for further details about the ESP-IDF Kconfig formatting rules and Kconfig language in general.

On CMakeLists.txt file right click this extension provides a custom CMake Editor to fill our ESP-IDF Project and Component registration as specified in ESP-IDF Project CMakeLists.txt and ESP-IDF Component CMakeLists.txt files. You need to choose which kind of CMakeLists.txt file (project or component) to edit. There is 2 types of input, one is a simple string and another is an array of strings, such as Component Sources (SRCS). All inputs are described in the CMakeLists.txt Schema (${this_repository}/src/cmake/cmakeListsSchema.json).

ESP Rainmaker Support

Visual Studio Code Extension Sample

We support connecting, viewing and editing of ESP Rainmaker enabled devices out of the box, please refer here for more info.

Forum

If you are lost at any point you can always ask question, help and suggestion in the forum, apart from creating Github Issues. For all the ESP-IDF related concerns please follow their suggested channel of communications.

Code of Conduct

This project and everyone participating in it is governed by the Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to vscode@espressif.com.

Visual Studio Code Language Extension Example

License

C++ Visual Studio Code Example

This extension is licensed under the Apache License 2.0. Please see the LICENSE file for additional copyright notices and terms.