Visual Studio Code设置在浏览器中查看html页面

Visual Studio Code默认是在VScode的控制台下查看html页面,这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件,在浏览器中查看html页面。

操作方法

  • 01

    首先打开程序,编写好一个html程序。

  • 02

    然后点击左侧第五行的扩展,或者使用快捷键ctrl+shift+X打开扩展栏。

  • 03

    在扩展栏的搜索栏中输入“open in browser”,然后就可以找到open in browser这款插件,插件右下角会显示安装字样。 因为这里我已经安装了,所以没有显示安装。

  • 04

    安装完成后,可以查看一下文档,里面有插件使用的快捷键。在默认浏览器中显示是Alt+B;在其他浏览器中显示是Shift+Alt+B。

  • 05

    回到开始创建的html文档,可以使用快捷键运行。也可以对着html文档右键单击,在弹出的窗口中选择使用默认浏览器打开或者其他浏览器打开。

  • 06

    如果是选择在其他浏览器中打开,中间的命令框会显示可以使用的浏览器,选择自己需要的浏览器名称即可,这里我们使用chrome试试。

  • 07

    可以看到成功在浏览器中运行了程序。

(0)

相关推荐

  • Visual Studio Code设置为简体中文

    Visual Studio Code刚刚安装上之后默认是英文界面,对于英文不是很好的同学来说不是那么的友好,所以我这里来分享一下将Visual Studio Code设置成中文的. 操作方法 01 安 ...

  • Visual Studio Code 怎么安装插件

    Visual Studio Code要支持特定编程语言代码的编译运行的话,需要安装特定的插件.笔者以Python语言为例,安装Visual Studio CodePython插件. 操作方法 01 有 ...

  • visual studio code教程 vscode的基础使用和自定义设置方法

    推荐了几个自认为比较好的要求配置项目比较低的VS code扩展插件: Html Snippets——html代码提示 easyless——css编程/生成 VS color Picker——颜色选择器 ...

  • visual studio code教程:基础使用和自定义设置

    本主要基于基础web前端开发,visual studio code教程--基础使用.扩展插件安装使用以及少许自定义配置,推荐了几个自认为 比较好的要求 配置项目比较低的VS code扩展插件: Htm ...

  • 如何往visual studio code中添加c/c++扩展

    如何往visual studio code中添加c/c++扩展 操作方法 01 首先找到visual studio code. 02 打开界面. 03 进入找到上侧的查看. 04 点开找到扩展. 05 ...

  • 如何查看visual studio code的快捷键

    如何查看visual studio code的快捷键 操作方法 01 首先找到visual studio code. 02 打开界面. 03 找到上方的帮助. 04 打开,找到快捷键参考. 05 打开 ...

  • Linux中安装 Visual Studio Code的 步骤

    Visual Studio Code 是基于 Electron 优化代码后的编辑器,后者是基于 Chromium 的一款软件,用于为桌面系统发布 io.js 应用.Visual Studio Code ...

  • Visual Studio Code Python 调试设置

    很意外Visual Studio Code居然支持Python代码的断点调试.一起来配置一下. 操作方法 01 首先,当然是要先安装插件,配置Python环境.这个大家看这个文章 02 环境配置完成后 ...

  • 如何在Visual Studio Code中安装Python库

    最近迷上了微软新开发的跨平台编辑器Visual Studio Code,不管是排版还是界面,作为一个颜控,陷入其中无法自拔.接下来我将向大家演示如何在Visual Studio Code中安装各类Py ...