开发环境搭建
开发环境搭建
共勉
不要哀求,学会争取。若是如此,终有所获。
原文
一、前言
正所谓欲善其事,必先利器。那在正式学习 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)。
扫一扫,探索另一个全新的世界。