Visual Studio Code overview

Visual Studio Code is a lightweight, but powerful source code editor. Visual Studio Code is available for Windows, Linux, and macOS. It includes built-in support for JavaScript, TypeScript, and Node.js, so it is a great tool for web developers before you customize it. If you are not using it yet, download Visual Studio Code.

Extensions

To acquire any of the extensions highlighted below, navigate to Extensions (select Ctrl+Shift+X on Windows/Linux or Command+Shift+X on macOS) in Visual Studio Code.

Search the Marketplace for the specific extension and choose Install.

Install the Debugger for Microsoft Edge Visual Studio Code extension

Debugger for Microsoft Edge

With the Debugger for Microsoft Edge Visual Studio Code extension, debug your front-end JavaScript code line-by-line and see console.log() statements directly from Visual Studio Code.

Using the Debugger tool, you may launch or attach to both Microsoft Edge (EdgeHTML) and Microsoft Edge (Chromium). For a walkthrough of debugging Microsoft Edge from Visual Studio Code and sample launch.json configurations, navigate to Debugger For Microsoft Edge Visual Studio Code Extension. Choose the following image to see the extension in action.

Debugger for Edge Visual Studio Code extension in action

Microsoft Edge Tools for Visual Studio Code

With the Microsoft Edge Tools for Visual Studio Code Visual Studio Code extension, use the Elements tool of the Microsoft Edge browser within Visual Studio Code. Use it for the following actions.

  • Attach to an instance or launch an instance of Microsoft Edge.
  • Display the runtime HTML structure.
  • Update the layout.
  • Fix styling issues.

For more information, navigate to Microsoft Edge Tools for Visual Studio Code Visual Studio Code extension.

Microsoft Edge Tools for Visual Studio Code Visual Studio Code extension in action

webhint

Use webhint, a customizable linting tool, to improve the following functionality of your site.

  • Accessibility
  • Performance
  • Cross-browser compatibility
  • PWA compatibility
  • Security

It checks your code for coding practices and common errors. The webhint open-source project, initially developed by the Microsoft Edge team, is now part of the OpenJS Foundation. The Microsoft Edge team continues to contribute to webhint alongside web developers in the community.

Screenshot of webhint Visual Studio Code extension

Identify and fix problems in your website by adding the webhint extension for Visual Studio Code. Hints examine HTML, CSS, JavaScript, TypeScript, and more. Hints appear as inline underlines and are summarized in the Problems pane.

For more information, navigate to How to use webhint in Visual Studio Code.