Training Example: Visual Studio Code – Review the Data, Give Your Score & Compare to the Real AI Evaluation

[H1] The open source AI code editor
Your home for multi-agent development

Download for macOS

Download for Windows

Download for Linux (.deb)

Download for Linux (.rpm)

Download Visual Studio Code

Web, Insiders edition,
or other platforms

By using VS Code, you agree to its license and privacy statement.

MailList.tsx

import {
For,
Show,
createMemo,
createSignal,
onCleanup,
onMount,
} from "solid-js";
import { useMail } from "./mail";
import { Item } from "./Item";
const ROW = 56;
const PAGE = 24;
export function MailList() {
const { items, query, load } =
useMail();
const [focus, setFocus] =
createSignal(0);
const [top, setTop] =
createSignal(0);
const visible = createMemo(() => {
const q = query().toLowerCase();
return items()
.filter((m) =>
m.subject
.toLowerCase()
.includes(q),
)
.slice(top(), top() + PAGE);
});
const onKey = (e: KeyboardEvent) => {
if (e.key === "ArrowDown") {
setFocus((i) =>
Math.min(i + 1, PAGE - 1),
);
} else if (e.key === "ArrowUp") {
setFocus((i) =>
Math.max(i - 1, 0),
);
} else if (e.key === "Enter") {
open(visible()[focus()].id);
}
};
onMount(() => {
load();
window.

[H1] Download Visual Studio Code

Free and built on open source. Integrated Git, debugging and extensions.

[IMG: Download VS Code]

[IMG: Download VS Code]
Windows
Windows 10, 11

User Installer
x64
Arm64

System Installer
x64
Arm64

.zip
x64
Arm64

CLI
x64
Arm64

[IMG: Download VS Code]

[IMG: Download VS Code]
.deb
Debian, Ubuntu

[IMG: Download VS Code]

[IMG: Download VS Code]
.rpm
Red Hat, Fedora, SUSE

.deb
x64
Arm32
Arm64

.rpm
x64
Arm32
Arm64

.tar.gz
x64
Arm32
Arm64

Snap
Snap Store

CLI
x64
Arm32
Arm64

[IMG: Download VS Code]

[IMG: Download VS Code]
Mac
macOS 12.0+

.dmg
Intel chip
Apple silicon
Universal

CLI
Intel chip
Apple silicon

By downloading and using Visual Studio Code, you agree to the license terms and privacy
statement.

[H2] Want new features sooner?

Get the Insiders build instead.

[H2] Use vscode.dev for quick edits online!

GitHub, Azure Repos, and local files.

Get previous versions

[H1] Themes
[H2] Color Themes
Color themes enable you to modify the colors in the Visual Studio Code user interface to match your preferences and work environment. A Color Theme affects both the VS Code user interface elements and the editor highlighting colors.
[IMG: Preview themes from the Command Palette]
To select a different Color Theme:
Select the File > Preferences > Theme > Color Theme menu item, or use the Preferences: Color Theme command (⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)) to display the Color Theme picker.
Use the Up and Down keys to navigate through the list and preview the colors of the theme.
Select the theme you want and press Enter.
The active color theme is stored in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+,)).
// Specifies the color theme used in the workbench.
"workbench.colorTheme": "Solarized Dark"

Tip
By default, the theme is stored in your user settings and applies globally to all workspaces. You can also configure a workspace-specific theme. To do so, set a theme in the Workspace settings.
[IMG: Screenshot of Settings editor to set a workspace-specific Color Theme.]
[H2] Color Themes from the Marketplace
There are several out-of-the-box color themes in VS Code for you to try. Many more themes have been uploaded to the VS Code Extension Marketplace by the community.
You can select Color Themes from the VS Code Marketplace directly from the Color Theme picker by selecting Browse Additional Color Themes....
[IMG: Screenshot of Color Theme picker, highlighting the option to browse themes from the VS Code Marketplace.]
Alternately, you can search for themes in the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)) search box by using the @category:"themes" filter.
[IMG: Searching for themes in the Extensions view]
[H2] Automatically switch based on OS color scheme
Windows and macOS support light and dark color schemes. There is a setting,

