[英]How to view an HTML file in the browser with Visual Studio Code
How can I view my HTML code in a browser with the new Microsoft Visual Studio Code?如何使用新的 Microsoft Visual Studio Code 在浏览器中查看我的 HTML 代码?
With Notepad++ you have the option to Run in a browser.使用 Notepad++,您可以选择在浏览器中运行。 How can I do the same thing with Visual Studio Code?我怎样才能用 Visual Studio Code 做同样的事情?
For Windows - Open your Default Browser - Tested on VS Code v 1.1.0对于 Windows - 打开你的默认浏览器 - 在 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.使用ctrl + shift + p (或F1 )打开命令面板。
Type in Tasks: Configure Task
or on older versions Configure Task Runner
.输入Tasks: Configure Task
或在旧版本上Configure Task Runner
。 Selecting it will open the tasks.json file.选择它会打开tasks.json文件。 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.请记住将 tasks.json 文件的“args”部分更改为您的文件名。 This will always open that specific file when you hit F5.当您按 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".您还可以通过使用["${file}"]
作为 "args" 的值来设置 this 以打开您当时打开的任何文件。 Note that the $
goes outside the {...}
, so ["{$file}"]
is incorrect.请注意, $
在{...}
,因此["{$file}"]
不正确。
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.切换回您的 html 文件(在本例中为“text.html”),然后按ctrl + shift + b在您的 Web 浏览器中查看您的页面。
VS Code has a Live Server Extention that support one click launch from status bar. VS Code 有一个Live Server Extension ,支持从状态栏一键启动。
Some of the features:一些功能:
@InvisibleDev - to get this working on a mac trying using this: @InvisibleDev - 要在尝试使用此功能的 mac 上实现此功能:
{
"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.如果您已经打开了 chrome,它将在新选项卡中启动您的 html 文件。
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:如果您想实时重新加载,您可以使用 gulp-webserver,它将监视您的文件更改并重新加载页面,这样您就不必每次在页面上按 F5:
Here is how to do it:这是如何做到的:
Open command prompt (cmd) and type打开命令提示符(cmd)并输入
npm install --save-dev gulp-webserver npm install --save-dev gulp-webserver
Enter Ctrl+Shift+P in VS Code and type Configure Task Runner .在 VS Code 中输入Ctrl+Shift+P并输入Configure Task Runner 。 Select it and press enter.选择它并按回车键。 It will open tasks.json file for you.它将为您打开 tasks.json 文件。 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"
}
]
}
gulpfile.js gulpfile.js
var gulp = require('gulp'),
webserver = require('gulp-webserver');
gulp.task('webserver', function () {
gulp.src('app')
.pipe(webserver({
livereload: true,
open: true
}));
});
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.现在,您对 HTML 或 CSS 页面所做的任何更改都将自动重新加载。
Here is an information on how to configure 'gulp-webserver' for instance port, and what page to load, ...这是有关如何配置“gulp-webserver”的信息,例如端口,以及要加载的页面,...
You can also run your task just by entering Ctrl+P and type task webserver您也可以通过输入Ctrl+P并输入task webserver来运行您的任务
You can now install an extension View In Browser .您现在可以安装扩展View In Browser 。 I tested it on windows with chrome and it is working.我在带有 chrome 的 Windows 上对其进行了测试,并且可以正常工作。
vscode version: 1.10.2 vscode 版本:1.10.2
Open Extensions Sidebar ( Ctrl + Shift + X )打开扩展侧边栏 ( Ctrl + Shift + X )
Search for open in browser and install it 在浏览器中搜索打开并安装
Right click on your html file, and select "Open in Browser" ( Alt + B )右键单击您的 html 文件,然后选择“在浏览器中打开”( Alt + B )
Here is a 2.0.0 version for the current document in Chrome w/ keyboard shortcut:这是 Chrome 中当前文档的 2.0.0 版本,带有键盘快捷键:
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
: 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 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Updated Answer in 18 April, 2020 2020 年 4 月 18 日更新的答案
Click on this Left-Bottom Manage Icon.单击此左下角管理图标。 Click Extensions or Short Cut Ctrl+Shift+X
单击扩展或快捷方式Ctrl+Shift+X
Then Search in Extension with this key sentence Open In Default Browser .然后用这个关键句子在扩展中搜索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.现在右键单击html
文件,您将看到在默认浏览器中打开或快捷键Ctrl+1
以在浏览器中查看html
文件。
I am just re-posting the steps I used from msdn
blog.我只是重新发布我从msdn
博客中使用的步骤。 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.这将帮助您使用VS Code
设置称为lite-server的本地 Web 服务器,并指导您在localhost
托管静态html
文件并debug
您的Javascript
代码。
1. Install Node.js 1. 安装 Node.js
If not already installed, get it here如果尚未安装,请在此处获取
It comes with npm (the package manager for acquiring and managing your development libraries)它带有 npm(用于获取和管理开发库的包管理器)
2. Create a new folder for your project 2.为您的项目创建一个新文件夹
Somewhere in your drive, create a new folder for your web app.在驱动器中的某个位置,为您的 Web 应用程序创建一个新文件夹。
3. Add a package.json file to the project folder 3.在项目文件夹中添加package.json文件
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 4. 安装网络服务器
In a terminal window (command prompt in Windows) opened on your project folder, run this command:在项目文件夹上打开的终端窗口(Windows 中的命令提示符)中,运行以下命令:
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.这将安装 lite-server(在 package.json 中定义),这是一个静态服务器,它在您的默认浏览器中加载 index.html 并在应用程序文件更改时自动刷新它。
5. Start the local web server! 5.启动本地web服务器!
(Assuming you have an index.html file in your project folder). (假设您的项目文件夹中有一个 index.html 文件)。
In the same terminal window (command prompt in Windows) run this command:在同一个终端窗口(Windows 中的命令提示符)中运行以下命令:
npm start
Wait a second and index.html is loaded and displayed in your default browser served by your local web server!稍等片刻,index.html 已加载并显示在由本地 Web 服务器提供的默认浏览器中!
lite-server is watching your files and refreshes the page as soon as you make changes to any html, js or css files. lite-server 正在监视您的文件并在您对任何 html、js 或 css 文件进行更改后立即刷新页面。
And if you have VS Code configured to auto save (menu File / Auto Save), you see changes in the browser as you type!如果您将 VS Code 配置为自动保存(菜单文件/自动保存),您会在键入时在浏览器中看到更改!
Notes:笔记:
That's it.就是这样。 Now before any coding session just type npm start and you are good to go!现在在任何编码会话之前只需键入 npm start 就可以开始了!
Originally posted here in msdn
blog.原帖在这里在msdn
博客。 Credits goes to Author : @Laurent Duveau
致谢作者: @Laurent Duveau
If you're just on Mac this tasks.json
file:如果你只是在 Mac 上使用这个tasks.json
文件:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
...is all you need to open the current file in Safari, assuming its extension is ".html". ...就是在 Safari 中打开当前文件所需的全部内容,假设其扩展名为“.html”。
Create tasks.json
as described above and invoke it with ⌘ + shift + b .如上所述创建tasks.json
并使用⌘ + shift + b调用它。
If you want it to open in Chrome then:如果您希望它在 Chrome 中打开,则:
{
"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.这将执行您想要的操作,就像在应用程序已打开的情况下在新选项卡中打开一样。
For Mac - Opens in Chrome - Tested on VS Code v 1.9.0对于 Mac - 在 Chrome 中打开 - 在 VS Code v 1.9.0 上测试
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."键入 Configure Task Runner,第一次执行此操作时,VS Code 将为您提供向下滚动菜单,如果确实选择了“其他”。 If you have done this before, VS Code will just send you directly to tasks.json.如果你以前这样做过,VS Code 只会直接将你发送到 tasks.json。
Once in the tasks.json file.一旦在 tasks.json 文件中。 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}"] }
一键式解决方案只需从 Visual Studio 市场安装浏览器中打开的扩展。
There's now an official extension from the VS Code team called "Live Preview" VS Code 团队现在有一个名为“Live Preview”的官方扩展
Quick setup:快速设置:
> Live Preview: Show Preview (External Browser)
运行命令> Live Preview: Show Preview (External Browser)
There's also a command for launching it in the internal browser.还有一个命令可以在内部浏览器中启动它。 You might also need to change the default port from the extension settings in case it's already in use on your system.您可能还需要更改扩展设置中的默认端口,以防它已在您的系统上使用。
Documentation: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server文档: https : //marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
Release notes: https://code.visualstudio.com/updates/v1_59#_live-preview发行说明: https : //code.visualstudio.com/updates/v1_59#_live-preview
CTRL+SHIFT+P
will bring up the command palette. CTRL+SHIFT+P
将调出命令面板。
Depending on what you're running of course.当然,这取决于您正在运行的内容。 Example in an ASP.net app you can type in:您可以在 ASP.net 应用程序中输入的示例:
>kestrel
and then open up your web browser and type in localhost:(your port here)
. >kestrel
然后打开您的网络浏览器并输入localhost:(your port here)
。
If you type in >
it will show you the show and run commands如果你输入>
它会显示你的show 和 run 命令
Or in your case with HTML, I think F5
after opening the command palette should open the debugger.或者在您使用 HTML 的情况下,我认为打开命令面板后F5
应该打开调试器。
Openning files in Opera browser (on Windows 64 bits).在 Opera 浏览器中打开文件(在 Windows 64 位上)。 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.注意“command”:行上的路径格式。 Don't use the "C:\\path_to_exe\\runme.exe" format.不要使用“C:\\path_to_exe\\runme.exe”格式。
To run this task, open the html file you want to view, press F1, type task opera and press enter要运行此任务,请打开要查看的 html 文件,按 F1,键入taskopera并按 Enter
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当我在 index.html 文件中按 ctrl shift b 时,它只是打开我的资源管理器
here is how you can run it in multiple browsers for windows这是在 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.请注意,我没有在 args 中为 edge 输入任何内容,因为 Edge 是我的默认浏览器,只是给了它文件名。
EDIT: also you don't need -incognito nor -private-window...it's just me I like to view it in a private window编辑:你也不需要 -incognito 和 -private-window ......只是我喜欢在私人窗口中查看它
Recently came across this feature in one of the visual studio code tutorial in www.lynda.com最近在www.lynda.com 的一个 Visual Studio 代码教程中遇到了这个功能
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按 Ctrl + K 然后按 M,它将打开“选择语言模式”(或单击右下角那个笑脸前面的 HTML),输入 markdown 并按 Enter
Now Press Ctrl + K followed by V, it will open your html in a near by tab.现在按 Ctrl + K 然后按 V,它将在附近的选项卡中打开您的 html。
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 )现在 emmet 命令在我的 html 文件中无法在这种模式下工作,所以我回到了原始状态(注意 - html 标签tellisense 工作正常)
To go to original state - Press Ctrl + K followed by M, select auto-detect.要进入原始状态 - 按 Ctrl + K 然后按 M,选择自动检测。 emmet commands started to work. emmet 命令开始工作。 If you are happy with html only viewer, then there is no need for you to come back to the original state.如果您对仅使用 html 的查看器感到满意,那么您无需返回原始状态。
Wonder why vscode is not having html viewer option by default, when it is able to dispaly the html file in the markdown mode.想知道为什么 vscode 默认没有 html 查看器选项,当它能够在降价模式下显示 html 文件时。
Anyway it is cool.无论如何它很酷。 Happy vscoding :)快乐的 vscoding :)
Here is the version 2.0.0 for Mac OSx:这是 Mac OSx 的 2.0.0 版:
{
// 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}"
]
}
]
}
For Mac, set your tasks.json (in the .vscode folder) file contents to the following and use SHFT+COMMAND+B to open.对于 Mac,将您的 tasks.json(在 .vscode 文件夹中)文件内容设置为以下内容并使用 SHFT+COMMAND+B 打开。
{
"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
}
}
]
}
Following worked in version 1.53.2 on windows 10 ->以下在 Windows 10 上的 1.53.2 版中工作 ->
Ctrl + F1 will open the default browser. Ctrl + F1 将打开默认浏览器。 alternatively you can hit Ctrl + shift + P to open command window and select "View in Browser".或者,您可以按 Ctrl + shift + P 打开命令窗口并选择“在浏览器中查看”。 The html code must be saved in a file (unsaved code on the editor - without extension, doesn't work) html 代码必须保存在文件中(编辑器上未保存的代码 - 没有扩展名,不起作用)
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.可能大多数人都能从上述答案中找到解决方案,但看到没有一个对我vscode v1.34
( vscode v1.34
),我想我会分享我的经验。 if at least one person finds it helpful then, cool not a wasted post, amiirte ?如果至少有人觉得它有帮助,那么酷不是一个浪费的帖子, amiirte ?
anyway, my solution ( windows
) is built a-top of @noontz's.无论如何,我的解决方案( windows
)是在@noontz 的基础上构建的。 his configuration may have been sufficient for older versions of vscode
but not with 1.34
(at least, i couldn't get it working ..).他的配置对于旧版本的vscode
可能已经足够了,但对于1.34
不够(至少,我无法让它工作......)。
our configs are nearly identical save a single property -- that property being, the group
property.除了单个属性之外,我们的配置几乎相同——该属性是group
属性。 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
: tasks.json
于运行vscode 1.34
windows
用户的有效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.请注意,此操作problemMatcher
属性,但如果没有它,则需要额外的手动步骤。 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.我所知道的是——包括这个属性, ctrl+shift+b
在一个新的chrome
选项卡中打开当前的html
文件,轻松自如。
easy.简单。
{
"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"
}
]
}
{
"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": []
},
windows
property by other OS如有必要,用其他操作系统替换windows
属性${config:chrome.executable}
with your custom chrome location, eg "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
将${config:chrome.executable}
替换${config:chrome.executable}
您的自定义 chrome 位置,例如"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
${config:chrome.profileDir}
with your custome chrome profile directory, eg "C:/My/Data/chrome/profile"
or leave it out将${config:chrome.profileDir}
替换${config:chrome.profileDir}
您的自定义 chrome 配置文件目录,例如"C:/My/Data/chrome/profile"
或将其省略settings.json
- user or workspace - , adjust paths to your needs:为此,请在settings.json
- user 或 workspace - 中添加以下条目,根据需要调整路径:"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
launch.json
for debugging purposes: "runtimeExecutable": "${config:chrome.executable}"
您可以重新使用这些变量,例如在launch.json
用于调试目的: "runtimeExecutable": "${config:chrome.executable}"
VSCode Task - Open by App bundle identifier (macOS only). VSCode 任务 - 按应用程序包标识符打开(仅限 macOS)。
{
"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",
}
}
]
}
Yet another extension for previewing HTML files, called Live Preview .另一个用于预览 HTML 文件的扩展名为Live Preview 。 Couple reasons why I like it over the "Live Server" linked in this answer .我喜欢这个答案中链接的“实时服务器”的几个原因。
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). Live Preview
扩展刚刚添加(在 Insiders Build now 和 Stable 2023 年 2 月初)更改打开的默认浏览器的能力(当您选择在外部浏览器中打开它而不是作为 vscode 中的另一个选项卡时)。 See Add option to choose default external browser .请参阅添加选项以选择默认外部浏览器。
The setting is设置是
Live Preview: Custom External Browser
livePreview.customExternalBrowser
Options: Edge, Chrome, Firefox, none选项:Edge、Chrome、Firefox、无
none
will use whatever you have set as your default browser in your operating system. none
将使用您在操作系统中设置为默认浏览器的任何内容。 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:新设置允许您使用另一个浏览器覆盖该default
设置,以便通过以下命令打开外部浏览器的Live Preview
扩展:
Live Preview: Show Preview (External Browser)
Start the local web server!启动本地网络服务器!
(Assuming you have an index.html file in your project folder). (假设您的项目文件夹中有一个 index.html 文件)。
In the same terminal window (command prompt in Windows) run this command:在同一个终端窗口(Windows 中的命令提示符)中运行以下命令:
npm start启动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.