vscode-docs Documentation

1. Project Overview & Quickstart (microsoft/vscode-docs) Copy Chapter

File: README.md Copy Chapter

You've found the Visual Studio Code documentation GitHub repository, which contains the content for the Visual Studio Code documentation.

Topics submitted here will be published to the Visual Studio Code portal.

If you are looking for the VS Code product GitHub repository, you can find it here.

[!IMPORTANT]
The vscode-docs repository uses Git LFS (Large File Storage) for storing binary files such as images and .gifs. If you are contributing or updating images, please enable Git LFS per the instructions in the Contributing section below.

Index Copy Chapter

• Index
• Visual Studio Code
• Feedback
• Documentation Issues
• Contributing
  • Workflow
  • Cloning
    • Cloning without binary files
• Publishing

Visual Studio Code Copy Chapter

VS Code is a lightweight AI code editor for multi-agent development and a powerful development environment for building modern web, mobile, and cloud applications. It is free and available on your favorite platform - Linux, macOS, and Windows.

If you landed here looking for other information about VS Code, head over to our website for additional information.

Feedback Copy Chapter

If you want to give documentation feedback, please use the feedback control located at the bottom of each documentation page.

Documentation Issues Copy Chapter

To enter documentation bugs, please create a new GitHub issue. Please check if there is an existing issue first.

If you think the issue is with the VS Code product itself, please enter issues in the VS Code product repo.

Contributing Copy Chapter

To contribute new topics/information or make changes to existing documentation, please read the Contributing Guideline.

Workflow Copy Section

The two suggested workflows are:

• For small changes, use the Edit button on each page to edit the Markdown file directly on GitHub.

• If you plan to make significant changes or preview the Markdown files in VS Code, clone the repo to edit and preview the files directly in VS Code.

Cloning Copy Section

1. Install Git LFS.
2. Run git lfs install to set up global Git hooks. You only need to run this once per machine.
3. SSH auth: git clone [email protected]:microsoft/vscode-docs.gitHTTPS auth: git clone https://github.com/microsoft/vscode-docs.git
4. Now you can git add binary files and commit them. They'll be tracked in LFS.

Cloning without binary files

You might want to clone the repo without the 1.6GB images. Here are the steps:

1. Install Git LFS.
2. Run git lfs install to set up global Git hooks. You only need to run this once per machine.
3. Clone the repo without binary files.
   • macOS / Linux:
     • SSH auth: GIT_LFS_SKIP_SMUDGE=1 git clone [email protected]:microsoft/vscode-docs.git
     • HTTPS auth: GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/microsoft/vscode-docs.git
   • Windows:
     • SSH auth: $env:GIT_LFS_SKIP_SMUDGE="1"; git clone [email protected]:microsoft/vscode-docs.git
     • HTTPS auth: $env:GIT_LFS_SKIP_SMUDGE="1"; git clone https://github.com/microsoft/vscode-docs.git
4. Now you can selectively check out some binary files to work with. For example:
   • git lfs pull -I "docs/nodejs" to only download images in docs/nodejs
   • git lfs pull -I "release-notes/images/1_4*/*" to only download images in release-notes/images/1_4*
   • git lfs pull -I "docs,api" to download all images in docs and in api
   • git lfs pull -I , as long as `` is a valid Git LFS Include and Exclude pattern.

The history of this repo before we adopted LFS can be found at microsoft/vscode-docs-archive.

Preview the website Copy Section

You can host a lightweight documentation website locally on your machine to preview your changes before pushing them to GitHub.

Run the following commands in the terminal from the root of the cloned vscode-docs repo:

npm install
npm run serve

You can then navigate to http://localhost:3000 in your browser to see the documentation website. Any changes you make to the Markdown files will automatically refresh the page so you can see your updates in real time.

Publishing Copy Chapter

Publishing merged pull requests is not automatic and is initiated manually after changes have been reviewed on an internal staging server. There is no specific time guarantee for when PR updates will be available on https://code.visualstudio.com but the intent is that they will usually be live within 24 hours.

File: docs/languages/cpp.md Copy Chapter

ContentId: D06C8C5C-2D3A-4B2E-B31F-12F1907E6402 DateApproved: 8/19/2026 MetaDescription: Find out how to get the best out of Visual Studio Code and C++. MetaSocialImage: images/cpp/languages-cpp-social.png Copy Chapter

C/C++ for Visual Studio Code

C/C++ support for Visual Studio Code is provided by a Microsoft C/C++ extension to enable cross-platform C and C++ development on Windows, Linux, and macOS. When you create a *.cpp file, the extension adds features such as syntax highlighting (colorization), smart completions and hovers (IntelliSense), and error checking.

Install the extension Copy Chapter

1. Open VS Code.
2. Select the Extensions view icon on the Activity Bar or use the keyboard shortcut (kb(workbench.view.extensions)).
3. Search for 'C++'.
4. Select Install.

Set up your C++ Environment Copy Chapter

C++ is a compiled language meaning your program's source code must be translated (compiled) before it can be run on your computer. The C/C++ extension doesn't include a C++ compiler or debugger, since VS Code as an editor relies on command-line tools for the development workflow. You need to install these tools or use the tools already installed on your computer.

Check if you have a compiler installed Copy Section

Note: There may already be a C++ compiler and debugger provided by your academic or work development environment. Check with your instructors or colleagues for guidance on installing the recommended C++ toolset (compiler, debugger, project system, linter).

Common compilers that already come preinstalled on some platforms are the GNU Compiler Collection (GCC) on Linux and the Clang tools with Xcode on macOS.

To check if you already have them installed:

1. Open a new VS Code terminal window using (kb(workbench.action.terminal.new))

2. Use the following command to check for the GCC compiler g++:

   bash Copy

   g++ --version

   Or this command for the Clang compiler clang:

   bash Copy

   clang --version

The output should show you the compiler version and details. If neither are found, make sure your compiler executable is in your platform path (%PATH on Windows, $PATH on Linux and macOS) so that the C/C++ extension can find it. Otherwise, use the instructions in the section below to install a compiler.

Install a compiler Copy Section

If you don't have a compiler installed, you can follow one of our installation tutorials:

Windows:

Go to the MSVC tutorial

Go to the MinGW tutorial

Linux:

Go to the GCC tutorial

macOS:

Go to the Clang tutorial

Note: If you would prefer a full Integrated Development Environment (IDE), with built-in compilation, debugging, and project templates (File > New Project), there are many options available, such as the Visual Studio Community edition.

Example: Install MinGW-x64 on Windows Copy Chapter

To understand the process, let's install Mingw-w64 via MSYS2. Mingw-w64 is a popular, free toolset on Windows. It provides up-to-date native builds of GCC, Mingw-w64, and other helpful C++ tools and libraries.

1. Download using this direct link to the MinGW installer.

2. Run the installer and follow the steps of the installation wizard. Note, MSYS2 requires 64 bit Windows 8.1 or newer.

3. In the wizard, choose your desired Installation Folder. Record this directory for later. In most cases, the recommended directory is acceptable. The same applies when you get to setting the start menu shortcuts step. When complete, ensure the Run MSYS2 now box is checked and select Finish. A MSYS2 terminal window will then automatically open.

4. In this terminal, install the MinGW-w64 toolchain by running the following command:

   sh Copy

   pacman -S --needed base-devel mingw-w64-ucrt-x86_64-toolchain

5. A list of available packages will be displayed