window.autoDetectColorScheme

Open in VS Code
Open in VS Code Insiders
, that instructs VS Code to listen to changes to the OS's color scheme and switch to a matching theme accordingly.
Similarly, you can use the

window.autoDetectHighContrast

Open in VS Code
Open in VS Code Insiders
setting to automatically detect if the OS switched to a high-contrast color scheme.
To customize the themes that are used when a color scheme changes, you can set the preferred light, dark, and high contrast themes in the Settings editor:
Workbench: Preferred Dark Color Theme - defaults to Dark Modern
Workbench: Preferred Light Color Theme - defaults to Light Modern
Workbench: Preferred High Contrast Color Theme - defaults to Dark High Contrast
Workbench: Preferred High Contrast Light Color Theme - defaults to Light High Contrast
[IMG: Settings editor filtered on the preferred color themes settings]
[H2] Customize a Color Theme
[H3] Workbench colors
You can customize your active color theme with the

workbench.colorCustomizations

Open in VS Code
Open in VS Code Insiders
and

editor.tokenColorCustomizations

Open in VS Code
Open in VS Code Insiders
user settings.
To set the colors of VS Code UI elements such as list & trees (File Explorer, suggestions widget), diff editor, Activity Bar, notifications, scroll bar, split view, buttons, and more, use

workbench.colorCustomizations

Open in VS Code
Open in VS Code Insiders
.
[IMG: activity bar theming]
You can use IntelliSense while setting

workbench.colorCustomizations

Open in VS Code
Open in VS Code Insiders
values or, for a list of all customizable colors, see the Theme Color Reference.
To make customizations to a specific theme, use the following syntax:
"workbench.colorCustomizations": {
"[Monokai]": {
"sideBar.background": "#347890"
}
}
If a customization applies to more than one theme, you can name multiple themes or use * as a wildcard at the beginning and end of the name:
"workbench.colorCustomizations": {
"[Abyss][Red]": {
"activityBar.background": "#ff0000"
},
"[Monokai*]": {
"activityBar.background": "#ff0000"
}
}
If a theme sets a color or border that you don't like, you can use default to set it back to the original value:
"workbench.colorCustomizations": {
"diffEditor.removedTextBorder": "default"
}
[H3] Editor syntax highlighting
To tune the editor's syntax highlighting colors, use

editor.tokenColorCustomizations

Open in VS Code
Open in VS Code Insiders
in your user settings settings.json file:
[IMG: Token Color Customization]
A preconfigured set of syntax tokens ('comments', 'strings', ...) is available for the most common constructs. If you want more, you can do so by directly specifying TextMate theme color rules:
[IMG: Advanced Token Color Customization]

Note
Directly configuring TextMate rules is an advanced skill, as you need to understand how TextMate grammars work. Go to the Color Theme guide for more information.
To customize specific themes, you can do this in one of the following ways:
"editor.tokenColorCustomizations": {
"[Monokai]": {
"comments": "#229977"
},
"[*Dark*]": {
"variables": "#229977"
},
"[Abyss][Red]": {
"keywords": "#f00"
}
}
[H3] Editor semantic highlighting
Some languages (currently: TypeScript, JavaScript, Java) provide semantic tokens. Semantic tokens are based on the language service's symbol understanding and are more accurate than the syntax tokens coming from the TextMate grammars that are driven by regular expressions. The semantic highlighting that is computed from the semantic tokens goes on top of syntax highlighting and can correct and enrich the highlighting as seen in the following example:
The "Tomorrow Night Blue" color theme without semantic highlighting:
[IMG: without semantic highlighting]
The "Tomorrow Night Blue" color theme with semantic highlighting:
[IMG: with semantic highlighting]
Notice the color differences based on language service symbol understanding:
line 10: languageModes is colored as a parameter.
line 11: Range and Position are colored as classes and document as a parameter.
line 13: getFoldingRanges is colored as a function.
The settings

