VSCode下载
下载地址https://code.visualstudio.com/
打开后选择相应的版本进行下载，例如我是Ubuntu版本他会自动识别我的系统，推荐相应的版本
点击下载即可
在linux下安装比较麻烦，而在windows下直接一路下一步即可
在ubuntu下的安装打开ia文件所在目录，在终端中打开
hao@hao-ubuntu:~/下载$ sudo dpkg -i code_1.73.0-1667318785_amd64.deb [sudo] hao 的密码： 正在选中未选择的软件包 code。 (正在读取数据库 ... 系统当前共安装有 182409 个文件和目录。) 准备解压 code_1.73.0-1667318785_amd64.deb ... 正在解压 code (1.73.0-1667318785) ... 正在设置 code (1.73.0-1667318785) ... 正在处理用于 mailcap (3.70+nmu1ubuntu1) 的触发器 ... 正在处理用于 gnome-menus (3.36.0-1ubuntu3) 的触发器 ... 正在处理用于 desktop-file-utils (0.26-1ubuntu3) 的触发器 ... 正在处理用于 shared-mime-info (2.1-2) 的触发器 ...
设置为中文
重启后即可设置完成
添加文件夹
点击我信任
使用VSCode开发第一个页面
新建一个html文件，在文件中输入一个感叹号！回车即可补全代码
请注意，一定一定要使用英文输入法
我们在这里更改title这一栏中的文字
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的第一个VScode页面</title></head><body></body></html>
在body页面的中间加入center即可在网页中间显示内容
例如
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的第一个VScode页面</title></head><body><center>我的第一个网页</center></body></html>
浏览器打开文件即可看到我们的设置
扩展推荐
auto rename tag
这个插件是用于改正错误的，因为大部分的html标签都成对出现如果第一个打错了，修改时需要修改两个，而这个就是在修改第一个标签时，自动修改第二个标签
快速预览插件view-in-browser
安装完成后右键即可看到
view in browser按键
点击即可在浏览器中打开
实时预览插件live server
安装完插件后右键即可看到live server
