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"

相关推荐
晓得迷路了6 分钟前
栗子前端技术周刊第 112 期 - Rspack 1.7、2025 JS 新星榜单、HTML 状态调查...
前端·javascript·html
jinmo_C++9 分钟前
从零开始学前端 · HTML 基础篇(一):认识 HTML 与页面结构
前端·html·状态模式
痞老板234 分钟前
【Cmder】VSCode设置Cmder为内置终端
ide·vscode·编辑器
Albert Edison40 分钟前
【Git】多人协作一(同一分支下)
git·vscode·svn·github
__雨夜星辰__42 分钟前
VS Code 的Remote-SSH/Remote Development插件无法连接到 Ubuntu 系统下 的远程虚拟主机(VMware)
运维·vscode·ubuntu·ssh
winfredzhang1 小时前
从零构建:基于 Node.js 的全栈视频资料管理系统开发实录
css·node.js·html·音视频·js·收藏,搜索,缩略图
WALKING_CODE1 小时前
Anaconda安装完成后启动Jupyter报错,解决方法
ide·python·jupyter
stevenzqzq1 小时前
Android Studio 断点调试异常相关选项总结
android·ide·android studio
风静如云1 小时前
VSCode:SSH后无法使用c0pil0t
vscode
松涛和鸣15 小时前
49、智能电源箱项目技术栈解析
服务器·c语言·开发语言·http·html·php