editor.semanticHighlighting.enabled

Open in VS Code
Open in VS Code Insiders
serves as the main control on whether semantic highlighting is applied. It can have values true, false, and configuredByTheme.
true and false turn semantic highlighting on or off for all themes.
configuredByTheme is the default and lets each theme control whether semantic highlighting is enabled or not. All the themes that ship with VS Code (for example, the "Dark+" default) have semantic highlighting enabled by default.
You can override the theme setting by:
"editor.semanticTokenColorCustomizations": {
"[Rouge]": {
"enabled": true
}
}
When semantic highlighting is enabled and available for a language, it is up to the theme to configure whether and how semantic tokens are colored. Some semantic tokens are standardized and map to well-established TextMate scopes. If the theme has a coloring rule for these TextMate scopes, the semantic tokens are rendered with that color, without the need for any additional coloring rules.
Additional styling rules can be configured in editor.semanticTokenColorCustomizations":
"editor.semanticTokenColorCustomizations": {
"[Rouge]": {
"enabled": true,
"rules": {
"*.declaration": { "bold": true }
}
}
}
To see what semantic tokens are computed and how they are styled, you can use the scope inspector (Developer: Inspect Editor Tokens and Scopes), which displays information for the text at the current cursor position.
[IMG: scope inspector]
If semantic tokens are available for the language at the given position and enabled by theme, the inspect tool shows a section semantic token type. The section shows the semantic token information (type and any number of modifiers) and the styling rules that apply.
More information on semantic tokens and styling rule syntax can be found in the Semantic Highlighting Guide.
[H2] Create your own Color Theme
Creating and publishing a theme extension is easy. Customize your colors in your user settings then generate a theme definition file with the Developer: Generate Color Theme From Current Settings command.
VS Code's Yeoman extension generator helps you generate the rest of the extension.
See the Create a new Color Theme article in our Extension API section to learn more.
[H2] Remove default Color Themes
If you'd like to remove some of the default themes shipped with VS Code from the Color Theme picker, you can disable them from the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)). Select the Filter Extensions button from the top of the Extensions view, select the Built-in option, and you see a THEMES section that lists the default themes.
[IMG: built-in themes]
You can disable a built-in theme extension, as you would any other VS Code extension with the Disable command on the gear context menu.
[IMG: disable theme]
[H2] File Icon Themes
File icons indicate a particular file type. These icons are shown alongside the file name in the Explorer view and in tabbed headings. File Icon Themes can be contributed by extensions.
To select a different File Icon Theme:
Select the File > Preferences > Theme > File Icon Theme menu item, or use the Preferences: File Icon Theme command to display the File Icon Theme picker.
Use the Up and Down keys to navigate through the list and preview the icons of the theme.
Select the theme you want and press Enter.
[IMG: file icon theme dropdown]
By default, the Seti File Icon Theme is used and those are the icons you see in the Explorer view. VS Code remembers your File Icon Theme selection across restarts. You can disable file icons by selecting None.
VS Code ships with two file icon themes: Minimal and Seti. To install more File Icon Themes, select the Install Additional File Icon Themes item in the File Icon Theme picker, which opens the Extensions view, filtered by icon themes.
You can also browse the VS Code Marketplace site directly to find available themes.
The active File Icon Theme is persisted in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+,)).
// Specifies the file icon theme used in the workbench.
"workbench.iconTheme": "vs-seti"
[H2] Create your own File Icon Theme
You can create your own File Icon Theme from icons (preferably SVG), see the File Icon Theme article in our Extension API section for details.
[H2] VS Code for the Web
VS Code for the Web provides a free, zero-install VS Code experience running entirely in your browser at https://vscode.dev.
You can share and experience color themes through VS Code for the Web through the URL schema: https://vscode.dev/editor/theme/<extensionId>.
For instance, you can go to https://vscode.dev/editor/theme/sdras.night-owl to experience the Night Owl theme without having to go through the download and install process.
You can learn more about previewing and sharing themes with in the VS Code for the Web documentation.
[H2] Product Icon Themes
Product Icon Themes enable you to change the icons in the VS Code user interface, other than the icons for specific file types. For example, you can modify the icons for the views in the Activity Bar, or the icons in the title bar for changing the layout.
Notice in the following image how the Activity Bar icons are updated when selecting a different Product Icon Theme.
[IMG: Screenshot of the Product Icon Theme dropdown, and how the Activity Bar icons are changed.]
To select a different Product Icon Theme:
Select the File > Preferences > Theme > Product Icon Theme menu item, or use the Preferences: Product Icon Theme command to display the Product Icon Theme picker.
Use the Up and Down keys to navigate through the list and preview the icons of the theme.
Select the theme you want and press Enter.
By default, VS Code comes with one Product Icon Theme, Default. You can select more Product Icon Themes from the VS Code Marketplace directly from the Product Icon Theme picker by selecting Browse Additional Product Icon Themes....
[H2] Next steps
Themes are just one way to customize VS Code. If you'd like to learn more about VS Code customization and extensibility, try these articles:
Settings - Learn how to configure VS Code to your preferences through user and workspace settings.
Snippets - Add extra snippets to your favorite language.
Extension API - Learn about other ways to extend VS Code.
Color Theme - Color Theme extension API.
File Icon Theme - File Icon Theme extension API.

