{"id":801,"date":"2026-08-21T10:59:43","date_gmt":"2026-08-21T15:59:43","guid":{"rendered":"https:\/\/sts.doit.wisc.edu\/training-materials\/?post_type=manual&#038;p=801"},"modified":"2026-10-26T12:26:35","modified_gmt":"2026-10-26T17:26:35","slug":"vs-code-a-hands-on-introduction-to-the-developers-editor","status":"publish","type":"manual","link":"https:\/\/sts.doit.wisc.edu\/training-materials\/manual\/vs-code-a-hands-on-introduction-to-the-developers-editor\/","title":{"rendered":"VS Code: A Hands-On Introduction to the Developer\u2019s Editor"},"content":{"rendered":"\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"152\" src=\"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-content\/uploads\/2025\/09\/sts-icon-notext.png\" alt=\"The STS logo of a cybernetically enhanced brain. Serious sci-fi.\" class=\"wp-image-196\" style=\"width:395px;height:auto\"\/><\/figure>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every piece of software you use, from the apps on your phone to the course websites you log into, started as plain text typed into an editor. You could technically write code in Notepad or TextEdit, but the tool you write code in has a huge effect on how fast you work, how many mistakes you catch, and how much you enjoy the process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Visual Studio Code<\/strong> (usually just called <strong>VS Code<\/strong>) is a free code editor made by Microsoft. It has become one of the most widely used tools among developers, students, data scientists, and researchers because it is lightweight, works on every major operating system, and can be extended to support almost any programming language.<\/p>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Code Editor<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>code editor<\/strong> is a text editor built specifically for writing source code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike a regular text editor, it understands the structure of programming languages, so it can color-code your text (syntax highlighting), suggest completions, point out errors, and help you navigate large projects.<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This manual will walk through how VS Code is organized, the editing features that save the most time, how to customize it with extensions and settings, and how to use its built-in terminal, debugger, and Git tools.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The examples in this manual use <strong>Python<\/strong>, but nearly everything here applies to any language you write in VS Code, including JavaScript, HTML\/CSS, R, Java, C++, and more.<\/p>\n\n\n\n<div class=\"wp-block-group sts-callout-important has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>You do not need to be an experienced programmer to follow this manual.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you have written even a few lines of code (or attended the STS <em>A Beginner&#8217;s Guide to Programming<\/em> workshop), you have all the background you need.<\/p>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Editors and IDEs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before diving into VS Code itself, it helps to understand where it fits among the different kinds of tools people use to write code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text Editors<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A plain text editor (Notepad on Windows, TextEdit on macOS) can open and save code files, but it treats your code like any other text. It won&#8217;t warn you about typos, help you find a function, or run your program.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Integrated Development Environments (IDEs)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An <strong>IDE<\/strong> bundles everything a developer needs into one application: an editor, tools to run and debug code, project management, and often language-specific features. Examples include <strong>PyCharm<\/strong> (Python), <strong>RStudio<\/strong> (R), <strong>IntelliJ IDEA<\/strong> (Java), and <strong>Visual Studio<\/strong> (C#\/C++).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">IDEs are powerful, but they are often built around a single language, can be large downloads, and may take a while to learn.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Where VS Code Fits<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code sits in between. Out of the box it is a fast, lightweight code editor. By adding <strong>extensions<\/strong>, you can give it IDE-level features (running, debugging, testing, IntelliSense) for whichever languages you use, so one tool can cover all your classes and projects.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-base-background-color has-background has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Tool<\/strong><\/th><td class=\"has-text-align-center\" data-align=\"center\"><strong>Type<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Best For<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Cost<\/strong><\/td><\/tr><tr><td>Notepad \/ TextEdit<\/td><td>Plain text editor<\/td><td>Quick notes, tiny edits<\/td><td>Free (built in)<\/td><\/tr><tr><td>VS Code<\/td><td>Extensible code editor<\/td><td>Almost any language; switching between many projects<\/td><td>Free<\/td><\/tr><tr><td>PyCharm<\/td><td>IDE<\/td><td>Large Python projects<\/td><td>Free and paid editions<\/td><\/tr><tr><td>RStudio<\/td><td>IDE<\/td><td>R and statistics<\/td><td>Free<\/td><\/tr><tr><td>Visual Studio<\/td><td>IDE<\/td><td>C#, .NET, and C++ applications on Windows<\/td><td>Free and paid editions<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-group sts-callout-important has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">VS Code and Visual Studio are different!<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Despite the similar names, <strong>Visual Studio Code<\/strong> and <strong>Visual Studio<\/strong> are two separate products from Microsoft.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Visual Studio<\/strong> is a large, full-featured IDE mainly used for C#, .NET, and C++ development on Windows.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Visual Studio Code<\/strong> is a lightweight, cross-platform editor that runs on Windows, macOS, and Linux and supports almost any language through extensions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When searching for help online, make sure the answers you find are about the right one!<\/p>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Installing VS Code<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">code.visualstudio.com<\/a>.<\/li>\n\n\n\n<li>Download the installer for your operating system (Windows, macOS, or Linux).<\/li>\n\n\n\n<li>Run the installer. On Windows, checking <strong>Add to PATH<\/strong> and <strong>Open with Code<\/strong> during installation is recommended.<\/li>\n\n\n\n<li>Launch VS Code. You will see the <strong>Welcome<\/strong> page, which links to walkthroughs and recently opened folders.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">No install? Try vscode.dev<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">If you are on a computer where you can&#8217;t install software, you can use a browser-based version of VS Code at <a href=\"https:\/\/vscode.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">vscode.dev<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It supports editing and many extensions, but it cannot run a terminal or debugger on your computer.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Installing a Language<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code is an editor, not a programming language. To actually <strong>run<\/strong> code, the language itself must be installed on your computer separately. For example, to run Python code, you need Python installed from <a href=\"https:\/\/www.python.org\/downloads\/\" target=\"_blank\" rel=\"noreferrer noopener\">python.org<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can check whether a language is installed by opening a terminal and typing a version command:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-bash\" data-line=\"\">python --version\n# On macOS\/Linux you may need:\npython3 --version<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Opening a Folder<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code works best when you open an entire <strong>folder<\/strong> rather than individual files. The folder you open becomes your <strong>workspace<\/strong>, and VS Code uses it to find files, search, run code, and track changes with Git.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>File \u2192 Open Folder\u2026<\/strong> (Windows\/Linux) or <strong>File \u2192 Open\u2026<\/strong> (macOS)<\/li>\n\n\n\n<li>Drag a folder onto the VS Code window<\/li>\n\n\n\n<li>From a terminal, navigate to the folder and type <code class=\"\" data-line=\"\">code .<\/code><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Workspace<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>workspace<\/strong> is the folder (or set of folders) you have open in VS Code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Settings, debugging configurations, and recommended extensions can be saved inside the workspace in a hidden folder called <code class=\"\" data-line=\"\">.vscode<\/code>, so they travel with the project.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group sts-callout-important has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Workspace Trust<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The first time you open a folder, VS Code asks whether you <strong>trust the authors<\/strong> of the files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Code inside a folder can run automatically through tasks, extensions, and debug settings. Only choose <strong>Yes, I trust the authors<\/strong> for folders you created or got from a source you trust. Otherwise, choose <strong>No, I don&#8217;t trust the authors<\/strong> to open it in Restricted Mode.<\/p>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">The VS Code Interface<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The VS Code window is divided into five main areas. Knowing their names makes it much easier to follow tutorials and documentation.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-base-background-color has-background has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Area<\/strong><\/th><td class=\"has-text-align-center\" data-align=\"center\"><strong>Location<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>What It Does<\/strong><\/td><\/tr><tr><td>Activity Bar<\/td><td>Far left edge<\/td><td>Switches between the main views: Explorer, Search, Source Control, Run and Debug, and Extensions<\/td><\/tr><tr><td>Primary Side Bar<\/td><td>Left, next to the Activity Bar<\/td><td>Shows the contents of the selected view, such as your project&#8217;s files<\/td><\/tr><tr><td>Editor<\/td><td>Center<\/td><td>Where you write and edit code. You can open files in tabs and split the editor into multiple groups<\/td><\/tr><tr><td>Panel<\/td><td>Below the editor<\/td><td>Holds the Terminal, Problems, Output, and Debug Console<\/td><\/tr><tr><td>Status Bar<\/td><td>Bottom edge<\/td><td>Shows information about the current file: language, line number, Git branch, errors and warnings<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">The Activity Bar Views<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-base-background-color has-background has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>View<\/strong><\/th><td class=\"has-text-align-center\" data-align=\"center\"><strong>Windows \/ Linux<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>macOS<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Use It To\u2026<\/strong><\/td><\/tr><tr><td>Explorer<\/td><td>Ctrl + Shift + E<\/td><td>Cmd + Shift + E<\/td><td>Create, open, rename, and delete files and folders<\/td><\/tr><tr><td>Search<\/td><td>Ctrl + Shift + F<\/td><td>Cmd + Shift + F<\/td><td>Find (and replace) text across every file in the workspace<\/td><\/tr><tr><td>Source Control<\/td><td>Ctrl + Shift + G<\/td><td>Ctrl + Shift + G<\/td><td>Stage and commit changes with Git<\/td><\/tr><tr><td>Run and Debug<\/td><td>Ctrl + Shift + D<\/td><td>Cmd + Shift + D<\/td><td>Start the debugger and inspect running code<\/td><\/tr><tr><td>Extensions<\/td><td>Ctrl + Shift + X<\/td><td>Cmd + Shift + X<\/td><td>Find, install, and manage extensions<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can hide and show the side bar with <strong>Ctrl + B<\/strong> (<strong>Cmd + B<\/strong> on macOS) to give yourself more room to write.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Command Palette<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Command Palette<\/strong> is a search bar for every command in VS Code. Open it with <strong>Ctrl + Shift + P<\/strong> (<strong>Cmd + Shift + P<\/strong> on macOS) or <strong>F1<\/strong>, then start typing what you want to do, such as <em>theme<\/em>, <em>format<\/em>, or <em>word wrap<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">If you only remember one shortcut\u2026<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Make it the <strong>Command Palette<\/strong>: <strong>Ctrl + Shift + P<\/strong> \/ <strong>Cmd + Shift + P<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every menu item, setting, and extension command can be found from it, and it shows the keyboard shortcut next to each command, so it is also the best way to learn new shortcuts.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Quick Open<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ctrl + P<\/strong> (<strong>Cmd + P<\/strong> on macOS) opens <strong>Quick Open<\/strong>, which lets you jump to any file in your workspace by typing part of its name. In large projects this is much faster than clicking through folders in the Explorer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quick Open also accepts a few prefixes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code class=\"\" data-line=\"\">&gt;<\/code> switches to the Command Palette<\/li>\n\n\n\n<li><code class=\"\" data-line=\"\">:<\/code> followed by a number jumps to that line (for example <code class=\"\" data-line=\"\">:42<\/code>)<\/li>\n\n\n\n<li><code class=\"\" data-line=\"\">@<\/code> lists the functions and classes in the current file<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Splitting the Editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To view two files side by side, press <strong>Ctrl + \\<\/strong> (<strong>Cmd + \\<\/strong> on macOS) or drag a tab to the edge of the editor. This is helpful for comparing files or keeping instructions open while you code.<\/p>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Writing and Editing Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code includes many features that help you write code faster and with fewer mistakes. These are the ones that tend to save beginners the most time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">IntelliSense<\/h3>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">IntelliSense<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>IntelliSense<\/strong> is VS Code&#8217;s name for smart code completion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As you type, it suggests variable names, functions, and methods, and it shows information about what a function expects (its parameters) and what it returns.<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Press <strong>Tab<\/strong> or <strong>Enter<\/strong> to accept a suggestion. If the list disappears, press <strong>Ctrl + Space<\/strong> to bring it back. Hovering your mouse over a function or variable shows its documentation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For most languages, full IntelliSense requires that language&#8217;s extension (for example, the <strong>Python<\/strong> extension for Python).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Multi-Cursor Editing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code lets you place more than one cursor at once, so you can type the same change in several places at the same time.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Alt + Click<\/strong> (<strong>Option + Click<\/strong> on macOS) adds a cursor wherever you click<\/li>\n\n\n\n<li><strong>Ctrl + D<\/strong> (<strong>Cmd + D<\/strong>) selects the next occurrence of the highlighted word; keep pressing it to add more<\/li>\n\n\n\n<li><strong>Ctrl + Shift + L<\/strong> (<strong>Cmd + Shift + L<\/strong>) selects every occurrence at once<\/li>\n\n\n\n<li><strong>Ctrl + Alt + \u2191\/\u2193<\/strong> (<strong>Cmd + Option + \u2191\/\u2193<\/strong>) adds a cursor on the line above or below<\/li>\n\n\n\n<li>Press <strong>Esc<\/strong> to go back to a single cursor<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Rename Symbol<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To rename a variable or function everywhere it is used, click on it and press <strong>F2<\/strong>, then type the new name. Unlike Find and Replace, this only changes that exact variable, not other words that happen to contain the same letters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Working with Lines<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-base-background-color has-background has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Action<\/strong><\/th><td class=\"has-text-align-center\" data-align=\"center\"><strong>Windows \/ Linux<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>macOS<\/strong><\/td><\/tr><tr><td>Move line up\/down<\/td><td>Alt + \u2191 \/ \u2193<\/td><td>Option + \u2191 \/ \u2193<\/td><\/tr><tr><td>Copy line up\/down<\/td><td>Shift + Alt + \u2191 \/ \u2193<\/td><td>Shift + Option + \u2191 \/ \u2193<\/td><\/tr><tr><td>Delete line<\/td><td>Ctrl + Shift + K<\/td><td>Cmd + Shift + K<\/td><\/tr><tr><td>Comment \/ uncomment line<\/td><td>Ctrl + \/<\/td><td>Cmd + \/<\/td><\/tr><tr><td>Go to line<\/td><td>Ctrl + G<\/td><td>Ctrl + G<\/td><\/tr><tr><td>Find \/ Replace in file<\/td><td>Ctrl + F \/ Ctrl + H<\/td><td>Cmd + F \/ Cmd + Option + F<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Formatting Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Formatting<\/strong> means automatically fixing the layout of your code: indentation, spacing around operators, line breaks, and so on. It doesn&#8217;t change what your code does, only how it looks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use <strong>Format Document<\/strong> from the Command Palette, or press <strong>Shift + Alt + F<\/strong> (<strong>Shift + Option + F<\/strong> on macOS). The first time, VS Code may ask you to pick or install a <strong>formatter<\/strong> extension for that language (for example, <strong>Black Formatter<\/strong> for Python or <strong>Prettier<\/strong> for JavaScript\/HTML\/CSS).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is some messy Python code before formatting:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-python\" data-line=\"\">def   calculate_total(prices,tax_rate):\n    total=0\n    for p in prices :\n        total+=p\n    return total*(1+tax_rate)\ncart=[4.99,12.50,  3.25]\nprint( calculate_total(cart,0.055) )<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">And the same code after running Format Document with Black:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-python\" data-line=\"\">def calculate_total(prices, tax_rate):\n    total = 0\n    for p in prices:\n        total += p\n    return total * (1 + tax_rate)\n\n\ncart = [4.99, 12.50, 3.25]\nprint(calculate_total(cart, 0.055))<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Linting and the Problems Panel<\/h3>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Linter<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>linter<\/strong> is a tool that reads your code without running it and flags likely mistakes or style issues, such as an undefined variable or an unused import.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Problems show up as squiggly underlines in the editor and are listed in the <strong>Problems<\/strong> panel (<strong>Ctrl + Shift + M<\/strong> \/ <strong>Cmd + Shift + M<\/strong>).<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Red squiggles usually mean errors, and yellow squiggles mean warnings. Hover over a squiggle to see the message, or click the lightbulb icon for suggested <strong>Quick Fixes<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Emmet for HTML and CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code has <strong>Emmet<\/strong> built in, which expands short abbreviations into full HTML. In an <code class=\"\" data-line=\"\">.html<\/code> file, type <code class=\"\" data-line=\"\">!<\/code> and press <strong>Tab<\/strong> to generate a complete page skeleton, or type <code class=\"\" data-line=\"\">ul&gt;li*3<\/code> and press <strong>Tab<\/strong> to create a list with three items.<\/p>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Extensions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Extensions are what turn VS Code from a simple editor into a full development environment. They can add support for new languages, formatters, debuggers, themes, and integrations with other tools.<\/p>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Extension<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">An <strong>extension<\/strong> is an add-on that adds new features to VS Code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Extensions are published on the <strong>Visual Studio Code Marketplace<\/strong> and can be installed directly from the Extensions view inside VS Code.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Installing an Extension<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the Extensions view (<strong>Ctrl + Shift + X<\/strong> \/ <strong>Cmd + Shift + X<\/strong>).<\/li>\n\n\n\n<li>Search for the extension by name, for example <em>Python<\/em>.<\/li>\n\n\n\n<li>Click the extension to read its details, then click <strong>Install<\/strong>.<\/li>\n\n\n\n<li>Some extensions ask you to reload the window or configure a setting after installing.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">From the same view, you can <strong>Disable<\/strong> an extension (turn it off without removing it) or <strong>Uninstall<\/strong> it. Clicking the gear icon on an extension gives you access to its settings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Recommended Extensions<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-base-background-color has-background has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Extension<\/strong><\/th><td class=\"has-text-align-center\" data-align=\"center\"><strong>Publisher<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>What It Does<\/strong><\/td><\/tr><tr><td>Python<\/td><td>Microsoft<\/td><td>Running, debugging, IntelliSense, and environment management for Python (installs Pylance automatically)<\/td><\/tr><tr><td>Jupyter<\/td><td>Microsoft<\/td><td>Open and run Jupyter notebooks (.ipynb) inside VS Code<\/td><\/tr><tr><td>Black Formatter \/ Ruff<\/td><td>Microsoft \/ Astral<\/td><td>Automatic Python formatting (Ruff also lints)<\/td><\/tr><tr><td>Prettier<\/td><td>Prettier<\/td><td>Formatting for JavaScript, HTML, CSS, JSON, and Markdown<\/td><\/tr><tr><td>Live Server<\/td><td>Ritwick Dey<\/td><td>Opens HTML files in a browser that refreshes automatically when you save<\/td><\/tr><tr><td>R<\/td><td>REditorSupport<\/td><td>Running R code and viewing plots inside VS Code<\/td><\/tr><tr><td>GitLens<\/td><td>GitKraken<\/td><td>Shows who changed each line of code and when<\/td><\/tr><tr><td>Live Share<\/td><td>Microsoft<\/td><td>Edit and debug code together with someone in real time<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-group sts-callout-important has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Be careful what you install<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Extensions can run code on your computer, so only install extensions you actually need from publishers you trust.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Look for a <strong>verified publisher<\/strong> checkmark, a high install count, and recent updates before installing. If an extension has very few installs or a name that imitates a popular extension, skip it.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Recommended Extensions for a Project<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When VS Code opens a file type it recognizes, it will often suggest the matching extension with a pop-up in the bottom-right corner. Projects can also include a <code class=\"\" data-line=\"\">.vscode\/extensions.json<\/code> file listing recommended extensions, which VS Code will offer to install for anyone who opens that folder.<\/p>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Settings and Customization<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">The Settings Editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open Settings with <strong>Ctrl + ,<\/strong> (<strong>Cmd + ,<\/strong> on macOS). The Settings editor has a search bar at the top, so you can type a word like <em>font size<\/em> or <em>auto save<\/em> instead of browsing through every option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some useful settings for beginners:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-base-background-color has-background has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Setting<\/strong><\/th><td class=\"has-text-align-center\" data-align=\"center\"><strong>What It Does<\/strong><\/td><\/tr><tr><td>Files: Auto Save<\/td><td>Saves files automatically (for example, afterDelay or onFocusChange)<\/td><\/tr><tr><td>Editor: Format On Save<\/td><td>Runs your formatter every time you save a file<\/td><\/tr><tr><td>Editor: Font Size<\/td><td>Changes the size of text in the editor<\/td><\/tr><tr><td>Editor: Word Wrap<\/td><td>Wraps long lines so you don&#8217;t have to scroll sideways<\/td><\/tr><tr><td>Editor: Minimap Enabled<\/td><td>Shows or hides the code overview on the right side of the editor<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">User vs. Workspace Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Settings can be saved at two levels, shown as tabs at the top of the Settings editor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>User settings<\/strong> apply to every folder you open on your computer.<\/li>\n\n\n\n<li><strong>Workspace settings<\/strong> apply only to the current folder and are saved in <code class=\"\" data-line=\"\">.vscode\/settings.json<\/code> inside it. Workspace settings override user settings.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This means you could, for example, use a 4-space indent for Python projects and a 2-space indent for a web project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Editing settings.json<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Behind the Settings editor, every setting is stored in a JSON file. You can edit it directly by running <strong>Preferences: Open User Settings (JSON)<\/strong> from the Command Palette. This is handy when a tutorial gives you settings to copy and paste.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-json\" data-line=\"\">{\n    &quot;editor.fontSize&quot;: 16,\n    &quot;editor.formatOnSave&quot;: true,\n    &quot;files.autoSave&quot;: &quot;afterDelay&quot;,\n    &quot;[python]&quot;: {\n        &quot;editor.defaultFormatter&quot;: &quot;ms-python.black-formatter&quot;\n    }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">JSON<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JSON<\/strong> (JavaScript Object Notation) is a common text format for storing settings and data as <strong>&#8220;key&#8221;: value<\/strong> pairs, separated by commas and wrapped in curly braces.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A missing comma or quotation mark will stop the file from working, so VS Code underlines any mistakes in red.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Themes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Change your color theme with <strong>Ctrl + K<\/strong> then <strong>Ctrl + T<\/strong> (<strong>Cmd + K<\/strong>, <strong>Cmd + T<\/strong> on macOS), or search the Command Palette for <strong>Preferences: Color Theme<\/strong>. Use the arrow keys to preview themes before choosing one. More themes, including icon themes, can be installed from the Extensions view.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Keyboard Shortcuts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open the Keyboard Shortcuts editor with <strong>Ctrl + K<\/strong> then <strong>Ctrl + S<\/strong> (<strong>Cmd + K<\/strong>, <strong>Cmd + S<\/strong>). You can search for any command, see its current shortcut, and double-click it to assign a new one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Profiles and Settings Sync<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Profiles<\/strong> let you save different sets of extensions and settings (for example, one for a Python class and one for web development) and switch between them from the gear icon in the bottom-left corner.<\/li>\n\n\n\n<li><strong>Settings Sync<\/strong> (gear icon \u2192 <strong>Backup and Sync Settings\u2026<\/strong>) uses a Microsoft or GitHub account to keep your settings, extensions, and shortcuts the same across multiple computers.<\/li>\n<\/ul>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Integrated Terminal<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A terminal (also called the command line or shell) lets you control your computer by typing commands. VS Code includes a terminal right inside the editor, so you can run programs, install packages, and use Git without switching windows.<\/p>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Terminal<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>terminal<\/strong> is a text-based interface for running commands on your computer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The program that interprets those commands is called a <strong>shell<\/strong>. Common shells include <strong>PowerShell<\/strong> and <strong>Command Prompt<\/strong> on Windows and <strong>zsh<\/strong> or <strong>bash<\/strong> on macOS and Linux.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Opening the Terminal<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press <strong>Ctrl + `<\/strong> (the backtick key, usually above Tab) on all platforms<\/li>\n\n\n\n<li>Or use the menu: <strong>Terminal \u2192 New Terminal<\/strong> (or <strong>View \u2192 Terminal<\/strong>)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The terminal opens in the Panel at the bottom of the window and starts inside your workspace folder, so commands run where your files are.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Useful Terminal Features<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the <strong>+<\/strong> icon to open additional terminals, or the split icon to show two side by side.<\/li>\n\n\n\n<li>Use the dropdown arrow next to <strong>+<\/strong> to choose a different shell. <strong>Terminal: Select Default Profile<\/strong> in the Command Palette sets which one opens by default.<\/li>\n\n\n\n<li>Click the trash can icon to close a terminal (closing the Panel only hides it).<\/li>\n\n\n\n<li><strong>Ctrl + C<\/strong> stops a program that is currently running in the terminal.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Running Code from the Terminal<\/h3>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-bash\" data-line=\"\"># Run a Python file in the current folder\npython hello.py\n\n# Install a Python package\npython -m pip install requests\n\n# List the files in the current folder\nls<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">The &#8220;code&#8221; command<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Typing <code class=\"\" data-line=\"\">code .<\/code> in any terminal opens the current folder in VS Code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On Windows this is set up by the installer. On macOS, open the Command Palette and run <strong>Shell Command: Install &#8216;code&#8217; command in PATH<\/strong> first.<\/p>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Running and Debugging Code<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Running a File<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once a language extension is installed, a <strong>Run<\/strong> button (\u25b7) appears in the top-right corner of the editor. For Python, clicking it runs the current file in the integrated terminal, just like typing <code class=\"\" data-line=\"\">python filename.py<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you have more than one version of Python installed, choose which one VS Code uses by clicking the Python version in the Status Bar, or by running <strong>Python: Select Interpreter<\/strong> from the Command Palette.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What Is Debugging?<\/h3>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Debugging<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>bug<\/strong> is a mistake in a program that makes it behave incorrectly. <strong>Debugging<\/strong> is the process of finding and fixing bugs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>debugger<\/strong> is a tool that lets you pause a program while it is running, look at the values of its variables, and step through the code one line at a time.<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Many beginners debug by adding <code class=\"\" data-line=\"\">print()<\/code> statements everywhere. That works, but a debugger lets you see <strong>every<\/strong> variable at any point, without changing your code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Breakpoints<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>breakpoint<\/strong> tells the debugger where to pause. To add one, click in the space just to the left of a line number (called the <strong>gutter<\/strong>). A red dot appears. Click it again to remove it, or press <strong>F9<\/strong> to toggle a breakpoint on the current line.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Starting the Debugger<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Set a breakpoint on the line you want to inspect.<\/li>\n\n\n\n<li>Press <strong>F5<\/strong> (or open <strong>Run and Debug<\/strong> and click <strong>Run and Debug<\/strong>).<\/li>\n\n\n\n<li>If asked, choose a configuration such as <strong>Python Debugger \u2192 Python File<\/strong>.<\/li>\n\n\n\n<li>The program runs and pauses on your breakpoint. The current line is highlighted in yellow.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">The Debug Toolbar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">While paused, a small toolbar appears at the top of the window:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-base-background-color has-background has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Button<\/strong><\/th><td class=\"has-text-align-center\" data-align=\"center\"><strong>Shortcut<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>What It Does<\/strong><\/td><\/tr><tr><td>Continue<\/td><td>F5<\/td><td>Keep running until the next breakpoint (or the end)<\/td><\/tr><tr><td>Step Over<\/td><td>F10<\/td><td>Run the current line and move to the next one<\/td><\/tr><tr><td>Step Into<\/td><td>F11<\/td><td>If the line calls a function, go inside that function<\/td><\/tr><tr><td>Step Out<\/td><td>Shift + F11<\/td><td>Finish the current function and return to where it was called<\/td><\/tr><tr><td>Restart<\/td><td>Ctrl + Shift + F5 (Cmd + Shift + F5)<\/td><td>Start the program over from the beginning<\/td><\/tr><tr><td>Stop<\/td><td>Shift + F5<\/td><td>End the debugging session<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Inspecting Your Program<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Run and Debug<\/strong> side bar shows several sections while your program is paused:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Variables<\/strong> lists every variable and its current value.<\/li>\n\n\n\n<li><strong>Watch<\/strong> lets you type in any expression (like <code class=\"\" data-line=\"\">len(scores)<\/code> or <code class=\"\" data-line=\"\">total \/ 2<\/code>) and see its value update as you step.<\/li>\n\n\n\n<li><strong>Call Stack<\/strong> shows which function you are in and which function called it.<\/li>\n\n\n\n<li><strong>Breakpoints<\/strong> lists all your breakpoints so you can turn them on or off.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can also hover your mouse over any variable in the editor to see its value, or type expressions into the <strong>Debug Console<\/strong> in the Panel.<\/p>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">launch.json<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To save custom debug settings (such as command-line arguments), click <strong>create a launch.json file<\/strong> in the Run and Debug view.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code saves it in the <code class=\"\" data-line=\"\">.vscode<\/code> folder of your workspace, and the configurations appear in the dropdown at the top of the Run and Debug view.<\/p>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Version Control with Git<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Version control<\/strong> keeps a history of every change you make to your project, so you can see what changed, undo mistakes, and work with other people without overwriting each other&#8217;s work. The most widely used version control system is <strong>Git<\/strong>, and VS Code has Git support built in.<\/p>\n\n\n\n<div class=\"wp-block-group sts-callout-important has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Git must be installed separately<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code uses the Git program already installed on your computer. If the Source Control view says Git was not found, download it from <a href=\"https:\/\/git-scm.com\/downloads\" target=\"_blank\" rel=\"noreferrer noopener\">git-scm.com<\/a> and restart VS Code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The first time you commit, Git may ask you to set your name and email.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Key Git Terms<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-base-background-color has-background has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Term<\/strong><\/th><td class=\"has-text-align-center\" data-align=\"center\"><strong>Meaning<\/strong><\/td><\/tr><tr><td>Repository (repo)<\/td><td>A project folder that Git is tracking, including its full history<\/td><\/tr><tr><td>Commit<\/td><td>A saved snapshot of your project at a point in time, with a message describing what changed<\/td><\/tr><tr><td>Staging<\/td><td>Choosing which changes will be included in the next commit<\/td><\/tr><tr><td>Branch<\/td><td>A separate line of work where you can make changes without affecting the main version<\/td><\/tr><tr><td>Remote<\/td><td>A copy of the repository stored online, such as on GitHub<\/td><\/tr><tr><td>Push \/ Pull<\/td><td>Send your commits to the remote \/ download new commits from the remote<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">The Source Control Workflow<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <strong>Source Control<\/strong> view (<strong>Ctrl + Shift + G<\/strong>).<\/li>\n\n\n\n<li>If the folder is not a repository yet, click <strong>Initialize Repository<\/strong>.<\/li>\n\n\n\n<li>Changed files appear under <strong>Changes<\/strong>. Click a file to see a side-by-side <strong>diff<\/strong> of what changed (green for added, red for removed).<\/li>\n\n\n\n<li>Hover over a file and click <strong>+<\/strong> to <strong>stage<\/strong> it (or <strong>+<\/strong> next to Changes to stage everything).<\/li>\n\n\n\n<li>Type a short message describing your change in the message box, then click <strong>Commit<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Files are also marked in the Explorer: <strong>U<\/strong> means untracked (new), <strong>M<\/strong> means modified, and <strong>D<\/strong> means deleted. The editor gutter shows colored bars next to lines you have added or changed since your last commit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Branches and GitHub<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The current branch name is shown in the bottom-left of the Status Bar. Click it to create a new branch or switch to an existing one.<\/li>\n\n\n\n<li>Click <strong>Publish Branch<\/strong> in the Source Control view to upload your repository to GitHub. VS Code will ask you to sign in to GitHub the first time.<\/li>\n\n\n\n<li>Use <strong>Sync Changes<\/strong> to push your commits and pull down any new ones.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Timeline<\/strong> section at the bottom of the Explorer shows the history of commits for the currently open file.<\/p>\n\n\n\n<div class=\"wp-block-group sts-callout-goodtoknow has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Commit messages<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Good commit messages are short and describe <em>what<\/em> changed and <em>why<\/em>, for example <strong>&#8220;Fix average calculation skipping first score&#8221;<\/strong> rather than <strong>&#8220;stuff&#8221;<\/strong> or <strong>&#8220;update&#8221;<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Your future self (and your teammates) will thank you.<\/p>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Beyond the Basics<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once you are comfortable with the essentials, VS Code has many more features worth exploring.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jupyter Notebooks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With the <strong>Jupyter<\/strong> extension, you can create and run <code class=\"\" data-line=\"\">.ipynb<\/code> notebooks directly in VS Code, mixing code cells, output, charts, and Markdown notes. This is popular for data science courses.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Markdown Preview<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open a <code class=\"\" data-line=\"\">.md<\/code> file and press <strong>Ctrl + Shift + V<\/strong> (<strong>Cmd + Shift + V<\/strong>) to see a formatted preview, which is useful for writing README files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Remote Development<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Remote &#8211; SSH<\/strong> extension lets you open folders on another computer (such as a department server) and edit them as if they were on your own machine. Similar extensions exist for <strong>WSL<\/strong> (Linux on Windows) and <strong>Dev Containers<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Live Share<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Live Share<\/strong> extension lets you share your workspace with a classmate so you can edit and debug together in real time, similar to collaborating in a Google Doc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">AI Coding Assistants<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code supports AI assistants such as <strong>GitHub Copilot<\/strong>, which can suggest code and answer questions in a chat panel. Students can get free access to Copilot Pro through <strong>GitHub Education<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-group sts-callout-important has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Before using an AI assistant for coursework, <strong>check your course&#8217;s policy on AI tools.<\/strong> Always read and understand any code an AI suggests before using it.<\/p>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">Keyboard Shortcut Reference<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A full printable list is available from <strong>Help \u2192 Keyboard Shortcuts Reference<\/strong>, but these are the shortcuts used most often.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-base-background-color has-background has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Action<\/strong><\/th><td class=\"has-text-align-center\" data-align=\"center\"><strong>Windows \/ Linux<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>macOS<\/strong><\/td><\/tr><tr><td>Command Palette<\/td><td>Ctrl + Shift + P<\/td><td>Cmd + Shift + P<\/td><\/tr><tr><td>Quick Open file<\/td><td>Ctrl + P<\/td><td>Cmd + P<\/td><\/tr><tr><td>Toggle side bar<\/td><td>Ctrl + B<\/td><td>Cmd + B<\/td><\/tr><tr><td>Toggle terminal<\/td><td>Ctrl + `<\/td><td>Ctrl + `<\/td><\/tr><tr><td>Settings<\/td><td>Ctrl + ,<\/td><td>Cmd + ,<\/td><\/tr><tr><td>Split editor<\/td><td>Ctrl + \\<\/td><td>Cmd + \\<\/td><\/tr><tr><td>Format document<\/td><td>Shift + Alt + F<\/td><td>Shift + Option + F<\/td><\/tr><tr><td>Toggle comment<\/td><td>Ctrl + \/<\/td><td>Cmd + \/<\/td><\/tr><tr><td>Select next occurrence<\/td><td>Ctrl + D<\/td><td>Cmd + D<\/td><\/tr><tr><td>Add cursor<\/td><td>Alt + Click<\/td><td>Option + Click<\/td><\/tr><tr><td>Rename symbol<\/td><td>F2<\/td><td>F2<\/td><\/tr><tr><td>Go to definition<\/td><td>F12<\/td><td>F12<\/td><\/tr><tr><td>Start debugging \/ continue<\/td><td>F5<\/td><td>F5<\/td><\/tr><tr><td>Toggle breakpoint<\/td><td>F9<\/td><td>F9<\/td><\/tr><tr><td>Step over \/ into<\/td><td>F10 \/ F11<\/td><td>F10 \/ F11<\/td><\/tr><tr><td>Zen Mode (distraction-free)<\/td><td>Ctrl + K, then Z<\/td><td>Cmd + K, then Z<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/section>\n\n\n\n<section class=\"wp-block-sts-block-sts-custom-sections\">\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/code.visualstudio.com\/docs\" target=\"_blank\" rel=\"noreferrer noopener\">VS Code Documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/code.visualstudio.com\/shortcuts\/keyboard-shortcuts-windows.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">VS Code Keyboard Shortcuts (Windows PDF)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/code.visualstudio.com\/shortcuts\/keyboard-shortcuts-macos.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">VS Code Keyboard Shortcuts (macOS PDF)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/code.visualstudio.com\/docs\/python\/python-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">Getting Started with Python in VS Code<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging\" target=\"_blank\" rel=\"noreferrer noopener\">Debugging in VS Code<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/code.visualstudio.com\/docs\/sourcecontrol\/overview\" target=\"_blank\" rel=\"noreferrer noopener\">Source Control in VS Code<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/vscode\" target=\"_blank\" rel=\"noreferrer noopener\">Visual Studio Code Marketplace<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/education.github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub Education<\/a><\/li>\n<\/ul>\n<\/section>\n","protected":false},"author":16,"featured_media":0,"template":"","meta":{"_acf_changed":false,"_uw_seo_meta_title":"","_uw_seo_meta_description":"","_uw_seo_twitter_card_type":"summary_large_image","_uw_seo_meta_image":"","_uw_seo_meta_image_url":"","_uw_seo_meta_image_sizes":[],"_uw_seo_custom_meta_tags":[],"footnotes":""},"categories":[3],"class_list":["post-801","manual","type-manual","status-publish","hentry","category-coding-and-data"],"acf":[],"_links":{"self":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual\/801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual"}],"about":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/types\/manual"}],"author":[{"embeddable":true,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/users\/16"}],"version-history":[{"count":3,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual\/801\/revisions"}],"predecessor-version":[{"id":1909,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual\/801\/revisions\/1909"}],"wp:attachment":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/media?parent=801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/categories?post=801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}