6. Accept the default number of packages in the toolchain group by pressing kbstyle(Enter).

7. Enter Y when prompted whether to proceed with the installation.

8. Add the path of your MinGW-w64 bin folder to the Windows PATH environment variable by using the following steps:

   1. In the Windows search bar, type Settings to open your Windows Settings.
   2. Search for Edit environment variables for your account.
   3. In your User variables, select the Path variable and then select Edit.
   4. Select New and add the MinGW-w64 destination folder you recorded during the installation process to the list. If you selected the default installation steps, the path is: C:\msys64\ucrt64\bin.
   5. Select OK, and then select OK again in the Environment Variables window to update the PATH environment variable.
      You have to reopen any console windows for the updated PATH environment variable to be available.

9. Check that your MinGW-w64 tools are correctly installed and available, open a new Command Prompt and type:

   bash Copy

   gcc --version
   g++ --version
   gdb --version

   You should see output that states which versions of GCC, g++ and GDB you have installed. If this is not the case, make sure your PATH entry matches the Mingw-w64 binary location where the compiler tools are located or reference the troubleshooting section.

Create a Hello World App Copy Chapter

To make sure the compiler is installed and configured correctly, lets create a Hello World C++ program.

Create a C++ file Copy Section

1. On Windows, launch a Windows command prompt (Enter Windows command prompt in the Windows search bar). On macOS and Linux, you can enter these commands in the terminal.

2. Run the following commands. They are creating an empty folder called projects where you can place all your VS Code projects. The next commands create and navigate you to a subfolder called helloworld. From there, you are opening helloworld directly in VS Code using the code command.

   bat Copy

   mkdir projects
   cd projects
   mkdir helloworld
   cd helloworld
   code .

   The "code ." command opens VS Code in the current working folder, which becomes your "workspace". Accept the Workspace Trust dialog by selecting Yes, I trust the authors since this is a folder you created.

3. Now, create a new file called helloworld.cpp with the New File button in the File Explorer or File > New File command.

Add Hello World source code Copy Section

Paste in the following source code:

#include 

int main()
{
    std::cout << "Hello World" << std::endl;
}

Now press kb(workbench.action.files.save) to save the file. You can also enable AutoSave to automatically save your file changes, by checking Auto Save in the main File menu.

Run helloworld.cpp Copy Chapter

1. Make sure you have helloworld.cpp open so it is the active file in your editor.

2. Press the play button in the top right corner of the editor.

3. Choose C/C++: g++.exe build and debug active file from the list of detected compilers on your system.

   You are only prompted to choose a compiler the first time you run helloworld.cpp. This compiler becomes "default" compiler set in your tasks.json file.

4. After the build succeeds, you should see "Hello World" appear in the integrated Terminal.

Congratulations! You've just run your first C++ program in VS Code! The next step is to learn more about the Microsoft C/C++ extension's language features such as IntelliSense, code navigation, build configuration, and debugging using one of the Tutorials in the next section.

Tutorials Copy Chapter

Get started with C++ and VS Code with tutorials for your environment:

• GCC on Windows via MinGW
• Microsoft C++ on Windows
• GCC on Linux
• GCC on Windows Subsystem For Linux
• Clang/LLVM on macOS
• CMake Tools on Linux

Documentation Copy Chapter

You can find more documentation on using the Microsoft C/C++ extension under the C++ section of the VS Code website, where you can find articles on:

• Debugging
• Editing
• Settings
• FAQ

Remote Development Copy Chapter

VS Code and the C++ extension support Remote Development allowing you to work over SSH on a remote machine or VM, inside a Docker container, or in the Windows Subsystem for Linux (WSL).

To install support for Remote Development:

1. Install the VS Code Remote Development Extension Pack.
2. If the remote source files are hosted in WSL, use the WSL extension.
3. If you are connecting to a remote machine with SSH, use the Remote - SSH extension.
4. If the remote source files are hosted in a container (for example, Docker), use the Dev Containers extension.

Enhance completions with AI Copy Chapter

GitHub Copilot provides coding suggestions as you type in your editor. You can also ask Copilot coding-related questions, such as how best to code something, how to fix a bug, or how someone else's code works.

Learn how to get started with AI in VS Code.

Feedback Copy Chapter

If you run into any issues or have suggestions for the Microsoft C/C++ extension, please file issues and suggestions on GitHub. If you haven't already provided feedback, you can take this quick survey.

File: docs/languages/csharp.md Copy Chapter

ContentId: 40C8AAC1-C00D-4E91-8877-737A598346B6 DateApproved: 8/19/2026 MetaDescription: Find out how to get the best out of Visual Studio Code and C#. MetaSocialImage: images/csharp/languages-csharp-social.png Copy Chapter

Working with C#

The C# support in Visual Studio Code is optimized for cross-platform .NET development (see working with .NET and VS Code for another relevant article). Our focus with VS Code is to be a great editor for cross-platform C# development by providing a rich C# editing experience, AI-powered development, solution management, and integrated testing experiences

VS Code supports debugging of C# applications running on either .NET or Mono.

For detailed instructions on:

• .NET debugging - see the C# Dev Kit debugging documentation.
• Mono debugging - see the Mono Debug extension's README.

Installing C# support Copy Chapter

C# language support is provided with the C# Dev Kit extension. You can install it from within VS Code by searching for 'C# Dev Kit' in the Extensions view (kb(workbench.view.extensions)) or if you already have a project with C# files, VS Code will prompt you to install the extension as soon as you open a C# file.

For more information about the C# Dev Kit extension, see the C# documentation.

C# Dev Kit Copy Chapter

Visual Studio Code uses the power of Roslyn and C# Dev Kit to offer an enhanced C# experience. We offer support for:

• .NET projects
• MSBuild projects
• C# scripts (CSX)

Supported .NET project types include:

• ASP.NET Core App
• ASP.NET Core Web API
• ASP.NET Core MVC Web App
• Blazor Web App
• Blazor Server App
• Blazor WebAssembly App
• Console App

And more.

To find a full list of supported project types within VS Code, open the Command Palette and search for .NET: New Project... This will display a full list of supported project types.

When you open a Workspace that contains .NET solution files or project files, the Solution Explorer will automatically appear. If you have a single solution file (.sln file) in the workspace, the Solution Explorer will detect that file and automatically load it after the workspace is loaded. For more information on managing your C# projects in VS Code, look at the documentation on Project Management.

Editing Evolved Copy Chapter

There is a lot to discover with C# and the editor, such as format on type, IntelliSense, the rename-refactoring, etc.

For more information on the C# Dev Kit editing features, go to the Navigate and Edit documentation. For a full description of VS Code editing features, go to the Basic Editing and Code Navigation documentation.

Here are a few highlights...

IntelliSense Copy Chapter

IntelliSense just works: hit kb(editor.action.triggerSuggest) at any time to get context specific suggestions.

Enhance completions with AI Copy Chapter

GitHub Copilot provides coding suggestions as you type in your editor. You can also ask Copilot coding-related questions, such as how best to code something, how to fix a bug, or how someone else's code works.

Learn how to get started with AI in VS Code.

Snippets for C# Copy Chapter

For information on snippets in C# Dev Kit, go to the Navigate and Edit documentation. There are also several built-in snippets included in VS Code that will come up as you type or you can press kb(editor.action.triggerSuggest) (Trigger Suggest) and we will give you a context specific list of suggestions.

Tip: You can add in your own User Defined Snippets for C#. Take a look at User Defined Snippets to find out how.