[H1] Source Control in VS Code
Visual Studio Code has integrated source control management (SCM) that lets you work with Git and other version control systems directly in your editor. Git support is built-in, and you can install extensions for other SCM providers from the Visual Studio Marketplace.
The integrated source control interface provides access to Git functionality through a graphical interface instead of terminal commands. You can perform Git operations like staging changes, committing files, creating branches, and resolving merge conflicts without switching to the command line.
Changes you make in the VS Code interface are synced with your command-line Git operations, so you can use both the UI and terminal as needed. The source control interface works alongside the command line rather than replacing it.
[H2] Prerequisites
To use Git features in VS Code, you need:
VS Code uses your machine's Git installation. Install Git version 2.0.0 or later on your machine.
When you commit changes, Git uses your configured username and email. You can set these values with:
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Tip
If you're new to Git, the git-scm website is a good place to start, with a popular online book, Getting Started videos and cheat sheets.
[H2] Get started with a repository
VS Code automatically detects when you open a folder that's a Git repository and activates all source control features. To get started with a new or existing repository, you have several options:
Initialize a new repository: Create a new Git repository for your current folder.
Clone a repository: Clone an existing repository from GitHub or another Git host.
Open a remote repository: Work with a repository without cloning it to your local machine with the GitHub Repositories extension.

