安装基础软件

本小节将介绍常用 web 开发工具的种类和安装方法。

专业人员使用哪些工具?

  • 计算机,虽然显而易见,但是还有些人会通过手机或者公共计算机来阅读这篇文章。严肃的 Web 开发,最好还是使用运行 Windows,Mac,或者 Linux 系统的台式机或笔记本电脑。
  • 文本编辑器,用来编写代码。可以是纯文本编辑器(比如 Visual Studio CodeSublime TextAtomBracketsGNU EmacsVIM);也可以是混合编辑器(比如 DreamweaverWebStorm)。Office 文档编辑器并不适用,因为它们依赖的隐藏元素会干扰浏览器渲染机制。
  • Web 浏览器,用来测试代码。如今使用最多的浏览器有 FirefoxChromeOperaSafariInternet ExplorerMicrosoft Edge。另外,还需测试网站在移动设备和老式浏览器(如 IE 8-10)上的表现。还有 Lynx, 一个基于文本的终端 Web 浏览器,可用于测试视力障碍用户的浏览体验。
  • 图像编辑器,像 GIMPPaint.NETPhotoshop 或者 XD,用来编辑网页中的图形图像。
  • 版本控制系统,用来管理服务器上文件,支持项目团队协作,共享代码资源,以及避免编辑冲突。当今最流行的版本控制工具是 Git,同时 GitHub 以及 GitLab 等基于 Git 的代码托管服务网站也非常流行。
  • FTP 工具,老式 Web 托管账户用来管理服务器上文件(正在被 Git 迅速取代)。有很多 (S)FTP 工具软件,比如 CyberduckFetchFileZilla
  • 自动化构建工具, 用来自动完成压缩代码和运行测试等重复性任务,比如 GruntGulp
  • 模板,库,框架等等,可提高效率的工具。
  • 还有很多!

哪些是当务之急?

上面的列表太冗长了,不过幸运的是,初学 Web 开发并不需要面面俱到。本文将列出一个尽可能短的开发工具清单——一款文本编辑器和几款现代 Web 浏览器。

安装文本编辑器

大多系统都会默认配备一款基本的文本编辑器。比如 Windows 的 记事本, macOS 的 TextEdit,Ubuntu 的 gedit,Linux 发行版各不相同。

Web 开发中可以使用比记事本和 TextEdit 更好的工具。 推荐从 Visual Studio Code 开始,免费且提供实时预览和代码提示。

安装现代 Web 浏览器

然后,针对不同操作系统,安装几款用来测试的桌面 Web 浏览器:

要至少准备两款或以上的浏览器用于测试。

Internet Explorer 对一些现代 Web 功能兼容性不佳,运行现代工程可能会失败。

安装本地 Web 服务器

一些示例需要通过 Web 服务器运行才能正常工作。阅读 如何设置本地测试服务器?了解更多。

本章目录