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"

相关推荐
测试开发-学习笔记4 小时前
Android studio安装
android·ide·android studio
ABAP-張旺4 小时前
ABAP:Visual Studio Code官方插件安装教程
ide·vscode·编辑器
祖国的好青年5 小时前
Prettier实现保存自动格式化
vscode·react·prettier
zh路西法6 小时前
【绕过 vscode-server】用 SSHFS SFTP 实现本地远程开发
ide·vscode·编辑器
小二·6 小时前
AI 代码审查 VSCode 插件实战
ide·人工智能·vscode
Yukinaaaa7 小时前
以“轮盘数组”思维彻底搞懂并实现阻塞队列
java·服务器·ide·安全·javaee·阻塞队列·轮盘数组
Tian_Hang7 小时前
Linux基础知识(四)
linux·ide·驱动开发·计算机视觉·硬件工程·动画
Rauser Mack8 小时前
不懂编程,但是vibe coding一个扫雷游戏
人工智能·python·游戏·html·prompt
放下华子我只抽RuiKe58 小时前
FastAPI 全栈后端(二):路由与数据模型
前端·人工智能·react.js·前端框架·html·fastapi
嵌入式科普8 小时前
七、vscode四种调试方案完全指南
vscode·cortex-debug·probe-rs·ra8p1