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"

相关推荐
还是鼠鼠2 小时前
Node.js--exports 对象详解:用法、示例与最佳实践
前端·javascript·vscode·node.js·web
计算机学姐3 小时前
基于Asp.net的高校迎新管理系统
vue.js·vscode·后端·mysql·sqlserver·c#·asp.net
山登绝顶我为峰 3(^v^)34 小时前
VSCode + CMake
ide·vscode·算法·计算机·编辑器
卡列尼娜翠花4 小时前
vscode 导入语句排序和删除未使用的导入
前端·javascript·vscode·编辑器·eslint·前端工程化·esm
木木黄木木4 小时前
html5制作九消游戏开发技术详解
前端·html·html5
沧海一笑-dj4 小时前
【鸿蒙开发】Hi3861学习笔记-Visual Studio Code安装(New)
vscode·harmonyos·鸿蒙·openharmony·鸿蒙开发·hi3861
工业互联网专业6 小时前
基于Python的天气预报数据可视化分析系统-Flask+html
python·flask·html·毕业设计·源码·课程设计·天气预报数据可视化
一头大学牲13 小时前
vscode--工作区和相对路径
ide·vscode·编辑器
计算机毕设定制辅导-无忧学长13 小时前
HTML 新手入门:从零基础到搭建第一个静态页面(二)
前端·javascript·html
༺ཌༀ傲世万物ༀད༻14 小时前
KICK第三讲:解锁Visual Studio:Windows系统下的高效安装指南
ide·windows·visual studio