Tip
You can publish a local repository directly to GitHub with the Publish to GitHub command, which creates a new repository and pushes your commits in one step.
Learn more about cloning and publishing repositories.
[H2] Source control interface
VS Code provides Git functionality through several key interface elements. This UI integration enables you to perform Git operations without knowing terminal commands:
Source Control view: central hub for common Git operations like staging, committing, and managing changes
[IMG: Screenshot of the Source Control view showing staged changes, and the diff editor showing side-by-side changes.]
Source Control Graph: graphical representation of your commit history and branch relationships
[IMG: Screenshot of the Source control graph showing commit history.]
Diff editor: side-by-side file comparisons for effective change review
[IMG: Screenshot of the diff editor showing changes between file versions.]
Additional UI elements: in-context Git information like editor gutter indicators or Git blame annotations
[IMG: Screenshot of editor gutter indicators showing line changes and a hover showing Git blame information.]
[H2] Common workflows
[H3] Review changes before committing
Before committing changes, it's important to review them to ensure accuracy and quality. Use VS Code's AI features to perform a code review of your changes and get review comments and suggestions in the editor.
[IMG: Screenshot of the code review results, showing as editor overlay comments.]
[H3] Stage and commit changes
Review your changes in the Source Control view, then stage files by selecting the + icon next to each file or stage all changes at once. For more fine-grained control, stage specific lines or selections from a file's diff view.
[IMG: Screenshot of staging changes in the Source Control view.]
Type your commit message in the input box or select the sparkle icon () in the commit message input box to use AI to generate a commit message based on your staged changes.
[IMG: Screenshot of generating a commit message with Copilot.]
Learn more about staging changes and writing commits.
[H3] Sync with remotes
When your branch is connected to a remote branch, VS Code shows sync status in the Status Bar and shows incoming and outgoing commits in the Source Control view. You can quickly sync or perform individual fetch, pull, and push operations.
[IMG: Screenshot of the Source Control view showing the sync button indicating outgoing and incoming changes.]
Learn more about working with repositories and remotes.
[H3] Resolve merge conflicts
When you encounter merge conflicts, VS Code highlights the conflicting files in the Source Control view. Open a file with conflicts to see inline conflict markers. You have several options to resolve the conflicts:
Use inline editor actions to choose how to resolve the conflicts directly in the editor
Use the 3-way merge editor for a side-by-side view of changes and merge result
Use AI assistance to help resolve merge conflicts
[IMG: Screenshot of the 3-way merge editor.]
Learn more about resolving merge conflicts.
[H3] Work with branches, worktrees, and stashes
VS Code supports multiple workflows for managing parallel development work.
Quickly switch between branches within a single workspace to work on different features or fixes.
[IMG: Screenshot of the branch Quick Pick showing options to switch to a branch or create a new branch.]
Use Git worktrees to create separate working directories for different branches to work with multiple branches simultaneously.
Use Git stashes to temporarily save uncommitted changes when you need to switch contexts quickly.
Learn more about working with branches and worktrees.
[H3] View commit history
It can be helpful to review the commit history to understand how your code has changed over time.
The Source Control Graph provides a visual representation of your branch structure and commit history, highlighting incoming and outgoing commits.
[IMG: Screenshot of the Source Control Graph showing commit history and branch structure.]
The Timeline view in the Explorer view shows the commit history for a specific file, allowing you to see how it has evolved. You can filter the timeline to show only Git commits or to also include local file changes.
[IMG: Screenshot of the timeline view showing file commit history.]
Learn more about using the Graph and Timeline view and reviewing changes.
[H2] Working with GitHub pull requests and issues
VS Code integrates with GitHub to provide pull request and issue management directly in your editor. Install the GitHub Pull Requests and Issues extension to:
Create, review, and merge pull requests
View and manage issues
Comment on and approve PRs without leaving VS Code
Check out PR branches and review changes locally
Learn more about working with GitHub in VS Code.
[H2] Other source control providers
VS Code supports multiple source control providers. While Git support is built-in, you can install extensions for other version control systems like Azure DevOps, Subversion, or Mercurial.
Browse available SCM provider extensions in the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)) by searching for @category:"scm providers".
[H2] Next steps
Source Control Quickstart - Quickly get started with Git source control in VS Code
Intro Video - Git Version Control - An introductory video providing an overview of VS Code Git support
Branches and Worktrees - Learn about branch management, Git worktrees, and stash operations
Repositories and Remotes - Learn about cloning, publishing, and syncing with remote repositories
Working with GitHub - Learn how to work with pull requests and issues in VS Code
Troubleshooting - Diagnose and resolve Git issues with output logs and trace logging
Copilot in VS Code - Discover more AI-powered features beyond Git workflows