Tutorial: Get started with Visual Studio Code

Ask in VS Code

In this tutorial, you create a small recipe app while learning the key features of Visual Studio Code. You work with files and the user interface, preview and debug the app, customize settings, explore optional extensions, and save your work with Git. The tutorial uses plain HTML, CSS, and JavaScript, with no additional extensions, build tools, runtime, AI account, or coding assistant required.

Tip

If you prefer a video introduction to Visual Studio Code, watch the Getting Started video on our YouTube channel.

Prerequisites

Download and install Visual Studio Code on your computer.
For the source control exercise, complete the Git prerequisites. These prerequisites include installing Git and configuring your Git author name and email address. You can complete the earlier sections without Git.

Open a folder in VS Code

You can use VS Code to work on individual files for quick edits, or you can open a folder as a workspace. Start with a new folder so that the tutorial files and Git history are separate from your other projects.

Create an empty folder named vscode101 outside any existing Git repository.
Open Visual Studio Code, and then select File > Open Folder....
Select the vscode101 folder, and then select Select Folder (Open on macOS).

VS Code now considers the folder a workspace.
On the Workspace Trust dialog, select Yes, I trust the authors.

Important
Workspace Trust lets you decide whether code in your project folder can run in VS Code. When you download code from the internet, review it before you trust the folder. Learn more about Workspace Trust.
Confirm that the Explorer view shows the vscode101 folder.

You use the Explorer view to view and manage the files and folders in your workspace.

Tip

When you open a folder, VS Code can restore its open files, active view, and editor layout. You can also configure settings and debug configurations for only that folder. Learn more about workspaces.

Explore the user interface

Take a quick tour of the user interface before you create the app.

Switch between views with the Activity Bar

Use the Activity Bar to switch between views.

Tip
Hover over an Activity Bar item to see its name and keyboard shortcut. Select the item again to close the view.
Notice that the Primary Side Bar changes to show information for the selected view.

For example, the Run and Debug view contains controls for configuring and starting a debugging session.

View and edit files with the Editor

Select the Explorer view in the Activity Bar, and then select New File....
Enter index.html, and then press Enter.

The new file opens in an Editor in the main area of the window.
Type <h1>My recipes</h1>.

As you type, IntelliSense suggests ways to complete your code. Use Up and Down to navigate the suggestions, and use Tab to insert a selected suggestion.
Save the file with ⌘S (Windows, Linux Ctrl+S).
Select New File... again to create style.css, and then create app.js.

Each file opens in a new Editor tab. You can open multiple editors and view them side by side. Learn more about side-by-side editing.

Access the terminal from the Panel

Open the integrated terminal with ⌃` (Windows, Linux Ctrl+`). You can also select View > Terminal.

You can choose from the shells installed on your computer, such as PowerShell, Command Prompt, or Bash.
Enter the following command to create a file in the workspace.
```
echo "Hello, VS Code" > greetings.txt
```
The terminal starts in the root of your workspace by default. Notice that the Explorer view automatically shows the new file.
Select the Launch Profile dropdown to view the available shells and open another terminal.

Access commands with the Command Palette

Open the Command Palette with ⇧⌘P (Windows, Linux Ctrl+Shift+P). You can also select View > Command Palette.

The Command Palette provides access to many VS Code commands. Extensions can add more commands.
Try these Command Palette modes:
- Command mode (>): after the > symbol, type move terminal to find commands that move the terminal to a new window.
- Quick Open mode: remove the > symbol, and then type a file name to search your workspace. Open Quick Open directly with ⌘P (Windows, Linux Ctrl+P).
- Symbol search mode (#): replace the > symbol with # to search for symbols such as variables and functions.

Tip

The Command Palette uses fuzzy matching. For example, typing odks finds the Open Default Keyboard Shortcuts command.

Create a recipe app

Replace the contents of the three files with the following fixed sample. Keeping the file names and code consistent makes it easier to follow the preview and debugging exercises.

Open index.html, replace its contents with the following HTML, and save the file with ⌘S (Windows, Linux Ctrl+S).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Recipe list</title>
  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
</head>
<body>
  <main>
    <h1>My recipes</h1>
    <form id="recipe-form">
      <label for="recipe-name">Recipe name</label>
      <input id="recipe-name" name="recipe-name" required>

      <label for="recipe-description">Description</label>
      <textarea id="recipe-description" name="recipe-description" required></textarea>

      <button type="submit">Add recipe</button>
    </form>
    <ul id="recipe-list" aria-live="polite"></ul>
  </main>
</body>
</html>

Open style.css, add the following CSS, and save the file.

:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
}

body {
  margin: 0;
  padding: 2rem;
}

main {
  max-width: 40rem;
  margin: 0 auto;
}

form {
  display: grid;
  gap: 0.75rem;
}

input,
textarea,
button {
  font: inherit;
  padding: 0.6rem;
}

li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-block: 1rem;
}

Open app.js, add the following JavaScript, and save the file.

const form = document.querySelector('#recipe-form');
const nameInput = document.querySelector('#recipe-name');
const descriptionInput = document.querySelector('#recipe-description');
const recipeList = document.querySelector('#recipe-list');

