How to view an HTML file in the browser with Visual Studio Code

Question

How can I view my HTML code in a browser with the new Microsoft Visual Studio Code?

With Notepad++ you have the option to Run in a browser. How can I do the same thing with Visual Studio Code?

also related: https://stackoverflow.com/questions/47519768/how-do-i-set-the-default-browser-as-chrome-in-visual-studio-code — ford04, Sep 02 '19 at 22:30
Microsoft released the even easier to setup "Live Preview" extension. See https://stackoverflow.com/a/69210917/2713729 — Janne Annala, Sep 23 '21 at 14:13

score 257 · Accepted Answer · edited Jan 23 '19 at 17:03

257

For Windows - Open your Default Browser - Tested on VS Code v 1.1.0

Answer to both opening a specific file (name is hard-coded) OR opening ANY other file.

Steps:

Use ctrl + shift + p (or F1) to open the Command Palette.
Type in Tasks: Configure Task or on older versions Configure Task Runner. Selecting it will open the tasks.json file. Delete the script displayed and replace it by the following:
```
{
    "version": "0.1.0",
    "command": "explorer",    
    "windows": {
        "command": "explorer.exe"
    },
    "args": ["test.html"]
}
```
Remember to change the "args" section of the tasks.json file to the name of your file. This will always open that specific file when you hit F5.

You may also set the this to open whichever file you have open at the time by using ["${file}"] as the value for "args". Note that the $ goes outside the {...}, so ["{$file}"] is incorrect.
Save the file.
Switch back to your html file (in this example it's "text.html"), and press ctrl + shift + b to view your page in your Web Browser.

enter image description here

edited Jan 23 '19 at 17:03

ΩmegaMan

29,542
12
100
122

answered May 05 '15 at 02:57

yushulx

11,695
8
37
64

2

awesome it worked! Just out of curiosity: why explorer exe. It opens the page in Chrome afterall. How can I open it in Internet explorer? And I replaced the "test.html" with the name of my html page. I hope thats the right way to do. Again thnaks! – May 05 '15 at 11:26
2

explorer.exe will launch the default Web browser. If you want to open the page in Internet explorer, you just need to make it default: IE > Internet Options > Programs > Make default. @Orphydian – yushulx May 06 '15 at 00:41
18

You can even use variables if you have more than one HTML file. You can do: "args": ["{$file}"] to pass the current open file. See also https://code.visualstudio.com/Docs/tasks#_variables-in-tasksjson – Dirk Bäumer May 07 '15 at 07:04
1

I have another HTML file named "second_page.html". How should be that "args"line in this case? Do I need to keep the previous "args" line too? – May 07 '15 at 18:02
11

How do I do it in Mac? There are no exe files. I would like to open the webpage in chrome on Mac – Preetham Reddy Jun 29 '15 at 06:25
If someone is getting "No task runner configured", closing and re-opening Visual Studio Code worked for me! – vallentin Nov 30 '15 at 18:34
do you "change" parameters in task runner? or ADD your code to task runner? thx – johny why Jan 02 '16 at 21:34
3

just getting "Failed to launch external program chrome {$file}. spawn chrome ENOENT" – johny why Jan 02 '16 at 21:49
This process worked for me, but why do we have to hard-code "test.html" into this process? can we not preview any .html file in this directory through by simply opening it up and pressing ctrl+shift+b? I have multiple html files I would like to preview at any given time in my folder... – klewis Mar 02 '16 at 23:46
8

To Configure Task in a new folder: Select the Tasks: Configure Task Runner command and you will see a list of task runner templates. Select **Others** to create a task which runs an external command. . . . You should now see a **tasks.json file in your workspace .vscode folder** with the following content: . . . by https://code.visualstudio.com/Docs/editor/tasks – yu yang Jian Sep 25 '16 at 02:12
1

Why is the shortcut cmd + shift + b? I want to add similar shortcuts for firefox and safari but I'm not clear how I would be able to configure the keyboard shortcuts? – Gwater17 Feb 28 '17 at 01:21
@MJGwater in 1.10 you can assign your shortcut by editing `keybindings.json` and inserting there entry like `{ "key": "", "command": "workbench.action.tasks.runTask", "args":"" }`, By default there are shortcuts for build('cmd+shift+b') and test('cmd+shift+t') tasks. – guest-418 Apr 12 '17 at 01:17
5

Configure Task Runner is no longer present in VSC 1.24.0 - Control-Shift-P returns no results for that string. – lonstar Jun 09 '18 at 05:47
2

Configure Task Runner has changed to "Tasks: Configure Task" – scottdavidwalker Sep 28 '18 at 12:52
Pressing f5 on an unsaved HTML file send an `'${file}' can not be resolved. Please open an editor.[Open launch.json] ` – JinSnow Jun 13 '19 at 19:32
3

1.) Right-click 2.) Click "View In Browser". Oh wait, that was just a dream. – Rodney Dec 27 '19 at 21:02
1

