【VScode】VScode 浏览器预览HTML （windows+ubuntu+OS X平台）

最新推荐文章于 2025-06-21 09:30:12 发布

修行的猫_zq

最新推荐文章于 2025-06-21 09:30:12 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VScode 文章标签： javascript vscode

本文链接：https://blog.youkuaiyun.com/sinat_17196995/article/details/54809644

VScode 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了在Windows、Ubuntu和Mac OS X平台上，如何使用Visual Studio Code（VScode）配置浏览器预览HTML文件的步骤。通过编辑tasks.json文件并设置相应命令，可以快速实现使用Chrome浏览器预览HTML的功能。只需按Ctrl+Shift+B快捷键，即可在VScode中直接预览HTML页面。

最近开始学习javascript，工具选择了vscode，这里记录学习中遇到的问题和解决方案，备日后查看。

一、windows下使用vscode 配置浏览器预览html文件：
第一步：打开tasks.json文件
ctrl+shift+p 输入 tasks
下拉菜单显示出：Configure Tasks Runner 选中并回车
这里写图片描述
然后在出现的下拉菜单中选择 Others
就会出现tasks.json

第二步：修改文件
我用的是chrome浏览器，以此为例：

{
     See httpsgo.microsoft.comfwlinkLinkId=733558
     for the documentation about the tasks.json format
    version 0.1.0,
    command chrome,
    windows {
        command CProgram Files (x86)GoogleChromeApplicationchrome.exe 
        你浏览器的exe路径
    },
    isShellCommand true,
    args [
        ${file}
    ],
    showOutput always
}

第三步：测试html
执行完以上两个步骤之后，在vscode中打开你要预览的html文件，使用快捷键
ctrl+shift+b 即可看到界面。

二、ubuntu下使用vscode 配置浏览器预览html文件
1、3 步骤同windows下，第二步修改json文件为：（也是以google chrome为例）

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "google-chrome",
    "isShellCommand": true,
    "args": ["${file}"],
    "showOutput": "never"
}

三Mac下使用vscode 浏览器预览html文件
快捷键command+⇧+P：输入tasks，选择Configure Default Build Task
然后选择open task.json file

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