准备好浏览器和代码编辑器
TIP
本节课目标：
- 下载和安装谷歌浏览器
- 下载和安装
Visual Studio Code代码编辑器 - 在
Visual Studio Code安装一些简单的扩展
目前我们学习html和css这个阶段时，我们不需要安装任何开发环境，只需要一个浏览器和一个代码编辑器就可以了。
下载和安装谷歌浏览器
在你电脑自带浏览器的地址栏上输入：https://google.cn/chrome , 尽量不要用搜素引擎去搜索谷歌浏览器 或 Google Chrome 这些关键词，因为你找到的网站要么不是官方站点，要不就是因为某些原因(你懂的)，你访问不了网页。
打开网页后，默认会匹配出适合你系统的谷歌浏览器版本，直接点击下载即可
如果默认下载的谷歌浏览器不适合你的电脑系统，将页面拉到最下方，点击其它平台这个链接，将会展示出适合所有平台的谷歌浏览器版本，在这里选择适合你电脑版本的谷歌浏览器。
下载和安装Visual Studio Code 代码编辑器
你可以在搜索引擎输入 VS Code 关键词，找到 Visual Studio Code 官方站点， 也可以直接在浏览器中输入 https://code.visualstudio.com 进入 Visual Studio Code 的官方站点，直接点击Download for XXX 按钮就可以下载对应你电脑版本的编辑器，如果你下载的版本不对，也可以点击按钮下方的 other platforms, 在打开的页面选择适合你电脑的版本。
Visual Studio Code 常用扩展及一些设置
Visual Studio Code 支持安装扩展（也可以叫做插件），安装扩展的意思就是给Visual Studio Code增加一些额外的功能。就像谷歌浏览器也支持安装扩展(插件)。
安装中文语言扩展
比如说，现在我们默认打开的界面是英文的, 那么我们可以在扩展搜索框中搜索Chinese (Simplified), 找到"Chinese (Simplified) Language Pack for Visual Studio Code"这个扩展安装， 安装完成后，重启VS Code后，就能显示中文界面了。
安装代码格式化扩展 prettier
在扩展市场中搜索 prettier， 找到 Prettier - Code formatter 并安装它。这个扩展会自动在你保存代码的时候格式化代码，这样不仅能保证你所有代码格式能一致化，也能保证这样你输入的代码和我视频中的代码格式是完全一样的，当你代码出现错误的时候，也方便你对照着视频快速定位到你的错误代码。
安装完prettier后， 我们还需要做两个设置才能生效，打开VS Code 设置选项，在搜索框中搜索Default Formatter, 将Editor:Default Formatter 选项的值设置为 Prettier - Code formatter. 然后搜索 Format On Save, 将 Editor: Format On Save 下的复选框选中。 这时候，当你保存代码文件的时候，就能自动格式化代码了。
设置自动保存文件
在 VS Code 设置选项搜索框中搜索 auto save, 将 Files:Auto Save的值设置为onFocusChange, 这个意思是，在你切换到别的标签页的时候，或者鼠标点击窗口外的任何位置，代码文件能够自动保存。虽然这个功能挺实用，但是我们还是要养成随便保存文件的习惯。
设置 Tab Size
我们在写代码的时候，都会使用tab键来缩进代码，通常写前端代码时，我们将一个tab设置为两个空格，也就是你按一次tab键就相当于你敲了两个空格键. 在 VS Code 设置选项搜索框中搜索tab size, 将Editor: Tab Size中的值设置为2。同时这样设置也是为了让你的代码格式和我视频中的代码格式是一致的。
安装 One Monokai Theme 主题
主题就是换皮肤的意思，你可以选择任何一款你喜欢的主题进行安装，当然你也可以用VS Code默认自带的主题，但是如果你希望你的代码颜色看上去和我的一样，那么你可以通过扩展市场搜索 One Monokai Theme 来安装这个主题。目前在学习这套课程的时候，我建议你安装上这个主题。
安装 Material Icon Theme 文件图标主题
VS Code默认的文件图标比较简洁，如果你想让这些文件的图标辨识度更高一些， 你也可以安装一些文件图标主题，这里我们安装Material Icon Theme这个文件图标主题，在扩展市场 搜索 Material Icon Theme 并安装它。
最后，顺便提一下， 如果你安装的主题或是文件图标主题没有生效，那么你可以点击界面上的齿轮图标，在里面找到主题，然后选择颜色主题或是文件图标主题来重新选择设置。
好了，现在我们已经完成了VS Code最基本设置，下节课我们开始书写你的第一行代码。