@Rodney https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser – A__ Feb 29 '20 at 01:42
I cannot find the default keybindings. – Timo Jan 02 '21 at 16:57
With `F1` `tasks: configure task` I get `select a task to configure` with . Which one to take? Maybe `create task from template`. – Timo Aug 01 '21 at 09:57
Playing with `tasks.json` is no fun, [be told](https://stackoverflow.com/a/55120139/1705829) and keep your beloved at home. – Timo Aug 01 '21 at 10:06
1

Does that work when the files sit on a remote server ? – Soerendip May 23 '22 at 19:03

score 235 · Answer 2 · edited Jul 07 '22 at 09:03

235

VS Code has a Live Server Extension that supports one click launch from status bar.

Some of the features:

One Click Launch from Status Bar
Live Reload
Support for Chrome Debugging Attachment

edited Jul 07 '22 at 09:03

nan

19,595
7
48
80

answered Feb 10 '18 at 14:37

Jose Cherian

7,207
3
36
39

10

This extension also has a web add-on to provide automatic reload functionality to dynamic pages. – Mikael S Apr 24 '18 at 13:01
@M.Sundstrom can you give me the name/link of that add-on please? – Adil Saju Oct 10 '18 at 12:13
2

Still very useful, and especially completely configuration free! – Jonas Oct 11 '18 at 09:39
2

This is not recommended for complex pages maybe good for new coders – Yasser Jarouf Nov 11 '18 at 01:15
Do you mean the browser extension or the vs code extension @YasserAkram? – Mikael S Nov 12 '18 at 17:02
Well, both maybe. I never had a good experience with it. Even the Atom one. Currently I'm much better fine with Brackets.IO for basic coding and templating @M.Sundstrom – Yasser Jarouf Nov 12 '18 at 20:29
tested on win 7, works like a charm. basically creates a local server. – Sheece Gardazi Apr 03 '19 at 12:52
1

but it seems you can't preview the unsaved active file right? (Running it, doesn't preview the html, but shows on the browser the folder hierarchy) – JinSnow Jun 13 '19 at 19:28
What about PHP extension? – questionbank Jul 19 '19 at 12:46
does it show changes in Javascript on save live in browser? – Timo Dec 04 '20 at 17:18
2

@JinSnow feature is on [beta](https://github.com/ritwickdey/vscode-live-server-plus-plus) – sourcream May 19 '22 at 12:21
thank you so much , this is so much helpful to running html only , auto reload just only click go live :) – Ivan Juliant Jun 15 '22 at 08:19
thanks my king, very helpful your answer =) – jonathasborges1 Sep 17 '22 at 20:50

score 81 · Answer 3 · edited Apr 29 '23 at 16:36

81

@InvisibleDev - to get this working on a mac trying using this:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": [
        "${file}"
    ]
}

If you have chrome already open, it will launch your html file in a new tab.

edited Apr 29 '23 at 16:36

wjandrea

28,235
9
60
81

answered Jul 11 '15 at 12:19

Sammydo_55

811
6
3

score 66 · Answer 4 · edited Jan 31 '21 at 18:50

66

Open Extensions Sidebar (Ctrl + Shift + X)
Search for open in browser and install it
Right click on your html file, and select "Open in Browser" (Alt + B)

edited Jan 31 '21 at 18:50

KyleMit

30,350
66
462
664

answered Aug 31 '19 at 18:06

Rinku Choudhary

1,529
1
13
22

2

Works great in Windows. – Timo Dec 05 '20 at 18:03
1

Works for mac too. You just need to use `Cmd` + `Shift` + `X` and then the rest is the same. – Matt Croak Jul 29 '21 at 15:22
1

Doesn't work when using a remote SSH environment. – ProfessorKaos64 May 17 '23 at 15:33
@ProfessorKaos64 any solution in remote SSH – BND Sep 01 '23 at 15:05

