Debugging with Visual Studio Code

This page contains tips for editing and debugging scratch-gui, scratch-vm, scratch-render, and related repositories using Visual Studio Code, also known as VS Code. This page does NOT contain tips for using Visual Studio, which is a separate development environment with a similar name.

VS Code Extensions

VS Code by itself provides a very basic experience; for a more complete editing and debugging experience you'll need to install some extensions. This section lists some extensions that work well with the Scratch 3.0 repositories.

Please note that the extensions marketplace changes rapidly and this information may be out of date; this is just meant as a starting point.

Extension Name	Extension ID / search term	Notes
Code Spell checker	streetsidesoftware.code-spell-checker
Debugger for Chrome	msjsdiag.debugger-for-chrome	See below for setup help
EditorConfig for VS Code	editorconfig.editorconfig
EJS language support	digitalbrainstem.javascript-ejs-support
ESLint	dbaeumer.vscode-eslint
GitLens — Git supercharged	eamodio.gitlens
GLSL Lint	cadenas.vscode-glsllint	Specifically for editing shaders in scratch-render
HTML CSS Support	ecmel.vscode-html-css	Primarily for scratch-gui
Markdown All in One	yzhang.markdown-all-in-one
markdownlint	davidanson.vscode-markdownlint
Node.js Modules Intellisense	leizongmin.node-module-intellisense
npm	eg2.vscode-npm-script
Visual Studio IntelliCode	visualstudioexptteam.vscodeintellicode
XML	redhat.vscode-xml
YAML	redhat.vscode-yaml