blocks|key|4509476|text|@InvisibleDev+-要让它在mac上运行，请尝试使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4509477|{
++++"version":+"0.1.0",
++++"command":+"Chrome",
++++"osx":+{
++++++++"command":+"/Applications/Google+Chrome.app/Contents/MacOS/Google+Chrome"
++++},
++++"args":+[
++++++++"${file}"
++++]
}|code-block|syntax|javascript|4509478|如果你已经打开了chrome，它会在一个新的标签中启动你的html文件。|4509479|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

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

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

blocks|key|1917|text|我的runner脚本如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1918|{
++++"version":+"0.1.0",

++++"command":+"explorer",

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

++++"args":+["{$file}"]
}|code-block|syntax|javascript|1919|当我在index.html文件中按下ctrl+b键时，它就会打开我的资源管理器|1920|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

my runner script looks like : 

<pre><code>{
 "version": "0.1.0",

 "command": "explorer",

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

 "args": ["{$file}"]
}
</code></pre>

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

blocks|key|1973|text|在linux中，您可以使用xdg-open命令在默认浏览器中打开文件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1974|{
++++"version":+"0.1.0",
++++"linux":+{
++++++++"command":+"xdg-open"
++++},
++++"isShellCommand":+true,
++++"showOutput":+"never",
++++"args":+["${file}"]
}|code-block|syntax|javascript|1975|entityMap|0|LINK|mutability|MUTABLE|url|https://askubuntu.com/questions/15354/how-to-open-file-with-default-application-from-command-line#15356^0|D|8|D|8|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

In linux, you can use the <a href="https://askubuntu.com/questions/15354/how-to-open-file-with-default-application-from-command-line#15356"><code>xdg-open</code></a> command to open the file with the default browser:

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

blocks|key|2018|text|下面是如何在windows的多个浏览器中运行它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2019|{
+"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}"]
+++++}+++
++++]
}|code-block|syntax|javascript|2020|请注意，我没有在args中为edge键入任何内容，因为Edge是我的默认浏览器，只是为它提供了文件名。|2021|编辑:你也不需要-incognito或-+private+-+window…只有我，我喜欢在一个私有窗口中查看|2022|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<pre><code>{
 "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}"]
 } 
 ]
}
</code></pre>

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

blocks|key|4509591|text|Ctrl+%2B+F1将打开默认浏览器。或者，您可以点击Ctrl+%2B+shift+%2BP打开命令窗口，然后选择“在浏览器中查看”。html代码必须保存在一个文件中(编辑器中未保存的代码-没有扩展名，不起作用)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4509592|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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)

blocks|key|2127|text|现在可以安装扩展View+In+Browser了。我用chrome在windows上测试了它，它正在工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2128|vscode版本:+1.10.2|2129|​|2130|📷|atomic|2131|2132|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items?itemName=qinjia.view-in-browser|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/9e9063faf367dcbbc63ac70427c6d5d0.png|imageAlt^0|8|F|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|K|3|G|5|6|7|19|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|U|P|V|C|$W|X|Y|-4]]]]

You can now install an extension <a href="https://marketplace.visualstudio.com/items?itemName=qinjia.view-in-browser" rel="noreferrer">View In Browser</a>. I tested it on windows with chrome and it is working.

vscode version: 1.10.2

<a href="https://i.stack.imgur.com/2gTaO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2gTaO.png" alt="enter image description here"></a>

blocks|key|2188|text|以下是Chrome中当前文档的2.0.0版本，带有键盘快捷键：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2189|tasks.json|offset|length|style|CODE|2190|{
++++"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":+[]
++++++++}
++++]
}|code-block|syntax|javascript|2191|keybindings.json：|2192|{
++++"key":+"ctrl%2Bg",
++++"command":+"workbench.action.tasks.runTask",
++++"args":+"Chrome"
}|2193|对于在For服务器上运行：|2194|https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer|2195|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|A|0|0|0|G|0|0|0|0|21|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@$D|13|E|14|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|T]]]]

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

<code>tasks.json</code>

<pre><code>{
 "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": []
 }
 ]
}
</code></pre>

<code>keybindings.json</code> :

<pre><code>{
 "key": "ctrl+g",
 "command": "workbench.action.tasks.runTask",
 "args": "Chrome"
}
</code></pre>

For running on a webserver:

<a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" rel="noreferrer">https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer</a>

blocks|key|2204|text|单击解决方案只需从Visual+Studio+marketplace安装open-in-browser扩展即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2205|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser^0|10|F|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