score 32 · Answer 5 · answered Jan 14 '16 at 22:19

If you would like to have live reload you can use gulp-webserver, which will watch for your file changes and reload page, this way you don't have to press F5 every time on your page:

Here is how to do it:

Open command prompt (cmd) and type

npm install --save-dev gulp-webserver
Enter Ctrl+Shift+P in VS Code and type Configure Task Runner. Select it and press enter. It will open tasks.json file for you. Remove everything from it end enter just following code

tasks.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}

In the root directory of your project add gulpfile.js and enter following code:

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});

Now in VS Code enter Ctrl+Shift+P and type "Run Task" when you enter it you will see your task "webserver" selected and press enter.

Your webserver now will open your page in your default browser. Now any changes that you will do to your HTML or CSS pages will be automatically reloaded.

Here is an information on how to configure 'gulp-webserver' for instance port, and what page to load, ...

You can also run your task just by entering Ctrl+P and type task webserver

I had to run `npm install -g gulp`, `npm install -g gulp-webserver` and add a NODE_PATH environment variable that points to my AppData\npm\node_modules. Then I was able to run the webserver task, however I get a 404 when the browser starts. Any idea what I'm missing? — Kirill Osenkov, Aug 25 '16 at 23:36
Never mind, just had to change the 'app' in your example to '.' (so it serves from the current directory). — Kirill Osenkov, Aug 25 '16 at 23:46
One comment to the answer: If you want to run an html file in yor browser, which will automatic reload on changes, your gulpfile.js should look like this, with a '.' instead of the 'app'. Code = var gulp = require('gulp'), webserver = require('gulp-webserver'); gulp.task('webserver', function () { gulp.src('.') .pipe(webserver({ fallback: 'index.html', livereload: true, open: true })); }); — Friis1978, Jan 27 '17 at 10:43
This is awesome. Thanks for explaining this as a valuable option. I also had apply a little bit of both Krill and Friis's answers to get this working. But it does! — klewis, May 15 '17 at 16:07
I was getting "Cannot GET /" because I copypasted gulpfile.js without configuring the line `gulp.src('app')` so that it actually pointed to my source (which wasn't `/app` but '.'). Works perfect. Thanks! — , Sep 07 '17 at 15:54

score 30 · Answer 6 · answered Mar 29 '17 at 01:23

30

You can now install an extension View In Browser. I tested it on windows with chrome and it is working.

vscode version: 1.10.2

answered Mar 29 '17 at 01:23

Shift 'n Tab

8,808
12
73
117

9

That extension gets horrible reviews. – Jon Crowell Apr 29 '17 at 17:25
This doesn't automatically refresh the browser and this is not what OP is looking for – Jude Niroshan May 25 '17 at 09:20

score 24 · Answer 7 · edited Jan 04 '22 at 16:52

24

Click on this Left-Bottom Manage Icon. Click Extensions or Short Cut Ctrl+Shift+X

Then Search in Extension with this key sentence Open In Default Browser. You will find this Extension. It is better to me.

Now right click on the html file and you will see Open in Default Browser or Short Cut Ctrl+1 to see the html file in browser.

edited Jan 04 '22 at 16:52

TylerH

20,799
66
75
101

answered Apr 18 '20 at 11:22

Mr. Perfectionist

2,605
2
24
35

The shortcut `ctrl+1` overwrites the default `ctrl+1` intelligently, opening a browser when in `html` in explorer, otherwise it sets the cursor in the current `editor`. – Timo May 15 '21 at 10:14

noontz · Answer 8 · 2019-07-10T07:32:42.180

Here is a 2.0.0 version for the current document in Chrome w/ keyboard shortcut:

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "problemMatcher": []
        }
    ]
}

keybindings.json :

{
    "key": "ctrl+g",
    "command": "workbench.action.tasks.runTask",
    "args": "Chrome"
}

For running on a webserver:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

score 20 · Answer 9 · answered Aug 03 '16 at 13:02

20

In linux, you can use the xdg-open command to open the file with the default browser:

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}

answered Aug 03 '16 at 13:02

Loris

1,940
3
19
27

6

