首页 文章

如何使用Visual Studio Code在浏览器中查看我的HTML代码?

提问于
浏览 62
175

如何使用新的Microsoft Visual Studio代码在浏览器中查看我的HTML代码?

使用记事本,您可以选择在浏览器中运行 . 如何使用Visual Studio Code执行相同的操作?

19 回答

  • 167

    Ctrl F1将打开默认浏览器 . 或者,您可以按Ctrl Shift P打开命令窗口并选择“在浏览器中查看” . html代码必须保存在文件中(编辑器中未保存的代码 - 没有扩展名,不起作用)

  • 66

    对于Windows - 打开默认浏览器 - 在VS Code v 1.1.0上测试

    回答打开特定文件(名称是硬编码)或打开任何其他文件 .

    Steps:

    • 使用ctrl shift p(或F1)打开命令选项板 .

    • 输入 Configure Task Runner . 选择它将打开 tasks.json 文件 . 删除显示的脚本并将其替换为以下内容:

    {
        "version": "0.1.0",
        "command": "explorer",    
        "windows": {
            "command": "explorer.exe"
        },
        "args": ["test.html"]
    }
    

    请记住将tasks.json文件的“args”部分更改为文件名 . 当你点击F5时,这将始终打开该特定文件 .

    您也可以将此设置为打开当时打开的文件,方法是使用 ["${file}"] 作为"args"的值 . 请注意 $ 超出 {...} ,因此 ["{$file}"] 不正确 .

    • 保存文件 .

    • 切换回您的html文件(在此示例中为"text.html"),然后按ctrl shift b在Web浏览器中查看您的页面 .

    enter image description here

  • 39

    以下是如何在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}"]
         }   
        ]
    }
    

    请注意,我没有在args中输入任何东西,因为Edge是我的默认浏览器,只是给了它文件的名称 .

    编辑:你也不需要-incognito也不需要-private-window ...只是我喜欢在私人窗口中查看它

  • 31

    我只是重新发布我在 msdn 博客中使用的步骤 . 它可能有助于社区 .

    这将帮助您设置一个名为lite-server的本地Web服务器 VS Code ,并指导您在 localhostdebug Javascript 代码中托管静态 html 文件 .

    1. Install Node.js

    如果尚未安装,请获取here

    它带有npm(用于获取和管理开发库的包管理器)

    2. Create a new folder for your project

    在驱动器的某个位置,为您的Web应用程序创建一个新文件夹 .

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

    然后复制/粘贴以下文本:

    {
       "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": "^1.3.1"
       }
    }
    

    4. Install the web server

    在项目文件夹上打开的终端窗口(Windows中的命令提示符)中,运行以下命令:

    npm install
    

    这将安装lite-server(在package.json中定义),这是一个静态服务器,它在您的默认浏览器中加载index.html,并在应用程序文件更改时自动刷新它 .

    5. Start the local web server!

    (假设您的项目文件夹中有一个index.html文件) .

    在同一个终端窗口(Windows中的命令提示符)中运行以下命令:

    npm start
    

    等一下,index.html加载并显示在本地Web服务器提供的默认浏览器中!

    lite-server正在监视您的文件,并在您对任何html,js或css文件进行更改后立即刷新页面 .

    如果您将VS Code配置为自动保存(菜单文件/自动保存),您在键入时会看到浏览器中的更改!

    Notes:

    • 在完成编码之前,请不要关闭命令行提示符在你的应用程序中的一天

    • 它在http://localhost:10001上打开,但您可以通过编辑package.json文件来更改端口 .

    而已 . 现在在任何编码会话之前只需输入npm start就可以了!

    最初在 msdn 博客中发布here . 积分转到作者: @Laurent Duveau

  • 18

    以下是适用于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}"
          ]
        }
      ]
    }
    
  • 15

    这是Chrome w /键盘快捷键中当前文档的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

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

    要在默认浏览器中的Web服务器上运行:npm install http-server -g

    {
        "label": "Run on webserver",
        "type": "shell",
        "command": "http-server",
        "args": [
            "${file}",
            "-p",
            "8080",
            "-c-1",
            "-o"
        ],
        "problemMatcher": []
    }
    

    按终端中的CTRL C关闭服务器

  • 10

    您现在可以安装扩展View In Browser . 我在带有铬的窗户上测试它,它正在工作 .

    vscode版本:1.10.2

    enter image description here

  • 5

    在linux中,您可以使用xdg-open命令使用默认浏览器打开文件:

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

    你不能 . Visual Studio不适用于Web设计或开发 . 你必须编写一些代码来使它工作 .

  • 2

    VS Code有一个Live Server Extention,支持从状态栏单击启动 .

    一些功能:

    • 从状态栏单击“启动”

    • Live Reload

    • 支持Chrome调试附件

    enter image description here

  • 2

    我的跑步者脚本看起来像:

    {
        "version": "0.1.0",
    
        "command": "explorer",
    
        "windows": {
            "command": "explorer.exe"
        },
    
        "args": ["{$file}"]
    }
    

    当我在index.html文件中按ctrl shift b时,它只是打开我的资源管理器

  • 2

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

    • 使用命令shift p打开命令选项板 .

    enter image description here

    • 输入配置任务运行器,第一次执行此操作时,如果确实选择“其他”,VS代码将为您提供向下滚动菜单 . 如果您之前已经完成此操作,VS Code将直接发送给tasks.json .

    • 一旦进入tasks.json文件 . 删除显示的脚本并将其替换为以下内容:

    {
    “版本”:“0.1.0”,
    “命令”:“Chrome”,
    “osx”:{
    “command”:“/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome”
    },
    “args”:[“$ ”]
    }

    • 切换回您的html文件,然后按Command Shift b在Chrome中查看您的页面 .
  • 2

    单击解决方案只需从Visual Studio市场安装open-in-browser Extensions即可 .

  • 2

    最近在www.lynda.com中的一个visual studio代码教程中遇到了这个功能

    按Ctrl K,然后按M,它将打开“选择语言模式”(或点击右下角,在该笑脸之前显示HTML),键入markdown并按Enter键

    现在按Ctrl K后跟V,它会在附近的选项卡中打开你的html .

    Tadaaa !!!

    现在emmet命令在我的html文件中没有在这种模式下工作,所以我回到了原始状态(注意 - html标签tellisense工作正常)

    要进入原始状态 - 按Ctrl K,然后按M,选择自动检测 . emmet命令开始工作 . 如果您对仅使用html的查看器感到满意,则无需返回原始状态 .

    想知道为什么vscode默认情况下没有html viewer选项,当它能够在降价模式下显示html文件时 .

    无论如何它很酷 . 快乐vscoding :)

  • 1

    @InvisibleDev - 尝试使用此方法在mac上运行:

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

    如果您已经打开了chrome,它将在新选项卡中启动您的html文件 .

  • 1

    如果你只是在Mac上这个 tasks.json 文件:

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

    ...就是你需要在Safari中打开当前文件,假设它的扩展名为“.html” .

    如上所述创建 tasks.json 并使用⌘shiftb调用它 .

    如果您希望它在Chrome中打开,请:

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

    如果应用程序已经打开,这将执行您想要的操作,就像在新选项卡中打开一样 .

  • 0

    如果您想要实时重新加载,可以使用gulp-webserver,它会监视您的文件更改和重新加载页面,这样您就不必每次都在页面上按F5:

    这是怎么做的:

    • 打开命令提示符(cmd)并键入

    npm install --save-dev gulp-webserver

    • 在VS代码中输入 Ctrl+Shift+P 并键入 Configure Task Runner . 选择它并按Enter键 . 它会为你打开tasks.json文件 . 从中删除所有内容只需输入以下代码即可

    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
            }));
    });
    
    • 现在在VS代码中输入 Ctrl+Shift+P 并在输入时输入"Run Task",您将看到您的任务"webserver"已选中并按Enter键 .

    您的网络服务器现在将在默认浏览器中打开您的页面 . 现在,您将对HTML或CSS页面所做的任何更改将自动重新加载 .

    以下是有关如何配置'gulp-webserver'实例端口以及要加载的页面的信息,...

    您也可以输入 Ctrl+P 并输入 task webserver 来运行任务

  • 0

    在Opera浏览器中打开文件(在Windows 64位上) . 只需添加以下行:

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

    注意 "command": 行的路径格式 . 不要使用"C:\path_to_exe\runme.exe"格式 .

    要运行此任务,请打开要查看的html文件,按F1,键入 task opera 并按Enter键

  • -17

    CTRL+SHIFT+P 将调出命令调色板 .
    取决于你当然正在运行什么 . 您可以输入的ASP.net应用程序示例:
    >kestrel 然后打开您的Web浏览器并输入 localhost:(your port here) .

    如果输入 > ,它将显示show和run命令

    或者在你的HTML情况下,我认为打开命令调色板后 F5 应该打开调试器 .

    资料来源:link

相关问题