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"

相关推荐
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
NoneCoder5 小时前
HTML响应式网页设计与跨平台适配
前端·html
小白用python6 小时前
pycharm无法创建venv虚拟环境
ide·python·pycharm
wsdhla7 小时前
form表单提交前设置请求头request header及文件下载
html·form·request·send·header·submit
Bob99988 小时前
Amlogic S905L3系列盒子 ROM DIY相关
java·javascript·数据仓库·vscode·eclipse·tomcat·vim
Humbunklung8 小时前
Visual Studio Code 使用tab键往左和往右缩进内容
ide·vscode·编辑器
界面开发小八哥9 小时前
智能Python开发工具PyCharm v2025.1——AI层级功能重磅升级
ide·人工智能·python·pycharm·开发工具
geovindu9 小时前
PyCharm 2023升级2024 版本
ide·python·pycharm
pink大呲花11 小时前
设置右键打开VSCode
ide·vscode·编辑器
xcLeigh12 小时前
HTML5好看的水果蔬菜在线商城网站源码系列模板7
前端·html·html5