Thanks! I'm a Linux user and was feeling lost. I'd like to add that one needs to press `Ctrl + Shift + b` to launch it in the browser. For me, the mnemonic was "b = browser". :-) – ankush981 Mar 03 '17 at 04:34
It works but seems deprecated, if you have an updated version, thank you – Bruno L. Mar 09 '19 at 03:19
Can you leave the version entry here in the tasks.json? – Timo Jan 02 '21 at 17:00

score 17 · Answer 10 · edited Apr 29 '23 at 16:34

There's now an official extension from the VS Code team called Live Preview

Quick setup:

Install the extension from Microsoft.
Open a HTML file from the workspace, files outside current workspace don't work.
Run command Live Preview: Show Preview (External Browser) (livePreview.start.externalPreview.atFile)

There's also a command for launching it in the internal browser: Live Preview: Show Preview (Internal Browser) (livePreview.start.internalPreview.atFile).

You might also need to change the default port from the extension settings in case it's already in use on your system.

Shaiju T · Answer 11 · 2020-09-11T18:05:00.750

I am just re-posting the steps I used from msdn blog. It may help the community.

This will help you to setup a local web server known as lite-server with VS Code, and also guides you to host your static html files in localhost and debug your Javascript code.

1. Install Node.js

If not already installed, get it here

It comes with npm (the package manager for acquiring and managing your development libraries)

2. Create a new folder for your project

Somewhere in your drive, create a new folder for your web app.

3. Add a package.json file to the project folder

Then copy/paste the following text:

{
   "name": "Demo",
   "version": "1.0.0",
   "description": "demo project.",
   "scripts": {
     "lite": "lite-server --port 10001",
     "start": "npm run lite"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "lite-server": "^2.5.4"
   }
}

4. Install the web server

In a terminal window (command prompt in Windows) opened on your project folder, run this command:

npm install

This will install lite-server (defined in package.json), a static server that loads index.html in your default browser and auto refreshes it when application files change.

5. Start the local web server!

(Assuming you have an index.html file in your project folder).

In the same terminal window (command prompt in Windows) run this command:

npm start

Wait a second and index.html is loaded and displayed in your default browser served by your local web server!

lite-server is watching your files and refreshes the page as soon as you make changes to any html, js or css files.

And if you have VS Code configured to auto save (menu File / Auto Save), you see changes in the browser as you type!

Notes:

Do not close the command line prompt until you’re done coding in your app for the day
It opens on http://localhost:10001 but you can change the port by editing the package.json file.

That’s it. Now before any coding session just type npm start and you are good to go!

Originally posted here in msdn blog. Credits goes to Author : @Laurent Duveau

score 5 · Answer 12 · answered Mar 03 '17 at 12:52

If you're just on Mac this tasks.json file:

{
    "version": "0.1.0",
    "command": "open",
    "args": ["${file}"],
}

...is all you need to open the current file in Safari, assuming its extension is ".html".

Create tasks.json as described above and invoke it with ⌘+shift+b.

If you want it to open in Chrome then:

{
    "version": "0.1.0",
    "command": "open",
    "args": ["-a", "Chrome.app", "${file}"],
}

This will do what you want, as in opening in a new tab if the app is already open.

score 4 · Answer 13 · answered Feb 20 '17 at 22:49

For Mac - Opens in Chrome - Tested on VS Code v 1.9.0

Use Command + shift + p to open the Command Palette.

Type in Configure Task Runner, the first time you do this, VS Code will give you the scroll down menu, if it does select "Other." If you have done this before, VS Code will just send you directly to tasks.json.
Once in the tasks.json file. Delete the script displayed and replace it by the following:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}

Switch back to your html file and press Command + Shift + b to view your page in Chrome.

score 4 · Answer 14 · answered Oct 14 '17 at 15:45

4

One click solution simply install open-in-browser Extensions from the Visual Studio marketplace.

answered Oct 14 '17 at 15:45

Manish Sharma

1,670
14
20

Andreas DM · Answer 15 · 2015-05-04T21:08:22.580

2

CTRL+SHIFT+P will bring up the command palette.
Depending on what you're running of course. Example in an ASP.net app you can type in:
>kestrel and then open up your web browser and type in localhost:(your port here).

If you type in > it will show you the show and run commands

Or in your case with HTML, I think F5 after opening the command palette should open the debugger.

Source: link

edited May 04 '15 at 21:08

answered May 04 '15 at 20:49

Andreas DM

10,685
6
35
62

