使用VSCode打开html文件是空白,在文件夹大小也是0KB解决方法

最新推荐文章于 2024-07-01 11:20:21 发布
最新推荐文章于 2024-07-01 11:20:21 发布
阅读量3.8k 收藏 14
点赞数 22
文章标签： java 前端 javascript bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61550453/article/details/127400862
版权
博主分享了在学习JavaScript过程中，从IDEA转用VSCode作为前端编辑器的体验。遇到的问题是VSCode无法直接预览HTML，通过安装'openinbrowser'插件解决预览问题，但发现需要手动保存文件（Ctrl+S）后才能正常显示。此帖旨在帮助自学前端的同学避免类似困扰。
摘要由CSDN通过智能技术生成

本人最近学习Js,觉得使用idea太过麻烦,就在网上搜索发现前端专用编辑器之一,微软的VSCode(Visual Studio Code),但是发现无法点击直接预览,于是面向百度编程发现了插件`

open in browser` ,来实现展示的效果

 但是紧接着新的问题出现了,

 

 发现使用alt加b打开后 页面是空白的  在文件夹中也是0kb大小的html

同样是面向百度  发现vscode没有自动保存的功能,必须得手动保存(ctrl+s),才会生效

每次保存后,就没这个问题了

发到这里 希望可以给自学前端的避坑~~ 

 