Search for Symbols Copy Chapter

There are also features outside the editor. One is the ability to search for symbols from wherever you are. Hit kb(workbench.action.showAllSymbols), start typing, and see a list of matching C# symbols. Select one and you'll be taken straight to its code location.

CodeLens Copy Chapter

Another cool feature is the ability to see the number of references to a method directly above the method. Click on the reference info to see the references in the Peek view. This reference information updates as you type.

Note: Methods defined in object, such as equals and hashCode do not get reference information due to performance reasons.

Tip: You can turn off references information displayed in CodeLens with the setting(editor.codeLens) setting.

Find References/Peek Definition Copy Chapter

You can click on the references of an object to find the locations of its use in place without losing context. This same experience works in reverse where you can Peek the definition of an object and see it inline without leaving your location. For information on Peek Definition in C# Dev Kit, go to the Navigate and Edit documentation.

Quick Fixes / Suggestions Copy Chapter

There are some basic quick fixes supported in VS Code. You will see a lightbulb and clicking on it, or pressing kb(editor.action.quickFix) provides you with a simple list of fixes/suggestions.

Testing Copy Chapter

The extension supports the following test frameworks:

• XUnit
• NUnit
• MSTest

The C# Dev Kit extension provides the following features:

• Run/Debug tests cases
• View test report
• View tests in Testing Explorer

For more information, go to our Testing documentation for C# Dev Kit.

Next steps Copy Chapter

Read on to find out about:

• C# Dev Kit documentation
• .NET Development - get up and running with cross-platform .NET
• Basic Editing - Learn about the powerful VS Code editor.
• Tasks - Use tasks to build your project and more.
• Debugging - Find out how to use the debugger with your project.
• Unity development - Learn about using VS Code with your Unity projects.

File: docs/languages/css.md Copy Chapter

ContentId: 039882CB-B5C4-46BD-A8D5-DB24A5E82706 DateApproved: 8/19/2026 MetaDescription: Find out how Visual Studio Code can support your CSS, SCSS and Less development. Copy Chapter

CSS, SCSS and Less

Visual Studio Code has built-in support for editing style sheets in CSS .css, SCSS .scss and Less .less. In addition, you can install an extension for greater functionality.

Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

IntelliSense Copy Chapter

VS Code has support for selectors, properties and values. Use kb(editor.action.triggerSuggest) to get a list of context specific options.

Proposals contain extensive documentation, including a list of browsers that support the property. To see the full description text of the selected entry, use kb(toggleSuggestionDetails).

Syntax coloring & color preview Copy Chapter

As you type, there is syntax highlighting as well as in context preview of colors.

Clicking on a color preview will launch the integrated color picker which supports configuration of hue, saturation and opacity.

Tip: You can trigger between different color modes by clicking on the color string at the top of the picker.

You can hide VS Code's color previews by setting the following setting:

"editor.colorDecorators": false

To just disable it for css, Less and SCSS, use

"[css]": {
    "editor.colorDecorators": false
}

Folding Copy Chapter

You can fold regions of source code using the folding icons on the gutter between line numbers and line start. Folding regions are available for all declarations (for example, rule declarations) and for multiline comments in the source code.

Additionally you can use the following region markers to define a folding region:
/*#region*/ and /*#endregion*/ in CSS/SCSS/Less or // #region and // #endregion In SCSS/Less.

If you prefer to switch to indentation based folding for CSS, Less and SCSS, use:

"[css]": {
    "editor.foldingStrategy": "indentation"
},

Emmet snippets Copy Chapter

Emmet abbreviation support is built into VS Code, suggestions are listed along with other suggestions and snippets in the editor auto-completion list.

Tip: See the CSS section of the Emmet cheat sheet for valid abbreviations.

VS Code also supports User Defined Snippets.

Syntax Verification & Linting Copy Chapter

There is support for CSS version <= 2.1, Sass version <= 3.2 and Less version <= 2.3.

Note: You can disable VS Code's default CSS, Sass or Less validation by setting the corresponding .validate User or Workspace setting to false.

json Copy

"css.validate": false

Go to Symbol in file Copy Chapter

You can quickly navigate to the relevant CSS symbol in the current file by pressing kb(workbench.action.gotoSymbol).

Hovers Copy Chapter

Hovering over a selector or property will provide an HTML snippet that is matched by the CSS rule.

Go to Declaration and Find References Copy Chapter

This is supported for Sass and Less variables in the same file. CSS variables per the draft standards proposal are also supported.

There is jump to definition for @import and url() links in CSS, SCSS and Less.

CSS custom data Copy Chapter

You can extend VS Code's CSS support through a declarative custom data format. By setting setting(css.customData) to a list of JSON files following the custom data format, you can enhance VS Code's understanding of new CSS properties, at-directives, pseudo-classes and pseudo-elements. VS Code will then offer language support such as completion & hover information for the provided properties, at-directives, pseudo-classes and pseudo-elements.

You can read more about using custom data in the vscode-custom-data repository.

Formatting Copy Chapter

The CSS Languages Features extension also provides a formatter. The formatter works with CSS, LESS and SCSS. It is implemented by the JS Beautify library and comes with the following settings:

• setting(css.format.enable) - Enable/disable default CSS formatter.
• setting(css.format.newlineBetweenRules) - Separate rulesets by a blank line.
• setting(css.format.newlineBetweenSelectors) - Separate selectors with a new line.
• setting(css.format.spaceAroundSelectorSeparator) - Ensure a space character around selector separators '>', '+', '~' (for example, a > b).

The same settings also exist for less and scss.

Transpiling Sass and Less into CSS Copy Chapter

VS Code can integrate with Sass and Less transpilers through our integrated task runner. We can use this to transpile .scss or .less files into .css files. Let's walk through transpiling a simple Sass/Less file.

Step 1: Install a Sass or Less transpiler Copy Section

For this walkthrough, let's use either the sass or less Node.js module.

Note: If you don't have Node.js and the npm package manager already installed, you'll need to do so for this walkthrough. Install Node.js for your platform. The Node Package Manager (npm) is included in the Node.js distribution. You'll need to open a new terminal (command prompt) for npm to be on your PATH.

npm install sass less

Step 2: Create a simple Sass or Less file Copy Section

Open VS Code on an empty folder and create a styles.scss or styles.less file. Place the following code in that file:

$padding: 6px;

nav {
  ul {
    margin: 0;
    padding: $padding;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: $padding 12px;
    text-decoration: none;
  }
}

For the Less version of the above file, just change $padding to @padding.

Note: This is a very simple example, which is why the source code is almost identical between both file types. In more advanced scenarios, the syntaxes and constructs will be much different.

Step 3: Create tasks.json Copy Section

The next step is to set up the task configuration. To do this, run Terminal > Configure Tasks and click Create tasks.json file from template. In the selection dialog that shows up, select Others.

This will create a sample tasks.json file in the workspace .vscode folder. The initial version of file has an example to run an arbitrary command. We will modify that configuration for transpiling Sass/Less instead:

// Sass configuration
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Sass Compile",
            "type": "shell",
            "command": "sass styles.scss styles.css",
            "group": "build"
        }
    ]
}

// Less configuration
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Less Compile",
            "type": "shell",
            "command": "lessc styles.less styles.css",
            "group": "build"
        }
    ]
}

Step 4: Run the Build Task Copy Section