I got this opening http://content.screencast.com/users/Orphydian/folders/3ds%20max/media/000527e5-f14f-477a-9938-b585d47e6449/05.05.2015-00.01.png – May 04 '15 at 21:05

Jose Carlos · Answer 16 · 2015-11-26T20:11:12.137

Openning files in Opera browser (on Windows 64 bits). Just add this lines:

{
"version": "0.1.0",
"command": "opera",
"windows": {
    "command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }

Pay attention to the path format on "command": line. Don't use the "C:\path_to_exe\runme.exe" format.

To run this task, open the html file you want to view, press F1, type task opera and press enter

score 2 · Answer 17 · answered Mar 01 '16 at 13:07

2

my runner script looks like :

{
    "version": "0.1.0",

    "command": "explorer",

    "windows": {
        "command": "explorer.exe"
    },

    "args": ["{$file}"]
}

and it's just open my explorer when I press ctrl shift b in my index.html file

answered Mar 01 '16 at 13:07

Sahar Ben-Shushan

297
1
3
20

score 2 · Answer 18 · answered Nov 11 '16 at 02:15

here is how you can run it in multiple browsers for windows

{
 "version": "0.1.0",
 "command": "cmd",
 "args": ["/C"],
 "isShellCommand": true,
 "showOutput": "always",
 "suppressTaskName": true,
 "tasks": [
     {   
         "taskName": "Chrome",
         "args": ["start chrome -incognito \"${file}\""]
     },
     {   
         "taskName": "Firefox",
         "args": ["start firefox -private-window \"${file}\""]
     },
     {   
         "taskName": "Edge",
         "args": ["${file}"]
     }   
    ]
}

notice that I didn't type anything in args for edge because Edge is my default browser just gave it the name of the file.

EDIT: also you don't need -incognito nor -private-window...it's just me I like to view it in a private window

I was copying only the `tasks` part. the `"args":["/C"]` is what makes this work. Out of curiosity, what does this do? — Ryan B, Jul 04 '17 at 02:44

score 1 · Answer 19 · answered Sep 21 '22 at 20:22

Yet another extension for previewing HTML files, called Live Preview. Couple reasons why I like it over the "Live Server" linked in this answer.

no need to start server, preview icon is integrated to into VS code (same as for mark down preview)
preview is opened within the VS code in split view (although option to open in browser is available)
developed by Microsoft (the same company developing VS code)
currently the "Live Preview" is in "Preview", just prefect :-)

Eliandro · Answer 20 · 2018-02-02T00:27:18.707

Here is the version 2.0.0 for Mac OSx:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    },
    {
      "label":"chrome",
      "type":"process",
      "command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      "args": [
        "${file}"
      ]
    }
  ]
}

score 0 · Answer 21 · answered Jun 28 '20 at 15:18

For Mac, set your tasks.json (in the .vscode folder) file contents to the following and use SHFT+COMMAND+B to open.

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome Preview",
            "type": "shell",
            "command": "open -a /Applications/Google\\ Chrome.app test.html",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

score 0 · Answer 22 · answered Feb 19 '21 at 09:15

0

Following worked in version 1.53.2 on windows 10 ->

choose run active file in terminal menu
It executed the html file in default edge browser

answered Feb 19 '21 at 09:15

Vijay

213
1
9

score 0 · Answer 23 · answered Jan 20 '23 at 23:09

The Live Preview extension has just added (in Insiders Build now and Stable early February 2023) the ability to change the default browser that is opened (when you choose to open it in an external browser rather than as another tab within vscode). See Add option to choose default external browser.

The setting is

Live Preview: Custom External Browser
livePreview.customExternalBrowser

Options: Edge, Chrome, Firefox, none

none will use whatever you have set as your default browser in your operating system. The new setting allows you to override that default setting with another browser for the purposes of the Live Preview extension opening an external browser, via the command:

Live Preview: Show Preview (External Browser)

score -1 · Answer 24 · answered Dec 02 '16 at 20:09

-1

