一，开发者工具的安装

我们在正式开发前一定要有一款适合自己的工具。首先把市面上常见的一些开发工具列出来给到大家。

1-1，常用前端开发工具

工具	推荐指数	优缺点
记事本	1颗星	电脑自带安装方便，功能太简单
Notepad++	2颗星	开发单个小页面合适，功能简单
WebStorm	4颗星	功能强大，适合web前端开发，缺点就是要付费，当然可以自己去百度破解方案，就是因为功能太过强大，运行项目比较慢
Visual Studio Code	5颗星	功能强大，免费，个人认为最适合前端开发

那么我们就选定vscode作为我们的开发工具。

1-2，下载vscode

我们可以直接百度vscode，然后进行安装

1-2-1，官网下载

我们可以直接去官网下载最新版本。

石头哥推荐去官网下载，但是有时候官网下载可能比较慢。那么就去百度上直接找安装包

1-2-2，其他下载

可以自己百度“vscode下载”，网上一大堆的安装包。下载的时候尽量选择常见的三方下载市场里的安装包

1-3，安装vscode

我们上面下载好安装包以后，只需要双击安装即可。

安装其实很简单，没什么说的，我这里只补充一点，就是下面的勾选框尽量全部都勾选。

安装好以后打开，如下图

可能看到纯英文界面，有的同学会感觉到不舒服，那么下面就教大家如何中文化。

1-4，vscode使用中文界面

我们vscode有一个插件市场，我们使用vscode安装插件特别方便，傻瓜式安装

1，插件市场搜索 chinese
2，点击安装（install）
3,重启vscode

安装好以后点击提示框里的Restart Now或者自己手动关闭，然后重启。
4,重启以后就是中文界面了

二，vscode的常见插件(选看)

由于这个vscode的插件太过强大了，为我们提供丰富多彩的好用的插件，所以我这里作为一个备案录，来记录一些常用的插件。这一节只做为备忘录，需要用到相应的插件时再来看这一节就行，我在后面的章节中如果用到插件，也会在视频里教大家如何安装的。

2-1，Chinese (Simplified) Language中文

2-2，Live Server 实时编译

我们在开发网页时，每次都要保存然后去浏览器里刷新网页，才可以看到代码编辑效果。这样势必大大浪费我们的开发时间，所以我们可以使用这样一款插件，来实时编译我们的代码

安装完live server以后我们代码编辑完，只要点ctrl+s保存，浏览器里就可以实时的查看

如果你想连ctrl+s保存都省略的话，就需要做如下配置了。

选择alterDelay即可。通常是每隔1秒自动保存一次。

这样我们只管写代码，基本上写完代码以后，浏览器就可以通过显示了。