How to Launch Files in a Browser from Visual Studio Code

Visual Studio Code doesn’t have a built-in method for launching HTML and other files in Google Chrome, but you can configure it to do so.

UPDATE (2018-04-11): The methods described here no longer work in newer versions of VS Code. See this article for a recommended extension to use instead.

OSX Method

  1. Press CMD+Shift+P to open the Command Palette.
  2. Type “ctr” and select the Configure Task Runner command to open tasks.json.
  3. Delete the current placeholder contents.
  4. Enter the following:
    {
        "version": "0.1.0",
        "command": "Chrome",
        "osx": {
            "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
        },
        "args": ["${file}"]
    }
  5. To test it, open an HTML file in Visual Studio Code and press CMD+Shift+B. It should open in Chrome.

Windows Method

  1. Press Ctrl+Shift+P to open the Command Palette.
  2. Type “ctr” and select the Configure Task Runner command to open tasks.json.
  3. Delete the current placeholder contents.
  4. Enter the following:
    {
        "version": "0.1.0",
        "command": "Chrome",
        "windows": {
            "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
        },
        "args": ["${file}"]
    }
  5. To test it, open an HTML file in Visual Studio Code and press Ctrl+Shift+B. It should open in Chrome.

The following pages helped me figure this out:

  1. How to Add a Browser to Task Runner in Visual Studio Code
  2. Stack Overflow: How to view my HTML code in browser with Visual Studio Code?

Related Training: Visual Studio

 

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.


One thought on “How to Launch Files in a Browser from Visual Studio Code”