One click solution simply install <a href="https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser" rel="noreferrer">open-in-browser</a> Extensions from the Visual Studio marketplace.

blocks|key|4509725|text|最近在www.lynda.com的一个visual+studio代码教程中遇到了这个特性。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4509726|按Ctrl+%2BK，然后按M，将打开“选择语言模式”(或单击右下角，在笑脸符号前显示HTML+)，键入markdown并按enter键|4509727|现在按Ctrl+%2BK，然后按V，它将在附近的选项卡中打开您的html。|4509728|Tadaaa！|4509729|现在emmet命令在我的html文件中不能在这种模式下工作，所以我回到了最初的状态(注意-+html+tag+tellisense工作得很好)。|4509730|要转到原始状态，请按Ctrl+%2BK，然后按M，然后选择自动检测。emmet命令开始工作。如果你对只有html格式的查看器感到满意，那么你就没有必要回到原来的状态。|4509731|想知道为什么vscode在默认情况下没有html查看器选项，而它能够在markdown模式下显示html文件。|4509732|无论如何，这是很酷的。快乐vscoding+:)|4509733|entityMap|0|LINK|mutability|MUTABLE|url|http://www.lynda.com/^0|3|D|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|17|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|18|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|19|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

Recently came across this feature in one of the visual studio code tutorial in <a href="http://www.lynda.com" rel="nofollow noreferrer">www.lynda.com</a>

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.

Anyway it is cool. Happy vscoding :)

blocks|key|2234|text|以下是用于Mac+OSx的2.0.0版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2235|{
++//+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}"
++++++]
++++}
++]
}|code-block|syntax|javascript|2236|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is the version 2.0.0 for Mac OSx:

<pre><code>{
 // 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}"
 ]
 }
 ]
}
</code></pre>

blocks|key|2261|text|对于Mac，将您的tasks.json+(在.vscode文件夹中)文件内容设置为以下内容，然后使用SHFT%2BCOMMAND%2BB打开。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2262|{
++++"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
++++++++++++}
++++++++}
++++]
}|code-block|syntax|javascript|2263|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For Mac, set your tasks.json (in the .vscode folder) file contents to the following and use SHFT+COMMAND+B to open.
<pre><code>{
 &quot;version&quot;: &quot;2.0.0&quot;,
 &quot;tasks&quot;: [
 {
 &quot;label&quot;: &quot;Chrome Preview&quot;,
 &quot;type&quot;: &quot;shell&quot;,
 &quot;command&quot;: &quot;open -a /Applications/Google\\ Chrome.app test.html&quot;,
 &quot;problemMatcher&quot;: [],
 &quot;group&quot;: {
 &quot;kind&quot;: &quot;build&quot;,
 &quot;isDefault&quot;: true
 }
 }
 ]
}
</code></pre>

blocks|key|2315|text|VSCode任务-按应用程序捆绑包标识符打开(仅限macOS)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2316|{
++"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",
++++++}
++++}
++]
}|code-block|syntax|javascript|2317|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

VSCode Task - Open by App bundle identifier (macOS only).
<pre class="lang-json prettyprint-override"><code>{
 &quot;version&quot;: &quot;2.0.0&quot;,
 &quot;tasks&quot;: [
 {
 &quot;label&quot;: &quot;Open In: Firefox DE&quot;,
 &quot;type&quot;: &quot;process&quot;,
 &quot;command&quot;: &quot;open&quot;,
 &quot;args&quot;: [&quot;-b&quot;, &quot;org.mozilla.firefoxdeveloperedition&quot;, &quot;${file}&quot;],
 &quot;group&quot;: &quot;build&quot;,
 &quot;problemMatcher&quot;: [],
 &quot;presentation&quot;: {
 &quot;panel&quot;: &quot;shared&quot;,
 &quot;focus&quot;: false,
 &quot;clear&quot;: true,
 &quot;reveal&quot;: &quot;never&quot;,
 }
 }
 ]
}
</code></pre>

blocks|key|2370|text|启动本地web服务器！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2371|(假设您的项目文件夹中有一个index.html文件)。|2372|在同一终端窗口(Windows中的命令提示符)中，运行以下命令：|2373|npm启动|2374|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

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

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?

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何使用新的Microsoft Visual Studio代码在浏览器中查看HTML代码？使用Notepad++，您可以选择在浏览器中运行。我如何用Visual Studio代码做同样的事情？

问如何使用Visual Studio代码在浏览器中查看HTML文件
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Visual Studio代码在浏览器中查看HTML文件EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Visual Studio代码在浏览器中查看HTML文件
EN