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"

相关推荐
小蕾Java4 小时前
PyCharm 2025:使用图文教程!
ide·python·pycharm
刘登辉6 小时前
idea使用联网缓存的pom进行离线开发
java·ide·intellij-idea·离线开发
小池先生6 小时前
用vscode查日志方便的搜索-复制所有匹配行功能
ide·vscode·编辑器
深蓝电商API9 小时前
网页结构解析入门:HTML、CSS、JS 与爬虫的关系
javascript·css·html
Deryck_德瑞克11 小时前
IDEA编译时报错OOM的解决方案
java·ide·intellij-idea
JH307311 小时前
Idea中新建package包,变成了Directory
java·ide·intellij-idea
原小明11 小时前
【Conda】Conda虚拟环境配置系统环境变量,Jupter可使用
vscode·python·jupyter·conda
曦曜29212 小时前
聊聊前端静态页面的开发
css·html
慧都小项14 小时前
Parasoft C/C++test如何将静态分析集成到VSCode中
vscode·静态分析·parasoft
立方世界15 小时前
HTML编写规则及性能优化深度解析:从基础到企业级实践
前端·性能优化·html