vscode在html中的使用

目录

一、安装插件

● Auto Rename Tag 自动修改标签对插件

● Chinese Language Pack 汉化包

● HTML CSS Support HTML CSS 支持

● Intellij IDEA Keybindings IDEA快捷键支持

● Live Server 实时加载功能的小型服务器

● open in browser 通过浏览器打开当前文件的插件

● Prettier-Code formatter 代码美化格式化插件

● Vetur VScode中的Vue工具插件

● vscode-icons 文件显示图标插件

● Vue 3 snipptes 生成VUE模板插件

● Vue language Features Vue3语言特征插件

二、通过live Server 小型服务器运行项目

点击右下角Go Live , 或者在html编辑视图上右击 open with live Server ,会自动启动小型服务器,并自动打开浏览器访问当前资源

在html中,输入" ! " 并回车即可快速出现html的基本结构



Live Server 有实时加载功能,在vscode中修改代码后保存,然后会实时加载出来

Live Server使用完毕后,要记得关闭

三、其他常见设置

● 设置字体: 齿轮>search>搜索 "字体大小"

● 设置字体大小可以用滚轮控制: 齿轮>设置>搜索 "Mouse Wheel Zoom"

● 设置左侧树缩进: 齿轮>设置>搜索 "树缩进"

● 设置文件夹折叠: 齿轮>设置>搜索 "compact" 取消第一个勾选

● 设置编码自动保存: 齿轮> 设置> 搜索 "Auto Save" ,选择为"afterDelay"

相关推荐
qq4356947012 小时前
JavaWeb05
前端·html
小堃学编程3 小时前
【项目实战】基于protobuf的发布订阅式消息队列(4)—— 服务端
c语言·c++·vscode·消息队列·gtest·protobuf·muduo
ZC跨境爬虫4 小时前
3D 地球卫星轨道可视化平台开发 Day6(SEC数据接口扩展实现)
前端·microsoft·3d·html·json·交互
2501_915909066 小时前
Xcode从入门到精通:全面解析iOS开发IDE的核心功能与实际应用指南
ide·vscode·ios·个人开发·xcode·swift·敏捷流程
Cephas、6 小时前
VsCode 使用手册
vscode·工具使用手册
景庆1977 小时前
vscode启动springBoot项目配置,激活环境
java·开发语言·vscode
纪伊路上盛名在7 小时前
如何跨设备访问我们VSCode中GitHub Copilot 的聊天记录?
vscode·github·copilot·工作流
青花瓷7 小时前
PyCharm中创建Django基础网站
ide·pycharm·django
小王C语言7 小时前
vscode连接云服务器
ide·vscode·编辑器
打小就很皮...7 小时前
Trae 和 VSCode 中 Claude Code 插件使用
ide·vscode·编辑器·claude