As this is the only command in the file, you can execute it by pressing kb(workbench.action.tasks.build) (Run Build Task). The sample Sass/Less file should not have any compile problems, so by running the task all that happens is a corresponding styles.css file is created.

Since in more complex environments there can be more than one build task we prompt you to pick the task to execute after pressing kb(workbench.action.tasks.build) (Run Build Task). In addition, we allow you to scan the output for compile problems (errors and warnings). Depending on the compiler, select an appropriate entry in the list to scan the tool output for errors and warnings. If you don't want to scan the output, select Never scan the build output from the presented list.

At this point, you should see an additional file show up in the file list styles.css.

If you want to make the task the default build task to run execute Configure Default Build Task from the global Terminal menu and select the corresponding Sass or Less task from the presented list.

Note: If your build fails or you see an error message such as "An output directory must be specified when compiling a directory", be sure the filenames in your tasks.json match the filenames on disk. You can always test your build by running sass styles.scss styles.css from the command line.

Automating Sass/Less compilation Copy Chapter

Let's take things a little further and automate Sass/Less compilation with VS Code. We can do so with the same task runner integration as before, but with a few modifications.

Step 1: Install Gulp and some plug-ins Copy Section

We will use Gulp to create a task that will automate Sass/Less compilation. We will also use the gulp-sass plug-in to make things a little easier. The Less plug-in is gulp-less.

We need to install gulp both globally (-g switch) and locally:

npm install gulp
npm install gulp gulp-sass gulp-less

Note: gulp-sass and gulp-less are Gulp plug-ins for the sass and lessc modules we were using before. There are many other Gulp Sass and Less plug-ins you can use, as well as plug-ins for Grunt.

You can test that your gulp installation was successful by typing gulp -v in the terminal. You should see a version displayed for both the global (CLI) and local installations.

Step 2: Create a simple Gulp task Copy Section

Open VS Code on the same folder from before (contains styles.scss/styles.less and tasks.json under the .vscode folder), and create gulpfile.js at the root.

Place the following code in the gulpfile.js file:

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function(cb) {
    gulp.src('*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }));
    cb();
});

gulp.task('default', gulp.series('sass', function(cb) {
    gulp.watch('*.scss', gulp.series('sass'));
    cb();
}));

// Less configuration
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function(cb) {
    gulp.src('*.less')
        .pipe(less())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }));
    cb();
});

gulp.task('default', gulp.series('less', function(cb) {
    gulp.watch('*.less', gulp.series('less'));
    cb();
}));

What is happening here?

1. Our default gulp task first runs the sass or less task once when it starts up.
2. It then watches for changes to any SCSS/Less file at the root of our workspace, for example the current folder open in VS Code.
3. It takes the set of SCSS/Less files that have changed and runs them through our respective compiler, for example gulp-sass, gulp-less.
4. We now have a set of CSS files, each named respectively after their original SCSS/Less file. We then put these files in the same directory.

Step 3: Run the gulp default task Copy Section

To complete the tasks integration with VS Code, we will need to modify the task configuration from before to run the default Gulp task we just created. You can either delete the tasks.json file or empty it only keeping the "version": "2.0.0" property. Now execute Run Task from the global Terminal menu. Observe that you are presented with a picker listing the tasks defined in the gulp file. Select gulp: default to start the task. We allow you to scan the output for compile problems. Depending on the compiler, select an appropriate entry in the list to scan the tool output for errors and warnings. If you don't want to scan the output, select Never scan the build output from the presented list. At this point, if you create and/or modify Less or SASS files, you see the respective CSS files generated and/or changes reflected on save. You can also enable Auto Save to make things even more streamlined.

If you want to make the gulp: default task the default build task executed when pressing kb(workbench.action.tasks.build) run Configure Default Build Task from the global Terminal menu and select gulp: default from the presented list.

Step 4: Terminate the gulp default Task Copy Section

The gulp: default task runs in the background and watches for file changes to Sass/Less files. If you want to stop the task, you can use the Terminate Task from the global Terminal menu.

Customizing CSS, SCSS and Less Settings Copy Chapter

You can configure the following lint warnings as User and Workspace Settings.

The validate setting allows you turn off the built-in validation. You would do this if you rather use a different linter.

To configure an option for CSS, use css.lint. as the prefix to the id; for SCSS and Less, use scss.lint. and less.lint..

Set a setting to warning or error if you want to enable lint checking, use ignore to disable it. Lint checks are performed as you type.

Next steps Copy Chapter

Read on to find out about:

• Configure Tasks - Dig into Tasks to help you transpile your SCSS and Less to CSS.
• Basic Editing - Learn about the powerful VS Code editor.
• Code Navigation - Move quickly through your source code.
• HTML - CSS is just the start, HTML is also very well supported in VS Code.

Common questions Copy Chapter

Does VS Code provide a color picker? Copy Section

Yes, hover over a CSS color reference and the color picker is displayed.

Is there support for the indentation based Sass syntax (.sass)? Copy Section

No, but there are several extensions in the Marketplace supporting the indented flavor of Sass, for example, the Sass extension originally created by Robin Bentley, now maintained by Leonard Grosoli.

File: docs/languages/dotnet.md Copy Chapter

ContentId: AFFD7BDB-925E-4D02-828D-4E14360C70DA DateApproved: 8/19/2026 MetaDescription: Get started writing and debugging .NET apps with Visual Studio Code. Copy Chapter

Using .NET in Visual Studio Code

.NET provides a fast and modular platform for creating many different types of applications that run on Windows, Linux, and macOS. Use Visual Studio Code with the C# and F# extensions to get a powerful editing experience with C# IntelliSense, F# IntelliSense (smart code completion), and debugging.

Setting up VS Code for .NET development Copy Chapter

If you are an existing VS Code user, you can add .NET support by installing the C# Dev Kit extension. C# Dev Kit brings a productive and reliable C# experience into VS Code, facilitating C# or multi-language development in VS Code. This extension pack consists of a set of VS Code extensions that work together to provide a rich C# editing experience, AI-powered development, solution management, and integrated testing experiences. As shown in the graphic below, C# Dev Kit consists of:

• The C# extension, which provides the base language services support and continues to be worked on and maintained independent of this effort.
• C# Dev Kit extension, which builds on the same base foundation as Visual Studio and provides solution management, templates, test discovery/debugging.
• The IntelliCode for C# Dev Kit extension(optional), which provides the AI-powered development experience to the editor.

If your projects require F# support, you can also download the .NET Extension Pack, which includes these extensions:

• C# Dev Kit for Visual Studio Code
• Ionide for F#
• Jupyter Notebooks

You can also install extensions separately.

Installing the .NET Software Development Kit Copy Chapter

If you download the extensions separately, ensure that you also have the .NET SDK on your local environment. The .NET SDK is a software development environment used for developing .NET applications.

Install the .NET SDK

Create a C# "Hello World" app Copy Chapter

1. Initialize a C# project:

   • Open a terminal/command prompt and navigate to the folder in which you'd like to create the app.
   • Enter the following command in the command shell:
   bat Copy

   dotnet new console

2. When the project folder is first opened in VS Code:

   • A "Required assets to build and debug are missing. Add them?" notification appears at the bottom right of the window.
   • Select Yes.

3. Run the app by entering the following command in the command shell:

   bat Copy

   dotnet run

Create an F# "Hello World" app Copy Chapter

