安装基本软件

在安装基本软件中，我们向你展示了进行简单的 Web 开发所需的工具以及如何正确安装它们。

¥In Installing basic software, we show you what tools you need to do simple web development and how to install them properly.

我现在真正需要什么工具？

¥What tools do I actually need, right now?

在本文中，我们将为你提供最基本的配置 - 一个文本编辑器和一些现代网络浏览器。

¥In this article, we'll set you up with the bare minimum — a text editor and some modern web browsers.

安装文本编辑器

¥Installing a text editor

你的计算机上可能已经有一个基本的文本编辑器。默认情况下，Windows 包含 记事本，macOS 附带 TextEdit。Linux 发行版各不相同；Ubuntu 22.04 LTS 版本默认附带 GNOME 文本编辑器。

¥You probably already have a basic text editor on your computer. By default Windows includes Notepad and macOS comes with TextEdit. Linux distros vary; the Ubuntu 22.04 LTS release comes with GNOME Text Editor by default.

对于 Web 开发，你可能可以比记事本或 TextEdit 做得更好。我们建议从 Visual Studio Code 开始，这是一个免费的编辑器，提供实时预览和代码提示。

¥For web development, you can probably do better than Notepad or TextEdit. We recommend starting with Visual Studio Code, which is a free editor, that offers live previews and code hints.

安装现代网络浏览器

¥Installing modern web browsers

现在，我们将安装几个桌面 Web 浏览器来测试我们的代码。请确保你安装了至少两个来自不同系列的浏览器（这样你就不会在使用相同渲染引擎的两个浏览器中进行测试）：

¥For now, we'll install a couple of desktop web browsers to test our code in. Make sure you install at least two of these browsers, from two different families (so you don't test in two browsers that use the same rendering engine):

安装本地网络服务器

¥Installing a local web server

某些示例需要由 Web 服务器运行才能成功运行。你可以在 如何设置本地测试服务器？ 中了解如何执行此操作

¥Some examples will need to be run by a web server to work successfully. You can find out how to do this in How do you set up a local testing server?

专业人士使用什么工具？

¥What tools do the professionals use?

下面的列表看起来很可怕，但幸运的是，你可以在不了解其中大部分内容的情况下开始 Web 开发。

¥The following looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these.

  • 一台电脑。也许这对某些人来说听起来很明显，但有些人正在手机或库计算机上阅读这篇文章。对于严肃的 Web 开发，最好投资运行 Windows、macOS 或 Linux 的台式机或注意本电脑。
  • 文本编辑器，用于编写代码。这可以是文本编辑器（例如 Visual Studio Code、记事本++、Sublime Text、GNU Emacs 或 VIM），或混合编辑器（例如 Dreamweaver 或 WebStorm）。Office 文档编辑器不适合这种用途，因为它们依赖于干扰 Web 浏览器使用的渲染引擎的隐藏元素。
  • Web 浏览器，用于测试代码。目前，最常用的浏览器是 火狐浏览器、Chrome、苹果浏览器 和 微软 Edge。你还应该测试你的网站在移动设备和目标受众可能仍在使用的任何旧浏览器（例如 IE 8-10）上的性能。Lynx 是一种基于文本的终端 Web 浏览器，非常适合了解视障用户对你的网站的体验。
  • 图形编辑器，如 GIMP、Figma、Paint.NET、Photoshop、Sketch 或 XD，用于为你的网页制作图片或图形。
  • 版本控制系统，用于管理服务器上的文件、与团队协作处理项目、共享代码和资源并避免编辑冲突。目前，git 与 GitHub 或 GitLab 托管服务一起是最流行的版本控制系统。
  • FTP 程序，用于较旧的 Web 托管账户，用于管理服务器上的文件（为此目的，git 正在逐渐取代 FTP）。有大量可用的 (S)FTP 程序，包括 Cyberduck、Fetch 和 FileZilla。
  • 自动化系统，例如 Webpack、Grunt 或 Gulp，用于自动执行重复性任务，例如缩小代码和运行测试。
  • 库、框架等，以加快编写常用功能。库通常是现有的 JavaScript 或 CSS 文件，它提供现成的功能供你在代码中使用。框架往往会进一步发展这个想法，提供一个带有一些自定义语法的完整系统，供你在其上编写 Web 应用。
  • 除此之外还有更多工具！