如何在Visual Studio Code中访问编写的html文件

 时间:2024-10-11 18:26:16

1、打开本地已经初次安装的Visual Studio Code 软件,如下图所示:

如何在Visual Studio Code中访问编写的html文件

2、创建一个index.html文件,引入Vue.js并编写一个简单的页面,如下图所示:

如何在Visual Studio Code中访问编写的html文件

3、此时我们右键该html,并没有选项可提供给我们直接打开浏览器访问,如下图所示:

如何在Visual Studio Code中访问编写的html文件

4、点击扩展(Ctrl+Shift+X),打开在应用商店中搜索扩展输入框,如下图所示:

如何在Visual Studio Code中访问编写的html文件

5、我们输入 Open in Browser,找到下载量最多的,然后点击右侧的“安装”,如下图所示:

如何在Visual Studio Code中访问编写的html文件

6、安装完毕以后,我们可以在右侧看到禁用和卸载选项,如下图所示:

如何在Visual Studio Code中访问编写的html文件

7、此时我们再右键该index.html,可以看到多出两个选项,Open In Default Browser和Open In Other Browser,如下图所示:

如何在Visual Studio Code中访问编写的html文件

8、我们点击“Open In Other Browser”,此时上方会出现一个下拉选择输入框,我们选择Google Chrome浏览器,如下图所示:

如何在Visual Studio Code中访问编写的html文件

9、此时会打开Google Chrome浏览器,并输出html网页的内容了,如下图所示:

如何在Visual Studio Code中访问编写的html文件
  • 分类检索和搜索引擎各有什么特点
  • typora如何调出注释
  • DEV C++怎么在编译的时候开启O2优化
  • 思维导图如何导出格式为freemind的文件
  • 【校园指南】东莞理工学院城市学院奖学金攻略
  • 热门搜索
    环境卫生手抄报 快乐成长手抄报内容 重阳节手抄报简单好看 友善手抄报 四年级安全手抄报 六一儿童节手抄报大全 迎中秋庆国庆手抄报 庆国庆手抄报简单漂亮 节约能源手抄报 法制安全教育手抄报