1. Initialize an F# project:

   • Open a terminal/command prompt and navigate to the folder in which you'd like to create the app.
   • Enter the following command in the command shell:
   bat Copy

   dotnet new console -lang "F#"

2. Once it completes, open the project in Visual Studio Code:

   bat Copy

   code .

3. Run the app by entering the following command in the command shell:

   bat Copy

   dotnet run

Next steps Copy Chapter

• C# Dev Kit documentation
• Continue exploring C# development: Debug with VS Code and .NET
• Basic Editing - Learn about the powerful VS Code editor.
• Code Navigation - Move quickly through your source code.
• Working with C# - Learn about the great C# support you'll have when working on your .NET application.
• Tasks - Running tasks with Gulp, Grunt, and Jake. Showing Errors and Warnings
• .NET Docs - Visit the .NET docs for more information on this powerful cross-platform development solution.
• Deploying Applications to Azure - Deploy your app to Azure.
• Get Started with F# in Visual Studio Code

File: docs/languages/emmet.md Copy Chapter

ContentId: baf4717c-ea52-486e-9ea3-7bf1c4134dad DateApproved: 8/19/2026 MetaDescription: Using Emmet abbreviations inside Visual Studio Code. Copy Chapter

Emmet in Visual Studio Code

Support for Emmet snippets and expansion is built right into Visual Studio Code, no extension required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.

How to expand Emmet abbreviations and snippets Copy Chapter

Emmet abbreviation and snippet expansions are enabled by default in html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files, as well as any language that inherits from any of the above like handlebars and php.

When you start typing an Emmet abbreviation, you will see the abbreviation displayed in the suggestion list. If you have the suggestion documentation fly-out open, you will see a preview of the expansion as you type. If you are in a stylesheet file, the expanded abbreviation shows up in the suggestion list sorted among the other CSS suggestions.

Using Tab for Emmet expansions Copy Section

If you want to use the kbstyle(Tab) key for expanding the Emmet abbreviations, add the following setting:

"emmet.triggerExpansionOnTab": true

This setting allows using the kbstyle(Tab) key for indentation when text is not an Emmet abbreviation.

Emmet when quickSuggestions are disabled Copy Section

If you have disabled the setting(editor.quickSuggestions) setting, you won't see suggestions as you type. You can still trigger suggestions manually by pressing kb(editor.action.triggerSuggest) and see the preview.

Disable Emmet in suggestions Copy Section

If you don't want to see Emmet abbreviations in suggestions at all, then use the following setting:

"emmet.showExpandedAbbreviation": "never"

You can still use the command Emmet: Expand Abbreviation to expand your abbreviations. You can also bind any keyboard shortcut to the command id editor.emmet.action.expandAbbreviation as well.

Emmet suggestion ordering Copy Section

To ensure Emmet suggestions are always on top in the suggestion list, add the following settings:

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"

Emmet abbreviations in other file types Copy Chapter

To enable the Emmet abbreviation expansion in file types where it is not available by default, use the setting(emmet.includeLanguages) setting. Make sure to use language identifiers for both sides of the mapping, with the right side being the language identifier of an Emmet supported language (see the list above).

For example:

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "razor": "html",
  "plaintext": "pug"
}

Emmet has no knowledge of these new languages, and so there might be Emmet suggestions showing up in non HTML/CSS contexts. To avoid this, you can use the following setting.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

Note: If you used setting(emmet.syntaxProfiles) previously to map new file types, from VS Code 1.15 onwards you should use the setting setting(emmet.includeLanguages) instead. setting(emmet.syntaxProfiles) is meant for customizing the final output only.

Emmet with multi-cursors Copy Chapter

You can use most of the Emmet actions with multi-cursors as well:

Using filters Copy Chapter

Filters are special post-processors that modify the expanded abbreviation before it is output to the editor. There are 2 ways to use filters; either globally through the setting(emmet.syntaxProfiles) setting or directly in the current abbreviation.

Below is an example of the first approach using the setting(emmet.syntaxProfiles) setting to apply the bem filter for all the abbreviations in HTML files:

"emmet.syntaxProfiles": {
  "html": {
    "filters": "bem"
  }
}

To provide a filter for just the current abbreviation, append the filter to your abbreviation. For example, div#page|c will apply the comment filter to the div#page abbreviation.

BEM filter (bem) Copy Section

If you use the Block Element Modifier (BEM) way of writing HTML, then bem filters are very handy for you to use. To learn more about how to use bem filters, read BEM filter in Emmet.

You can customize this filter by using the bem.elementSeparator and bem.modifierSeparator preferences as documented in Emmet Preferences.

Comment filter (c) Copy Section

This filter adds comments around important tags. By default, "important tags" are those tags with id and/or class attribute.

For example div>div#page>p.title+p|c will be expanded to:

You can customize this filter by using the filter.commentTrigger, filter.commentAfter and filter.commentBefore preferences as documented in Emmet Preferences.

The format for the filter.commentAfter preference is different in VS Code Emmet 2.0.

For example, instead of:

"emmet.preferences": {
  "filter.commentAfter": "\n"
}

in VS Code, you would use a simpler:

"emmet.preferences": {
  "filter.commentAfter": "\n"
}

Trim filter (t) Copy Section

This filter is applicable only when providing abbreviations for the Emmet: Wrap with Abbreviation command. It removes line markers from wrapped lines.

Using custom Emmet snippets Copy Chapter

Custom Emmet snippets need to be defined in a json file named snippets.json. The setting(emmet.extensionsPath) setting should have the path to the directory containing this file.

Below is an example for the contents of this snippets.json file.

{
    "html": {
        "snippets": {
            "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
            "oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
            "ran": "{ Wrap plain text in curly braces }"
        }
    },
    "css": {
        "snippets": {
            "cb": "color: black",
            "bsd": "border: 1px solid ${1:red}",
            "ls": "list-style: ${1}"
        }
    }
}

Authoring of Custom Snippets in Emmet 2.0 via the snippets.json file differs from the old way of doing the same in a few ways:

HTML Emmet snippets Copy Section

HTML custom snippets are applicable to all other markup flavors like haml or pug. When snippet value is an abbreviation and not actual HTML, the appropriate transformations can be applied to get the right output as per the language type.

For example, for an unordered list with a list item, if your snippet value is ul>li, you can use the same snippet in html, haml, pug or slim, but if your snippet value is <li></li>, then it will work only in html files.

If you want a snippet for plain text, then surround the text with {}.

CSS Emmet snippets Copy Section

Values for CSS Emmet snippets should be a complete property name and value pair.

CSS custom snippets are applicable to all other stylesheet flavors like scss, less or sass. Therefore, don't include a trailing ; at the end of the snippet value. Emmet will add it as needed based on whether the language requires it.

Do not use : in the snippet name. : is used to separate property name and value when Emmet tries to fuzzy match the abbreviation to one of the snippets.

Tab stops and cursors in custom snippets Copy Section

The syntax for tab stops in custom Emmet snippets follows the Textmate snippets syntax.

• Use ${1}, ${2} for tab stops and ${1:placeholder} for tab stops with placeholders.
• Previously, | or ${cursor} was used to denote the cursor location in the custom Emmet snippet. This is no longer supported. Use ${1} instead.

Emmet configuration Copy Chapter

Below are Emmet settings that you can use to customize your Emmet experience in VS Code.

• setting(emmet.includeLanguages)

  Use this setting to add mapping between the language of your choice and one of the Emmet supported languages to enable Emmet in the former using the syntax of the latter. Make sure to use language IDs for both sides of the mapping.

  For example:

  json Copy

  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "plaintext": "pug"
  }

