Donovan Brown

Technology Blog

Launch default browser from Visual Studio Code

21 May 2015 Donovan-Brown Work (5)

Problem:

I need to view the current HTML file in my default browser from inside Visual Studio Code (VS Code).

Solution:

Configure a task in tasks.json to open the current file.

Explanation:

I was recently working through a git tutorial where I was writing a lot of HTML.  The Zen Coding support in VS Code allowed me to crank out the HTML very quickly.  However, there was no way to quickly view the page in a browser.

Luckily I was able to use VS Code’s task integration facilities to solve this issue.  Now with the attached tasks.json file in the .settings folder I am able to view the active file in my default web browser by simply pressing Ctrl + Shift + B. 

tasks.json (136B)
Tags :

Comments (5) -

  • johny why

    12/30/2015 10:30:29 PM | Reply

    hi
    thx for this! but i can't get it to work. how to install?
    i read .settings folder is now called .tasks, but i cannot find either folder. Should i put your json file here?
    \Microsoft VS Code\resources\app\out\vs\workbench\parts\tasks

    Is it ok to change it's name to browse.JSON?
    Am i supposed to copy your code into some other tasks config file?

    I played around with stuff in this thread, but didn't get anywhere.
    stackoverflow.com/.../where-is-the-tasks-json-file-in-vscode

    thx!

  • john

    1/5/2016 5:57:19 PM | Reply

    hi

    i can't get it to work. how to install?
    i read .settings folder is now called .tasks, but i cannot find either folder. Should i put the json file here?
    \Microsoft VS Code\resources\app\out\vs\workbench\parts\tasks

    Is it ok to change it's name to browse.JSON?
    Am i supposed to copy this code into some other tasks config file?

    I played around with stuff in this thread, but didn't get anywhere.
    stackoverflow.com/.../where-is-the-tasks-json-file-in-vscode

    update: figured out i need to put package.json in %USERPROFILE%\.vscode\extensions, in its own folder. I did not change the name of package.json. Still not working.

    Then i found this-

    http://stackoverflow.com/a/30043507/209942

    Followed the instructions. Unsure whether to "change" parameters in task runner, or ADD that code to task runner.

    just getting "Failed to launch external program chrome {$file}. spawn chrome ENOENT"

    appreciate any help. -thx

  • john

    1/5/2016 6:45:50 PM | Reply

    hi, now i understand how your script works. Thx! But how are you getting the Ctrl + Shift + B keystroke? thx (you can disregard my previous comments)

  • Donovan

    1/6/2016 7:08:02 PM | Reply

    You can review and learn how to set key bindings here.
    code.visualstudio.com/.../keybindings

    • john

      1/6/2016 7:20:22 PM | Reply

      hi

      thx for that. But i don't see a way to add keybindings for individual tasks. For tasks, there's only:

      Ctrl+Shift+B  Run Build Task  workbench.action.tasks.build
      Ctrl+Shift+T  Run Test Task  workbench.action.tasks.test

      More keybindings would only make sense if there are multiple tasks in tasks.json.

      stackoverflow.com/.../define-multiple-tasks-in-vscode

      But i understand if you can't answer, since this is out of scope of your article.

      thx!

Pingbacks and trackbacks (1)+

Add comment

Loading