开发环境搭建

共勉

不要哀求，学会争取。若是如此，终有所获。

原文

一、前言

正所谓欲善其事，必先利器。那在正式学习 Web 前端之前，不妨来看看，我们都要先做好那些事前准备。

首先，既然要开始写代码了，一个趁手的编辑器/IDE 肯定是必不可少了，不可能还去使用记事本吧。当然也不是看不起记事本，只是技术虽然很重要，但效率也不能落下，要两手抓，才能有更好的产出。

目前主流市场中，前端开发无非主要有以下几个常用的编辑器/IDE，它们分别是：

• Visual Studio Code
• Webstorm
• HBuider
• Sublime Text

软件各有千秋，都有着各自的特色功能。不过环顾左右的前端开发者，大多都选择的是 VS Code（Visual Studio Code）。于是，我们也选择它作为我们 Web 前端教程中的代码编辑器。

有了写代码的家伙事儿还不够，所谓前端，最终的目的无非是实现各种图形化的效果，供用户交互，让用户能一目了然的看到效果。既然如此，写了代码之外，我们就还需要一个载体，将我们代码实现的效果渲染。而这个载体也很常见，也就是我们日常都会用到的浏览器。

截止目前，根据 W3Counter 的统计，Chrome 浏览器占据了绝大部分市场，处于绝对领先地位。

同时，Chrome 也深受前端开发者的欢迎。出于两方面的考虑，因此选用 Chrome 作为系列教程中用于看效果的载体。

接下来，我们就先来看看，如何在我们的电脑中安装 VS Code 和 Chrome。

二、VS Code 安装

1. 下载

说起来好笑，之前在网上看到有人仿了一个 VS Code 的官网，并且下载安装需要收费。当时没忍住，直接笑出了声。不过也从侧面说明，肯定也有不少小白上过当的，不然也就不会有人闲的去仿官网了。

在此，提醒下大家，VS Code 是微软完全免费开源的一款编辑器，完全没有收费一说。下载时，请认准唯一指定官网。

https://code.visualstudio.com/

虽说官网是英文界面，不过都很简单。选择对应操作的安装包，点击 Download 就能得到想要的安装包了。

2. 安装

3. 插件

（1）插件安装

点击左侧扩展（插件）-> 搜索插件 -> install -> 重启 VS Code。

（2）推荐插件

• Chinese

安装该插件后，VS Code 就能支持中文了，再也不用害怕是英语操作界面而苦恼。

• Open in Browser

顾名思义，就是能够在写好的代码文件中鼠标右键打开对应选项，它就会自动打开浏览器帮助我们渲染了。

三、Chrome 安装

1. 下载

当然了，最靠谱的方式就是从 Chrome 官网下载安装包。不过不出意外的话，大概率是打不开官网的。

https://www.google.com/chrome/

这个时候，我们就必须退而求其次，去找找我们能正常下载 Chrome 的地址了。这里推荐去异次元软件世界进行下载，网站提供 Windows 7/8/10/11、macOS 等平台稳定版、测试版、金丝雀版的离线包的下载，还区分 32/64 位安装包，可以说是非常良心了。

https://www.iplaysoft.com/tools/chrome/

2. 安装

相对与下载而言，Chrome 的安装就十分简单了，只需要双击打开安装包，它就会自动开始安装。

⏳ 联系

想解锁更多知识？不妨关注我的微信公众号：村雨遥（id：JavaPark）。

扫一扫，探索另一个全新的世界。