function addRecipe(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const description = descriptionInput.value.trim();

  if (!name || !description) {
    const emptyInput = !name ? nameInput : descriptionInput;
    emptyInput.setCustomValidity('Enter at least one non-space character.');
    emptyInput.reportValidity();
    emptyInput.addEventListener('input', () => emptyInput.setCustomValidity(''), {
      once: true
    });
    return;
  }

  const item = document.createElement('li');
  const recipeText = document.createElement('span');
  recipeText.textContent = `${name}: ${description}`;

  const deleteButton = document.createElement('button');
  deleteButton.type = 'button';
  deleteButton.textContent = 'Delete';
  deleteButton.setAttribute('aria-label', `Delete ${name}`);
  deleteButton.addEventListener('click', () => item.remove());

  item.append(recipeText, deleteButton);
  recipeList.append(item);
  form.reset();
  nameInput.focus();
}

form.addEventListener('submit', addRecipe);

You now have a complete app in plain local files. The textContent property displays recipe input as text instead of interpreting it as HTML.

Preview the app in the integrated browser

The built-in integrated browser opens local HTML files directly in VS Code. You don't need an extension, development server, or external browser to preview this app.

In the Explorer view, right-click index.html, and then select Open in Integrated Browser.

The app opens in an integrated browser tab.
Check the app manually:
- Add a recipe with a name and description, and confirm that it appears in the list.
- Select Delete, and confirm that the recipe disappears.
- Try to submit an empty field, and confirm that the browser asks you to complete it.
- Enter only spaces in a field, and confirm that the browser asks for a non-space character.
- Enter <b>Soup</b> as a recipe name, and confirm that the app displays the characters as text rather than formatting them as HTML.
In index.html, change My recipes to Favorite recipes, and then save the file.

Check that the browser shows the new heading. If it hasn't reloaded automatically, select Reload in the browser toolbar. This small edit demonstrates the edit, save, and review cycle you use throughout VS Code.

Explore extensions (optional)

Extensions add languages, debuggers, and other tools to VS Code. You don't need to install any extensions for this sample, but you can explore tools for other projects:

Select the Extensions view in the Activity Bar.
Search for a language or tool, and then select an extension to read its features and requirements.

Learn more about finding and managing extensions.

Configure VS Code settings

You can customize VS Code in the Settings editor or by editing the settings.json file.

Open the Settings editor with ⌘, (Windows, Linux Ctrl+,). You can also select File > Preferences > Settings.
Use the search box to find Auto Save, and then choose a value from the dropdown.

VS Code applies setting changes immediately. When you next modify a workspace file, the selected Auto Save behavior applies.
Select the gear icon next to the setting, and then select Reset Setting to restore its default value.

Tip
Enter @modified in the search box or select the Modified filter to find changed settings.
Use the User and Workspace tabs to switch between setting scopes.

User settings apply to all your workspaces. Workspace settings apply only to the current workspace and override User settings. Learn more about settings in VS Code.

Save your work with source control

Visual Studio Code includes built-in support for Git source control. Before you continue, make sure you completed the Git installation and author setup prerequisites. Git uses the configured name and email address to identify the author of the commit.

Select the Source Control view in the Activity Bar.
Select Initialize Repository to create a Git repository in the vscode101 workspace.

Because you created vscode101 outside an existing repository, this repository contains only the tutorial files.
Review the files in Changes. Hover over each file and select + to stage it.

Tip
To stage all files, hover over Changes and select Stage All Changes.
Enter Add recipe list app as the commit message, and then select Commit.

Tip
Select Graph in the Source Control view to view your repository's commit history.

Learn more about source control in VS Code.

Debug the app in the integrated browser

Attach the debugger to the integrated browser tab you used to preview the app. The Run and Debug view doesn't create this configuration automatically, so first add a launch configuration to your workspace.

In the Explorer view, create a folder named .vscode. Inside that folder, create a file named launch.json.

Add the following configuration to .vscode/launch.json, and then save the file.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "editor-browser",
      "request": "attach",
      "name": "Debug recipe app"
    }
  ]
}

Return to the integrated browser tab that contains your recipe app. If you closed it, right-click index.html in the Explorer view and select Open in Integrated Browser to reopen it.
Open app.js. In the addRecipe function, place the cursor on the following line, and then press F9 to set a breakpoint.
```
if (!name || !description) {
```
A red dot appears in the editor margin.
Start debugging with F5.

If a picker appears, select Debug recipe app, and then select the integrated browser tab that contains your recipe app.
In the integrated browser, enter a recipe name and description, and then select Add recipe.

Execution pauses at the breakpoint in addRecipe.
Hover over name and description in app.js to inspect their values. You can also inspect them in the Variables section of the Run and Debug view.
Press F10 to step over the current line. Use the Debug toolbar to step through more statements, and then select Continue.
Confirm in the integrated browser that the new recipe appears. Select Stop on the Debug toolbar to end the debugging session.

Learn more about debugging in VS Code.

Explore AI-assisted development (optional)

AI isn't required for this tutorial. If you choose to use AI later, both the Chat view and the Agents window can run agents. Use the Chat view to collaborate with an agent in your current workspace, or use the Agents window to orchestrate agent sessions across multiple projects.

Next steps

You created, edited, previewed, versioned, and debugged a local web app. Continue learning manual editor workflows:

10/14/2026