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"

相关推荐
cch89181 小时前
css 样式说明,在页面布局开发中,样式表用于控制组件的尺寸、间距、边框及背景等视觉表现
前端·javascript·html
Eagsen CEO1 小时前
如何让 Gemini 在 Android Studio 中顺利工作
android·ide·android studio
小李云雾1 小时前
零基础-从ESS6基础到前后端联通实战
前端·python·okhttp·中间件·eclipse·html·fastapi
sdhongjun2 小时前
VSCode vim Normal模式下无法输入中文到指令参数
ide·vscode·vim
nvvas3 小时前
IDEA安装并且使用Roo Code工具
java·ide·人工智能
亿洋4 小时前
vscode的continue插件接入第三方自定义中转api
人工智能·vscode·编辑器
OxyTheCrack5 小时前
VSCode使用SSH连接VMware虚拟机环境操作指南
ide·vscode·ssh
AI浩5 小时前
第 5 章:集成开发环境 (IDE) 协作 —— 终端与编辑器的双剑合璧
ide·人工智能·编辑器
日出等日落5 小时前
用 Kavita实现我的远程数字书屋搭建记!
java·开发语言·ide·vscode·编辑器
守护安静星空6 小时前
ubuntu vscode 调试 at32f435vmt7基于AT32IDE
linux·运维·笔记·vscode·ubuntu