• setting(emmet.excludeLanguages)

  If there is a language where you do not want to see Emmet expansions, add it in this setting which takes an array of language ID strings.

• setting(emmet.syntaxProfiles)

  See Emmet Customization of output profile to learn how you can customize the output of your HTML abbreviations.

  For example:

  json Copy

  "emmet.syntaxProfiles": {
    "html": {
      "attr_quotes": "single"
    },
    "jsx": {
      "self_closing_tag": true
    }
  }

• setting(emmet.variables)

  Customize variables used by Emmet snippets.

  For example:

  json Copy

  "emmet.variables": {
    "lang": "de",
    "charset": "UTF-16"
  }

• setting(emmet.showExpandedAbbreviation)

  Controls the Emmet suggestions that show up in the suggestion/completion list.

  Setting Value	Description
  never	Never show Emmet abbreviations in the suggestion list for any language.
  inMarkupAndStylesheetFilesOnly	Show Emmet suggestions only for languages that are purely markup and stylesheet based ('html', 'pug', 'slim', 'haml', 'xml', 'xsl', 'css', 'scss', 'sass', 'less', 'stylus').
  always	Show Emmet suggestions in all Emmet supported modes as well as the languages that have a mapping in the setting(emmet.includeLanguages) setting.

  Note: In the always mode, the new Emmet implementation is not context aware. For example, if you are editing a JavaScript React file, you will get Emmet suggestions not only when writing markup but also while writing JavaScript.

• setting(emmet.showAbbreviationSuggestions)

  Shows possible emmet abbreviations as suggestions. It is true by default.

  For example, when you type li, you get suggestions for all emmet snippets starting with li like link, link:css , link:favicon etc.
  This is helpful in learning Emmet snippets that you never knew existed unless you knew the Emmet cheatsheet by heart.

  Not applicable in stylesheets or when setting(emmet.showExpandedAbbreviation) is set to never.

• setting(emmet.extensionsPath)

  Provide the location of the directory that houses the snippets.json file which in turn has your custom snippets.

• setting(emmet.triggerExpansionOnTab)

  Set this to true to enable expanding Emmet abbreviations with kbstyle(Tab) key. We use this setting to provide the appropriate fallback to provide indentation when there is no abbreviation to expand.

• setting(emmet.showSuggestionsAsSnippets)

  If set to true, then Emmet suggestions will be grouped along with other snippets allowing you to order them as per setting(editor.snippetSuggestions) setting. Set this to true and setting(editor.snippetSuggestions) to top, to ensure that Emmet suggestions always show up on top among other suggestions.

• setting(emmet.preferences)

  You can use this setting to customize Emmet as documented in Emmet Preferences. The below customizations are currently supported:

  • css.propertyEnd
  • css.valueSeparator
  • sass.propertyEnd
  • sass.valueSeparator
  • stylus.propertyEnd
  • stylus.valueSeparator
  • css.unitAliases
  • css.intUnit
  • css.floatUnit
  • bem.elementSeparator
  • bem.modifierSeparator
  • filter.commentBefore
  • filter.commentTrigger
  • filter.commentAfter
  • format.noIndentTags
  • format.forceIndentationForTags
  • profile.allowCompactBoolean
  • css.fuzzySearchMinScore

  The format for the filter.commentAfter preference is different and simpler in Emmet 2.0.

  For example, instead of the older format

  json Copy

  "emmet.preferences": {
    "filter.commentAfter": "\n"
  }

  you would use

  json Copy

  "emmet.preferences": {
    "filter.commentAfter": "\n"
  }

  If you want support for any of the other preferences as documented in Emmet Preferences, please log a feature request.

Next steps Copy Chapter

Emmet is just one of the great web developer features in VS Code. Read on to find out about:

• HTML - VS Code supports HTML with IntelliSense, closing tags, and formatting.
• CSS - We offer rich support for CSS, SCSS and Less.

Troubleshooting Copy Chapter

Custom tags do not get expanded in the suggestion list Copy Section

Custom tags when used in an expression like MyTag>YourTag or MyTag.someclass do show up in the suggestion list. But when these are used on their own like MyTag, they do not appear in the suggestion list. This is designed so to avoid noise in the suggestion list as every word is a potential custom tag.

Add the following setting to enable expanding of Emmet abbreviations using tab which will expand custom tags in all cases.

"emmet.triggerExpansionOnTab": true

My HTML snippets ending with `+` do not work Copy Section

HTML snippets ending with + like select+ and ul+ from the Emmet cheatsheet are not supported. This is a known issue in Emmet 2.0 Issue: emmetio/html-matcher#1. A workaround is to create your own custom Emmet snippets for such scenarios.

Abbreviations are failing to expand Copy Section

First, check if you're using custom snippets (if there is a snippets.json file being picked up by the setting(emmet.extensionsPath) setting). The format of custom snippets changed in VS Code release 1.53. Instead of using | to indicate where the cursor position is, use tokens such as ${1}, ${2}, etc. instead. The default CSS snippets file from the emmetio/emmet repository shows examples of the new cursor position format.

If abbreviations are still failing to expand:

• Check the builtin extensions to see if Emmet has been disabled.
• Try restarting the extension host by running the Developer: Restart Extension Host (workbench.action.restartExtensionHost) command in the Command Palette.