孤独的根号三℡
关注
  • 22
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
解决新建Visual Studio Code显示空白页面且快速生成基础代码的方法
与其终的知识小窝
04-10 2613
一、先用英文输入法打个“！” 二、再按个“Tab键”（换行） 附图步骤：
Vscode-工具使用
u012581453的专栏
08-08 1285
Vscode ，这玩意儿是开源的，以前用收费的破解版，过段时间就高版本不匹配，这次搞个不要钱的玩玩，记录使用心得。
VsCode新建html页面空白？解决办法
sy2269692627的博客
02-05 2247
VsCode新建的html文件初始代码块
VSCode终端显示空白无法运行
qq_61798306的博客
07-01 1139
本文用以解决vscode用着用着终端显示一片空白，再新建终端或者重启都无济于事。
vscode 编写 html 浏览器打开为空白
热门推荐
weixin_42214743的博客
05-08 1万+
新手上路，懵懵懂懂，傻子一个，不喜勿喷。 写一个简简单单的程序，结果浏览器中就是空白 于是面向 CSDN 编程，然后发现大家都是说，安装Open in Browser 插件。 但是我已经安装好了此插件，还是空白。 于是闲的开始折腾起来网页右键的源代码和检查。 最后在检查中发现了应该要出现的结果。 ...
vscode页面空白问题
贺天远 廊坊师范学院信息技术提高班十五期
08-20 3736
今天遇到页面空白问题，我起初以为是自己的的路由写错了，然后开始路由的详细查找，但是查找一圈之后发现啥也没错。于是我返回vsCode界面，准备继续查找问题，这时我票到左上角有个提示标。 这时候我才想起来我编辑的页面还没有保存。 因为vue实现的是热加载所以我们更改页面的时候一般不会再从新启动容器，只需要保存之后我们更改的结果就会加载到前端页面。所以我们更改文件之后一定要及时保存，否则就不会提交新的更改。 ...
为什么在VScode编写/修改代码网页不显示
weixin_56498069的博客
02-27 4080
为什么在VScode编写/修改代码网页不显示
用Vscode实现Echarts导入html出现空白页面的问题
weixin_60503596的博客
08-28 860
【代码】用Vscode实现Echarts导入html出现空白页面的问题。
html笔记 黑马pink老师 b站视频笔记 有自己新加内容
weixin_56702300的博客
11-21 275
html笔记 黑马pink老师 b站视频笔记 有自己新加内容
前端学习.
qq_53323012的博客
11-15 918
基础班学习路线 html5基础，css3基础，h5c3提高，练习项目。 网页简介 1.html html指的是超文本标记语言，它是用来描述网页的一种语言。 html不是一种编辑语言，而是一种标记语言。 标记语言是一套标记标签。 所谓超文本，有层含义： 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超越链接文本） 2.网页 1.网站是指因特网上根据一定的规则，使用html等制作的用于展示特定内容相关的网页集合。 2.网页是网
Python基础
论功还欲请长缨的博客
01-25 394
一、计算机概述 1计算机基本概述 ###1.1 计算机是什么？ 计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器 特点 : 数值计算 逻辑计算 存储记忆功能 总结 : 能够按照程序运行、自动、高速处理数据的现代化智能电子 1.2 计算机的组成? 硬件： 鼠标 键盘 显示器 CPU 硬盘… 看的见摸的着 软件： PyCharm QQ 浏览器 英雄联盟… 看不见摸不着 2.1 计算机语言的基本概念 概念 ：计算机语言（Computer Language）指用于人与计算机之间通讯
HTML_CSS_base
qq_42045298的博客
10-25 275
1. WEB.     1. 什么是WEB         Web就是网页，是一种基于B/S的应用程序         B : Browser 浏览器         S ：Server 服务器         ---------         C ：Client 客户端         S ：Server 服务器     2. Web 组成         浏览器 ：代替用户向服务器发送请...
VScode正常运行但是界面空白，报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)
zutdragon的博客
03-08 4689
vue项目启动后，页面全空白，并报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘install’)
解决vscode打开空白的问题
Littleree的博客
05-14 3145
解决vscode打开空白的问题
vscode 编写html 浏览器显示 空白 白屏
weixin_47806120的博客
07-08 3628
新手上路，遇到问题，就思考、探索、询问你哦。
vscode终端打开出现空白-解决方法
咏絮
05-20 8033
1、打开系统命令提示符cmd 2、左上角右键->属性，勾选“使用旧版控制台” 3、重启vscode
关于我在Vscode运行html打开不了浏览器的问题解决方案
qq_73087022的博客
11-09 6355
关于我在Vscode运行html打开不了浏览器的问题解决方案
vue在vsCode中打包后，点开index.html文件后为空白页面，打包路劲配置
weixin_42206375的博客
04-28 2714
vue在vsCode中打包后，点开index.html文件后为空白页面 原因就是找不到资源 那大多数是因为你改动了config中的build这个属性 //在config中找到这个bulid 现在是要打包成 /static/admin/img(js)(css)(静态文件) /views/admin/index.html(显示页面) build: { // Template for inde...
vscode设置打开不显示
weixin_53468520的博客
12-17 467
可以尝试卸掉美化软件或者图标插件,主题插件等。
vscode运行html页面空白
最新发布
07-02
Visual Studio Code (VSCode) 是一个强大的代码编辑器，支持多种语言，包括HTML、CSS和JavaScript。如果你在VSCode中运行HTML文件时页面显示为空白，可能是以下几个原因导致的： 1. **默认浏览器设置**：确保你已设置VSCode使用正确的浏览器打开HTML文件。在`File` > `Preferences` > `Settings`中，找到`html.browser`或`html.preview.browser`选项，并配置为你的默认浏览器。 2. **Live Server插件问题**：如果使用了Live Server插件，确保插件配置正确且能正常启动。检查插件设置（`Ctrl + ,`或`Cmd + ,`），看看是否需要手动刷新或者启用自动刷新功能。 3. **HTML结构错误**：检查你的HTML代码，确保所有标签都是闭合的，没有语法错误，如缺少`<!DOCTYPE html>`声明。 4. **JavaScript代码问题**：如果HTML中包含JavaScript，确保JavaScript部分能正常执行，尤其是`<script>`标签的加载位置和执行逻辑。 5. **文件路径问题**：如果HTML引用了外部资源（如CSS或图片），确认这些资源路径正确，文件位于预期位置。 6. **浏览器兼容性**：某些样式可能在特定版本的浏览器中不起作用，尝试在其他浏览器中打开看看是否问题依旧。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值