explaingit

microsoft/vscode-recipes

5,965JavaScriptAudience · developerComplexity · 1/5Setup · easy

TLDR

A collection of step-by-step guides for configuring the VS Code debugger with specific frameworks like React, Node.js, Angular, and Python so you can set breakpoints and step through code.

Mindmap

mindmap
  root((repo))
    What it does
      VS Code debug setup
      Framework recipes
    Frontend
      React Angular Vue
      Next.js
    Backend
      Node.js Nodemon
      Ruby Rails PHP Python
    Testing
      Jest Mocha
    Other targets
      Electron apps
      AWS Lambda
    Content type
      Docs and config files
      Maintained by Microsoft
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Set up breakpoint debugging for a React app in VS Code without installing extra extensions

USE CASE 2

Configure VS Code to attach to a Node.js server running with Nodemon so it reconnects on restart

USE CASE 3

Debug Jest tests line by line in VS Code to pinpoint why individual tests are failing

USE CASE 4

Set up VS Code debugging for an AWS Lambda function using the recipe guide

Tech stack

JavaScriptJSONVS Code

Getting it running

Difficulty · easy Time to first run · 5min
No license information mentioned in the explanation.

In plain English

This repository is a collection of short how-to guides for setting up debugging in Visual Studio Code, a free code editor made by Microsoft. Each guide, called a recipe, focuses on a specific technology or framework and explains how to configure VS Code so you can run and step through your code line by line to find problems. The list covers a wide range of common web and backend setups. There are recipes for React, Angular, Vue.js, Next.js, and other front-end frameworks, as well as server-side options like Node.js with Nodemon, Ruby on Rails, PHP, and Python. It also includes recipes for test runners such as Jest and Mocha, for Electron desktop apps, and for AWS Lambda functions. Each recipe is a separate folder or linked guide with its own README explaining the steps. The repository itself is mostly documentation and configuration files rather than runnable code. It is maintained by Microsoft and was created to help developers who already use VS Code get more out of its built-in debugging tools when working with specific frameworks that require extra setup.

Copy-paste prompts

Prompt 1
Give me the exact VS Code launch.json configuration to debug a Create React App project with breakpoints in Chrome, following the vscode-recipes pattern.
Prompt 2
I want to debug a Next.js app in VS Code. Walk me through the launch.json configuration from the microsoft/vscode-recipes collection.
Prompt 3
Set up VS Code to debug a Python Flask API with breakpoints using the recipe pattern. Show me the launch.json and any required VS Code extensions.
Open on GitHub → Explain another repo

← microsoft on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.