Where can I set all the preferences as documented in [Emmet preferences](https://docs.emmet.io/customization/preferences/)? Copy Section

You can set the preferences using the setting setting(emmet.preferences). Only a subset of the preferences that are documented in Emmet preferences can be customized. Please read the preferences section under Emmet configuration.

Any tips and tricks? Copy Section

Of course!

• In CSS abbreviations, when you use :, the left part is used to fuzzy match with the CSS property name and the right part is used to match with CSS property value. Take full advantage of this by using abbreviations like pos:f, trf:rx, fw:b, etc.
• Explore all other Emmet features as documented in Emmet Actions.
• Don't hesitate to create your own custom Emmet snippets.

File: docs/languages/go.md Copy Chapter

ContentId: 6f06908a-6694-4fad-ac1e-fc6d9c5747ca DateApproved: 8/19/2026 MetaDescription: Learn about Visual Studio Code editor features (code completion, debugging, snippets, linting) for Go. Copy Chapter

Go in Visual Studio Code

Using the Go extension for Visual Studio Code, you get features like IntelliSense, code navigation, symbol search, testing, debugging, and many more that will help you in Go development.

You can install the Go extension from the VS Code Marketplace.

Watch "Getting started with VS Code Go" for an explanation of how to build your first Go application using VS Code Go.

This article describes only a subset of the features the Go extension provides. See the extension's documentation for the full, up-to-date list of supported features.

IntelliSense Copy Chapter

IntelliSense features are provided by the Go language server, gopls, maintained by the Go team. You can configure the behavior of gopls using the gopls settings.

Semantic syntax highlighting Copy Section

For better syntax highlighting than the default TextMate-based syntax highlighting, we recommend enabling semantic highlighting by turning on Gopls' ui.semanticTokens setting.

"gopls": { "ui.semanticTokens": true }

Auto completions Copy Section

As you type in a Go file, you can see IntelliSense providing you with suggested completions. This even works for members in current, imported, and not yet imported packages. Just type any package name followed by ., and you will get suggestions for the corresponding package members.

Tip: Use kb(editor.action.triggerSuggest) to trigger the suggestions manually.

Hover information Copy Section

Hovering on any variable, function, or struct will give you information on that item such as documentation, signature, etc.

Signature help Copy Section

When you open the ( while calling a function, a pop-up provides signature help for the function. As you keep typing the parameters, the hint (underline) moves to the next parameter.

Tip: Use kb(editor.action.triggerParameterHints) to manually trigger the signature help when the cursor is inside the () in the function call.

Code navigation Copy Chapter

Code Navigation features are available in the context menu in the editor.

• Go to Definition kb(editor.action.revealDefinition) - Go to the source code of the type definition.
• Go to Type Definition - Go to the type that defines a symbol.
• Peek Definition kb(editor.action.peekDefinition) - Bring up a Peek window with the type definition.
• Go to References kb(editor.action.goToReferences) - Show all references for the type.
• Show Call Hierarchy kb(editor.showCallHierarchy) - Show all calls from or to a function.
• Go to Implementations kb(editor.action.goToImplementation) - Bring up a Peek window with the list of all implementations of an interface (if triggered with an interface type symbol), or interfaces a type implements (if triggered with a concrete type symbol).
• Find All Implementations - Show all implementation of an interface (if triggered with an interface type symbol), or interfaces a type implements (if triggered with a concrete type symbol).

You can navigate via symbol search using the Go to Symbol commands from the Command Palette (kb(workbench.action.showCommands)).

• Go to Symbol in File - kb(workbench.action.gotoSymbol)
• Go to Symbol in Workspace - kb(workbench.action.showAllSymbols)

You can also navigate back and forth between a Go file and its test implementation using the Go: Toggle Test File command.

Build and diagnose Copy Chapter

The Go language server (gopls) detects build and vet errors found on the workspace. The errors and warnings from running any/all of the above will be shown red/green squiggly lines in the editor. These diagnostics also show up in the Problems panel (View > Problems).

You can add additional lint checks using the go.lintOnSave setting and configuring your choice of linting tool (staticcheck, golangci-lint, or revive) using the go.lintTool setting.

Formatting Copy Chapter

You can format your Go file using kb(editor.action.formatDocument) or by running the Format Document command from the Command Palette or the context menu in the editor.

By default, formatting is run when you save your Go file. You can disable this behavior by setting setting(editor.formatOnSave) to false for the [go] language identifier. You can change this using your JSON setting files.

"[go]": {
        "editor.formatOnSave": false
}

When you have multiple formatters activated for Go files, you can select the Go extension as the default formatter.

"[go]": {
    "editor.defaultFormatter": "golang.go"
}

Formatting is provided by gopls. If you want gofumpt-style formatting, you can configure gopls to use gofumpt.

"gopls": {
    "formatting.gofumpt": true
}

Test Copy Chapter

The VS Code Test UI and editor CodeLens elements allow users to easily run tests, benchmarks, profiles for a given function, file, package, or workspace.

Alternatively, the same functionality is available through a set of commands:

• Go: Test Function At Cursor
• Go: Test File
• Go: Test Package
• Go: Test All Packages in Workspace

There are many test-related commands that you can explore by typing "Go: test" in the Command Palette.

The first three above can be used to generate test skeletons for the functions in the current package, file, or at the cursor using gotests. The last few can be used to run tests in the current package, file, or at the cursor using go test. There is also a command for getting test coverage.

You can configure the extension to run tests and compute test coverage using:

• go.testOnSave
• go.coverOnSave
• go.testFlags

Import packages Copy Chapter

The extension organizes imports, and removes unused imports by default. For different behavior, you can override per-language default settings following these instructions.

Run the command Go: Add Import to get a list of packages that can be imported to your Go file. Choose one and it will get added in the import block of your Go file.

Refactoring Copy Chapter

Select the area for refactoring (for example variable, function body, etc.). Click on the Code Action light bulb icon that appears in the selected area, or select Refactoring... or Rename Symbol (kb(editor.action.rename)) from the VS Code context menu.

Debugging Copy Chapter

The Go extension lets you debug Go code by utilizing the Delve debugger.

Read Debug Go programs in VS Code for setup steps, supported features, configurations, information on remote debugging and a troubleshooting guide. For general debugging features such as inspecting variables, setting breakpoints, and other activities that aren't language-dependent, review VS Code debugging.

Some features unique to Go are:

• Local & remote debugging
• Data inspection using Delve's expression syntax
• Dynamic configuration change and inspection options with dlv command from DEBUG CONSOLE
• Ability to hide/show system goroutines (use hideSystemGoroutines configuration)
• Disassembly view support (right-click your source code and select Open Disassembly View)
• Experimental function call, core inspection, Mozilla rr support

Next steps Copy Chapter

This has been a brief overview showing the Go extension features within VS Code. For more information, see the details provided in the Go extension README.

To stay up to date on the latest features/bug fixes for the Go extension, see the CHANGELOG.

If you have any issues or feature requests, feel free to log them in the Go extension vscode-go repo.

If you'd like to learn more about VS Code, try these topics:

• Basic Editing - A quick introduction to the basics of the VS Code editor.
• Install an Extension - Learn about other extensions are available in the Marketplace.
• Code Navigation - Move quickly through your source code.

File: docs/languages/html.md Copy Chapter

ContentId: 43095EAF-4B93-407C-A6F9-6DB173D79088 DateApproved: 8/19/2026 MetaDescription: Get the best out of Visual Studio Code for HTML development Copy Chapter

HTML in Visual Studio Code

Visual Studio Code provides basic support for HTML programming out of the box. There is syntax highlighting, smart completions with IntelliSense, and customizable formatting. VS Code also includes great Emmet support.

IntelliSense Copy Chapter

As you type in HTML, we offer suggestions via HTML IntelliSense. In the image below, you can see a suggested HTML element closure `` as well as a context specific list of suggested elements.

Document symbols are also available for HTML, allowing you to quickly navigate to DOM nodes by id and class name.

You can also work with embedded CSS and JavaScript. However, note that script and style includes from other files are not followed, the language support only looks at the content of the HTML file.

You can trigger suggestions at any time by pressing kb(editor.action.triggerSuggest).

You can also control which built-in code completion providers are active. Override these in your user or workspace settings if you prefer not to see the corresponding suggestions.

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true

Close tags Copy Chapter

Tag elements are automatically closed when > of the opening tag is typed.

The matching closing tag is inserted when / of the closing tag is entered.

You can turn off autoclosing tags with the following setting:

"html.autoClosingTags": false

Auto update tags Copy Chapter

When modifying a tag, the linked editing feature automatically updates the matching closing tag. The feature is optional and can be enabled by setting:

"editor.linkedEditing": true

Color picker Copy Chapter

The VS Code color picker UI is now available in HTML style sections.

It supports configuration of hue, saturation and opacity for the color that is picked up from the editor. It also provides the ability to trigger between different color modes by clicking on the color string at the top of the picker. The picker appears on a hover when you are over a color definition.

Hover Copy Chapter

Move the mouse over HTML tags or embedded styles and JavaScript to get more information on the symbol under the cursor.

Validation Copy Chapter

The HTML language support performs validation on all embedded JavaScript and CSS.

You can turn that validation off with the following settings:

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

Folding Copy Chapter

You can fold regions of source code using the folding icons on the gutter between line numbers and line start. Folding regions are available for all HTML elements for multiline comments in the source code.

Additionally you can use the following region markers to define a folding region:
and

If you prefer to switch to indentation based folding for HTML use:

"[html]": {
    "editor.foldingStrategy": "indentation"
},

Preview HTML files in the Integrated Browser Copy Chapter

You can preview HTML files in the Integrated Browser inside VS Code.

To open an HTML file in the Integrated Browser, right-click the file in the File Explorer or the editor tab and select Open in Integrated Browser. You can also select the Show Preview icon in the editor title bar when an HTML file is active.

As you modify the HTML file, the preview updates in real time to reflect your changes.

Formatting Copy Chapter

To improve the formatting of your HTML source code, you can use the Format Document command kb(editor.action.formatDocument) to format the entire file or Format Selection kb(editor.action.formatSelection) to just format the selected text.

The HTML formatter is based on js-beautify. The formatting options offered by that library are surfaced in the VS Code settings:

• setting(html.format.wrapLineLength): Maximum amount of characters per line.
• setting(html.format.unformatted): List of tags that shouldn't be reformatted.
• setting(html.format.contentUnformatted): List of tags, comma separated, where the content shouldn't be reformatted.
• setting(html.format.extraLiners): List of tags that should have an extra newline before them.
• setting(html.format.preserveNewLines): Whether existing line breaks before elements should be preserved.
• setting(html.format.maxPreserveNewLines): Maximum number of line breaks to be preserved in one chunk.
• setting(html.format.indentInnerHtml): Indent <head> and `` sections.
• setting(html.format.wrapAttributes): Wrapping strategy for attributes:
  • auto: Wrap when the line length is exceeded
  • force: Wrap all attributes, except first
  • force-aligned: Wrap all attributes, except first, and align attributes
  • force-expand-multiline: Wrap all attributes
  • aligned-multiple: Wrap when line length is exceeded, align attributes vertically
  • preserve: Preserve wrapping of attributes
  • preserve-aligned: Preserve wrapping of attributes but align
• setting(html.format.wrapAttributesIndentSize): Alignment size when using force aligned and aligned multiple in setting(html.format.wrapAttributes) or null to use the default indent size.
• setting(html.format.templating): Honor django, erb, handlebars and php templating language tags.
• setting(html.format.unformattedContentDelimiter): Keep text content together between this string.

[!TIP]
The formatter doesn't format the tags listed in the setting(html.format.unformatted) and setting(html.format.contentUnformatted) settings. Embedded JavaScript is formatted unless 'script' tags are excluded.

The Marketplace has several alternative formatters to choose from. If you want to use a different formatter, define
"html.format.enable": false in your settings to turn off the built-in formatter.

Emmet snippets Copy Chapter

VS Code supports Emmet snippet expansion. Emmet abbreviations are listed along with other suggestions and snippets in the editor auto-completion list.

[!TIP]
See the HTML section of the Emmet cheat sheet for valid abbreviations.

If you'd like to use HTML Emmet abbreviations with other languages, you can associate one of the Emmet modes (such as css, html) with other languages with the setting(emmet.includeLanguages) setting. The setting takes a language identifier and associates it with the language ID of an Emmet supported mode.

For example, to use Emmet HTML abbreviations inside JavaScript:

{
    "emmet.includeLanguages": {
        "javascript": "html"
     }
}

We also support User Defined Snippets.

HTML custom data Copy Chapter

You can extend VS Code's HTML support through a declarative custom data format. By setting setting(html.customData) to a list of JSON files following the custom data format, you can enhance VS Code's understanding of new HTML tags, attributes and attribute values. VS Code will then offer language support such as completion & hover information for the provided tags, attributes and attribute values.

You can read more about using custom data in the vscode-custom-data repository.

HTML extensions Copy Chapter

Install an extension to add more functionality. Go to the Extensions view (kb(workbench.view.extensions)) and type 'html' to see a list of relevant extensions to help with creating and editing HTML.

[!TIP]
Select an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Next steps Copy Chapter

Read on to find out about:

• CSS, SCSS, and Less - VS Code has first class support for CSS including Less and SCSS.
• Emmet - Learn about VS Code's powerful built-in Emmet support.
• Emmet official documentation - Emmet, the essential toolkit for web-developers.

File: docs/languages/identifiers.md Copy Chapter

ContentId: 3f773ade-7e71-4fb9-9bb9-d9e0b20fa799 DateApproved: 8/19/2026 MetaDescription: Visual Studio Code language mode identifiers Copy Chapter

Language Identifiers

In Visual Studio Code, each language mode has a unique specific language identifier. That identifier is rarely seen by the user except in the settings, for example, when associating file extensions to a language:

"files.associations": {
        "*.myphp": "php"
    }

Note that casing matters for exact identifier matching ('Markdown' != 'markdown')

The language identifier becomes essential for VS Code extension developers when adding new language capabilities or when replacing a language support.

Every language defines its id through the languages configuration point in the extension's package.json file:

"languages": [{
        "id": "java",
        "extensions": [ ".java", ".jav" ],
        "aliases": [ "Java", "java" ]
    }]

Language supports are added using the language identifier:

"grammars": [{
        "language": "groovy",
        "scopeName": "source.groovy",
        "path": "./syntaxes/Groovy.tmLanguage.json"
    }],
    "snippets": [{
        "language": "groovy",
        "path": "./snippets/groovy.json"
    }]

languages.registerCompletionItemProvider('php', new PHPCompletionItemProvider(), '.', '$')

New identifier guidelines Copy Chapter

When defining a new language identifier, use the following guidelines:

• Use the lowercased programming language name.
• Search for other extensions in the Marketplace to find out if a language identifier has already been used.

Known language identifiers Copy Chapter

The following table lists known language identifiers:

2. Official Technical Reference & Guides (microsoft/vscode-docs-archive) Copy Chapter

Visual Studio Code Documentation

You've found the Visual Studio Code documentation GitHub repository, which contains the content for the Visual Studio Code documentation.

Topics submitted here will be published to the Visual Studio Code portal.

If you are looking for the VS Code product GitHub repository, you can find it here.

Index Copy Chapter

1. About Visual Studio Code
2. Contributing to the documentation
3. Feedback
4. Documentation Issues
5. Editing
6. Publishing

Visual Studio Code Copy Chapter

VS Code is a lightweight source code editor and powerful development environment for building and debugging modern web and cloud applications. It is free and available on your favorite platform - Linux, macOS, and Windows.

If you landed here looking for other information about VS Code, head over to our website for additional information.

Contributing to the documentation Copy Chapter

To contribute with new topics/information or make changes to existing documentation, see contributing for instructions and guidelines.

Feedback Copy Chapter

If you want to give documentation feedback, please use the feedback control located at the bottom of each documentation page.

Documentation Issues Copy Chapter

To enter documentation bugs, please create a new GitHub issue (try to check if there isn't a topic about your issue already).

If you think the issue is with the VS Code product itself, please enter issues here.

Editing Copy Chapter

In order to edit the VS Code documentation, ensure that you have Git installed.

Clone a copy of the repo:

git clone https://github.com/Microsoft/vscode-docs.git

VS Code itself is great for reviewing and editing Markdown with nice preview support.

If you want to use VS Code, simply navigate to the vscode-docs directory and launch VS Code from there:

cd vscode-docs
code .

You can open any of the Markdown files and see a preview with the Open Preview to the Side button in the upper right of the editor.

Publishing Copy Chapter

Steps for how to publish documentation changes can be found here in the (private) repository of the VS Code website.