欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 社会 > vscode在html中的使用

vscode在html中的使用

2025/1/24 7:56:07 来源:https://blog.csdn.net/qq_43494013/article/details/141693155  浏览:    关键词:vscode在html中的使用

目录

    • 一、安装插件
    • 二、通过live Server 小型服务器运行项目
    • 三、其他常见设置

一、安装插件

● 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"

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com