Ctrl + F1 will open the default browser. alternatively you can hit Ctrl + shift + P to open command window and select "View in Browser". The html code must be saved in a file (unsaved code on the editor - without extension, doesn't work)

answered Dec 02 '16 at 20:09

PersyJack

1,736
1
21
32

1

What version of Visual Studio Code are you using? Those commands aren't working in my just-updated 1.8.1. Ctrl+F1 does nothing and I don't have a View in Browser option in the command palette. Maybe you have something beyond the default installed or extra tasks in your tasks.json? – jla Dec 20 '16 at 17:40
I have the same version but I realized I installed an extension for it. It is: https://marketplace.visualstudio.com/items?itemName=qinjia.view-in-browser – PersyJack Jan 03 '17 at 14:01

score -1 · Answer 25 · edited Jan 04 '22 at 16:52

Recently came across this feature in one of the visual studio code tutorial in www.lynda.com

Press Ctrl + K followed by M, it will open the "Select Language Mode" ( or click on the right hand bottom corner that says HTML before that smiley ), type markdown and press enter

Now Press Ctrl + K followed by V, it will open your html in a near by tab.

Tadaaa !!!

Now emmet commands were not working in this mode in my html file, so I went back to the original state ( note - html tag tellisense were working perfectly )

To go to original state - Press Ctrl + K followed by M, select auto-detect. emmet commands started to work. If you are happy with html only viewer, then there is no need for you to come back to the original state.

Wonder why vscode is not having html viewer option by default, when it is able to dispaly the html file in the markdown mode.

The question is about how to view in a browser. – user5389726598465 May 07 '18 at 16:06 — user5389726598465, May 07 '18 at 16:06

score -1 · Answer 26 · answered Jul 01 '19 at 11:54

probably most will be able to find a solution from the above answers but seeing as how none worked for me (vscode v1.34) i thought i'd share my experience. if at least one person finds it helpful then, cool not a wasted post, amiirte?

anyway, my solution (windows) is built a-top of @noontz's. his configuration may have been sufficient for older versions of vscode but not with 1.34 (at least, i couldn't get it working ..).

our configs are nearly identical save a single property -- that property being, the group property. i'm not sure why but without this, my task would not even appear in the command palette.

so. a working tasks.json for windows users running vscode 1.34:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

note that the problemMatcher property is not required for this to work but without it an extra manual step is imposed on you. tried to read the docs on this property but i'm too thick to understand. hopefully someone will come about and school me but yeah, thanks in advance for that. all i know is -- include this property and ctrl+shift+b opens the current html file in a new chrome tab, hassle free.

easy.

score -1 · Answer 27 · answered Sep 02 '19 at 22:28

Open custom Chrome with URL from prompt

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open Chrome",
      "type": "process",
      "windows": {
        "command": "${config:chrome.executable}"
      },
      "args": ["--user-data-dir=${config:chrome.profileDir}", "${input:url}"],
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "url",
      "description": "Which URL?",
      "default": "http://localhost:8080",
      "type": "promptString"
    }
  ]
}

Open custom Chrome with active file

{
  "label": "Open active file in Chrome",
  "type": "process",
  "command": "chrome.exe",
  "windows": {
    "command": "${config:chrome.executable}"
  },
  "args": ["--user-data-dir=${config:chrome.profileDir}", "${file}"],
  "problemMatcher": []
},

Notes

if necessary, replace windows property by other OS
replace ${config:chrome.executable} with your custom chrome location, e.g. "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
replace ${config:chrome.profileDir} with your custome chrome profile directory, e.g. "C:/My/Data/chrome/profile" or leave it out
You can keep the variables like above if you want. To do so, add following entries in settings.json - user or workspace - , adjust paths to your needs:

"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"

You could re-use these variables e.g. in launch.json for debugging purposes: "runtimeExecutable": "${config:chrome.executable}"

score -1 · Answer 28 · answered Jan 16 '21 at 20:11

VSCode Task - Open by App bundle identifier (macOS only).

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open In: Firefox DE",
      "type": "process",
      "command": "open",
      "args": ["-b", "org.mozilla.firefoxdeveloperedition", "${file}"],
      "group": "build",
      "problemMatcher": [],
      "presentation": {
        "panel": "shared",
        "focus": false,
        "clear": true,
        "reveal": "never",
      }
    }
  ]
}

score -2 · Answer 29 · answered Sep 09 '21 at 18:34

-2

Start the local web server!

(Assuming you have an index.html file in your project folder).

In the same terminal window (command prompt in Windows) run this command:

npm start

answered Sep 09 '21 at 18:34

Bayram Binbir

1,531
11
11

How to view an HTML file in the browser with Visual Studio Code

29 Answers29

Open custom Chrome with URL from prompt

Open custom Chrome with active file

Notes

Linked

Related