首页 > 其他分享 >如何在Visual Studio Code运行HTML的代码?

如何在Visual Studio Code运行HTML的代码?

时间:2022-12-08 14:24:13浏览次数:32  
标签:文件 Code Visual 点击 HTML Studio

1. Visual Studio Code

Visual Studio Code 是微软推出的一个源代码编辑器。它在Windows、macOS和Linux上都能使用。可以通过它用各种编码语言来编写和编辑代码。

在 Visual Studio Code 中,可以在下方界面中安装所需要的插件:

 1.1 如何在 Visual Studio Code 运行 HTML 的代码?

  • 使用终端

  点击屏幕上方的终端,然后点击新建终端。终端是在 Visual Studio Code 中运行HTML文件而不使用扩展的唯一方法,但同时它也是最复杂的方法。

       

  键入 cd 后接HTML文件的路径,然后按↵Enter,这样就会转到你的HTML文件的位置,键入 start 后接HTML文件名,然后按↵Enter:

  

  这样会在一个单独的窗口中启动HTML文件,以便你预览HTML文件。

  •  使用 HTML Preview 扩展

  点击“扩展”按钮,这是左侧菜单栏中类似4个方块的图标。这样将显示扩展的搜索菜单:

       

  在搜索栏中键入HTML Preview,点击安装。HTML Preview 是 Visual Studio Code 的一个扩展,让你能在 Visual Studio Code 中使用分屏或全屏模式来预览HTML文件。

         

   打开或创建一个新的HTML文件,点击屏幕上方包含你的HTML文件的选项卡来进行查看。

        

  点击分屏预览按钮,这是一个类似于分屏的图标,左边有一个放大镜,它位于屏幕的右上角,这样就会在Visual Studio Code中以分屏方式打开HTML文件的预览。

         
  •  使用 Open in Browser 扩展

        

   搜索 open in browser 并下载,Open in browser 是Visual Studio Code的一个扩展,能在Visual Studio Code中使用所选择的网络浏览器来打开HTML文件。

   在HTML代码中右键点击任意位置,点击 Open In Default Browser,在默认浏览器中打开。

         

 

 

 

标签:文件,Code,Visual,点击,HTML,Studio
From: https://www.cnblogs.com/direwolf22/p/16962202.html

相关文章

  • 一个HTML5的图表库框架
    ​​http://www.rgraph.net/​​​RGraphisachartslibrarythatusesJavascriptandHTML5todrawandsupportsovertwentydifferenttype......
  • VS2005中用Code Snippets提高开发效率
    新近编译的一篇关于vs.net2005中codesnippets的文章,原文发表在​​http://dev.yesky.com/msdn/432/2340932.shtml​​上,下面转过来这里在VS.NET200......
  • 一个模仿HTML5功能的jquery控件
    原文:http://www.matiasmancini.com.ar/html5form_en.php大致将要点翻译下:在HTML5中,验证输入框等都可以不用JAVASCRIPT就能实现了,现在只有少部分浏......
  • 解决vscode终端中出现的乱码问题
    解决思路乱码的出现一般是由于编码错误。在编辑器上正确显示的中文字符,却在终端编译出现乱码,这一般是因为vscode编辑器默认编码utf-8,而终端使用了gbk编码。解决方法1.......
  • html空格占位
     名称编号描述  不断行的空白(1个字符宽度)  半个空白(1个字符宽度)  一个空白(2个字符宽度)  窄空白(小......
  • mingw + cmake + vscode
    .vscode settings.json{  "cmake.generator":"MinGWMakefiles"} cmake-kits.json[  {    "name":"GCCforx86_64-w64-mingw3212.2.0"......
  • Error: could not detect network (event="noNetwork", code=NETWORK_ERROR, version=
    今天在hardhat中部署合约时碰到了这个问题,算是一个粗心的问题吧,特此记录一下,如图:出现该问题的原因竟然是配置网络url时应该是``,而我用成了'',导致一直连不上......
  • 简介(Beginning Visual C++ 2013)
    欢迎阅读IvorHorton的《VisualC++2013入门》。通过本书,您可以使用Microsoft最新的应用程序开发系统VisualStudioProfessional2013成为一名有效的C++程序员。我的目标......
  • ShardingCore兼容Code-First数据库迁移 让update-database能更新分表
    参考文章.Net下极限生产力之分表分库全自动化MigrationsCode-First背景在我上一篇博客ABPEFCORE7集成ShardingCore实现分表写完之后,我发现我还有一个没解决的问......
  • html引入文件是https和http
     注释掉就是http,不注释就是https ----下方已经注释了<!DOCTYPEHTML><html><head><!--<metahttp-equiv="Content-Security-Policy"content="upgrade-insecure-......