Visual Studio Code安装和网页编程入门

Visual Studio Code安装和网页编程入门

软件准备

软件安装

安装过程。

新建HTML5格式的文件

新建demo01.html文件。


输入感叹号！再选择第1个模板选项，生成HTML5页面内容。

常规设置

设置界面主题颜色

菜单：File文件–Preferences首选项-Color Theme颜色主题，更改原来的Dark为Light。

设置字体大小

菜单：File文件–Preferences首选项-Settings设置在User选项卡中点击Text Editor文本编辑器-字体Font
字体大小Font Size输入20，系统会自动保存生效。

安装实时预览插件Live Server

选择左侧的Extensions图标，输入Live Server，点击Install安装该插件。


新建HTML文件，输入感叹号!快速生成网页模板，在鼠标右键点击文件名，选择菜单Open with Live Server ，即可在浏览器中查看网页显示效果。当源文件内容改变时，按Ctrl + S保存后，浏览器的页面也会自动更新。

在DOS终端界面中启动VS Code

开始菜单输入cmd回车进入DOS界面。


输入DOS命令
e : 回车切换至E盘
mkdir test001 通过mkdir命令新建一个文件夹test001
cd test001 进入该目录
输入code回车，启动VSCode并指定test001为当前工作目录。

也可以输入 code 文件名在VS code中新建文件，例如code hello.html,这样在VS Code中打开文件。

VS Code界面中也有Termina终端界面，在其中按回车键即可显示命令行提示。