跳转至

开发环境 — 写代码之前,先把「写→看」的回路接上

这一章讲一件事: 开始写网页之前,要往电脑里装哪几样东西、为什么这么装。 东西有三样:一个写代码的编辑器(VS Code)、一个本地测试服务器(Live Server 插件)、 一个给项目专用的文件夹。真正的知识点不在安装步骤,而在它们拼出来的那条回路。 不需要任何基础,但建议先读第 01 章,知道浏览器是怎么渲染页面的。

1. 先看现象:为什么前端学习「跟不上」的人,大多卡在这一步

很多人学编程的第一步是「看教程」,第二步是「抄代码」,第三步就停了——因为抄完不知道对不对。 前端在所有编程方向里有一个独特的优势:你写的每一行,几乎都能在几秒内看到结果。 但这个优势不是自动成立的:它要求你的电脑上有一条转得动的回路——

  在编辑器里改代码 → 存盘 → 浏览器自动刷新 → 看到变化 → 再改

  图说:这条回路转一圈最好不超过 5 秒;超过 30 秒,学习反馈就死了。

这一章装的三样东西,每一对应回路的一环:编辑器负责「改」,项目文件夹负责「不丢不乱」, 测试服务器负责「存盘即刷新」。下面逐个讲。

2. 编辑器与 IDE:轻装与重装之别

写代码的工具有两类,书里先给了定义再让你选1:

IDE(集成开发环境)是一个「全家桶」应用:代码编辑器 + 语法高亮 + 内置的开发和调试工具 + 项目管理,全打包在一个程序里2。书里的例子是 Adobe Dreamweaver 和 Microsoft Visual Studio——注意后者名字里带 Visual Studio,但和我们要装的 VS Code 是两个东西,别下错。

代码编辑器则只做一件事:又快又简单地写和改代码。也带语法高亮和基础调试,但不替你管项目。 例子有 VS Code、Brackets、Sublime Text、Notepad++3。

该选哪个?书里替你做了决定:VS Code。 理由很实际——这一行用它的人最多, 遇到问题搜得到答案,插件生态最全。对 Web 前端这种「语言轻、工具链简」的方向, 重型的 IDE 反而帮不上忙:你要写的只是三个文本文件,启动一个全家桶纯属浪费。

判断(我们的,不是书里的): 「编辑器 vs IDE」之争在前端这一行其实早就结束了—— VS Code 本身就是一个编辑器,但靠插件长成了准 IDE。这个品类的边界是生态决定的,不是定义决定的。 书里按「定义」分两类是教学需要;出门见人,记住「前端默认 VS Code」就够了。 如果错,会错在: 某些特定场景(比如纯 Java 后端)IDE 仍然不可替代——但那不是这本书的地盘。

3. 安装 VS Code:三个值得勾选的选项

安装本身是一路「下一步」,书里列了 Windows 和 macOS 两套步骤,这里不重复流水账, 只挑会影响你以后每一天的三个选项说4:

安装选项 它给你什么 不勾会怎样
Add "Open with Code" to context menu 在文件夹上右键就能「用 VS Code 打开」 每次都要先开编辑器再找文件夹,多三步
Register as default editor 双击 .html、.css、.js 文件默认用它打开 文件可能被记事本或别的程序抢走
Add to PATH 允许在终端(命令行)里敲 code 启动它 以后用命令行时会嫌麻烦(第 11 章装 Sass、第 13 章跑 Node 演示会感受到)

第一次启动时,书里推荐选 Dark Modern(深色)主题,理由是长时间写代码,深底白字眼睛不累5。 这是经验之谈不是定律——如果你白天在明亮的办公室,浅色主题同样正当。主题选哪个不重要,选完别再折腾, 这一行的共识是:纠结主题的时间拿去写代码,收益高得多。

4. 项目文件夹:一个项目一个窝

装完编辑器,书里让你做的第一件事不是写代码,而是建文件夹: 通过 File → Open Folder 打开(或新建)一个专用文件夹——比如 Documents 下的 website—— 把这一项目的所有文件都放里面6。

书给的理由是:每个项目或网站单独一个文件夹,工作区才整洁、有结构7。 这句话值得往深说一层,因为初学者最常犯的错就埋在这里:

  • 浏览器找文件是按「服务器根目录」找的。 Live Server 启动时,会把当前文件夹当成网站的「根」。 你的首页必须叫 index.html 且放在这个根下,服务器才知道「访问根路径时该给谁」。
  • 路径是相对文件夹算的。 第 04 章你会写 <a href="menu.html"> 这种链接——它能不能点通, 取决于 menu.html 是不是真的和当前页面躺在同一个文件夹里。文件夹乱了,链接先死。
  website/                ← 项目根(Live Server 把它当网站的“/”)
    index.html            ← 首页(服务器默认打开它)
    menu.html             ← 第 04 章会做的一个子页面
    styles.css            ← 第 07 章起会有的样式文件

  图说:整本书的小项目都长这个样;第 13 章只是多了一个 script.js。

判断(我们的,不是书里的): 「一个项目一个文件夹」看起来是洁癖,实际是 Web 的寻址机制决定的: 文件夹结构就是 URL 结构。这一行的老手能从一个人的文件夹结构猜出他的链接写崩过几次—— 这不是玩笑,是经验相关。 如果错,会错在: 工程化项目(用构建工具的那些)的目录结构会复杂得多, 「文件夹=URL」的等式在那些项目里不再字面成立——但那是这本书明确不覆盖的领域(见总纲覆盖表)。

5. 测试服务器:Live Server 为什么是必须的

项目文件夹有了,怎么在浏览器里看?直接把 .html 文件双击拖进浏览器,也能看—— 书里却要你装一个叫 Live Server 的插件8。为什么?

因为双击打开用的是 file:// 协议(把文件当本地文件读),而真实的网站用的是 http://。 这两种方式在入门阶段看着一样,差别会在第 06 章咬人:表单提交、第 13 章的 localStorage, 在 file:// 下行为不一致甚至直接失效。从一开始就活在 http:// 环境里,是给未来排雷。

Live Server 装上之后,右键任何一个 HTML 文件选 Open with Live Server, 它会做两件事:在本机(你的电脑,地址是 localhost)临时起一个迷你服务器托管你的项目文件夹; 然后盯着你改文件——你一存盘,它就让浏览器自动刷新9。

  你按 Ctrl+S 存盘
      │ Live Server 检测到文件变了
      ▼
  浏览器自动刷新 → 新页面 ← 同一时刻,你人还在编辑器里

  图说:这就是第 1 节那张回路图里「存盘 → 自动刷新」那一环的实体。

书里特意点了它的适用面:HTML、CSS、JavaScript 文件改动的即时预览10—— 第 07 章你会体会到这句话的分量:改一行颜色、存盘、看整个页面变色,半秒钟的事。 CSS 的手感,一半是这个插件给的。

判断(我们的,不是书里的): Live Server 是「教学最优解」,不是「业界唯一解」。 真实的 Web 工程里有 Vite、有框架自带的 dev server——它们除了刷新,还管打包、管依赖。 但它们的底层原理和 Live Server 完全一样:本地起一个 http 服务器 + 监听文件变化。 学懂了 Live Server,将来换任何 dev server 都只是换个壳。 如果错,会错在: 如果某天浏览器原生支持了「文件监听自动刷新」(目前不行,安全模型不允许), 这类插件会消失——但「本地服务器」这一层不会消失,因为 http:// 语义本身不可替代。

6. 作者的判断与证据

这一章属于「操作手册」型,判断密度低,但有两处值得标:

书内明确的做法(可以照抄):

  • VS Code 是本书全程使用的编辑器,Live Server 是本书全程的预览方式810;
  • Windows 和 macOS 的安装步骤都给了45。

属于作者经验、书里没给证据的说法:

  • 「深色主题减少眼睛疲劳」5——这一行普遍认可,但视觉疲劳的研究结论其实很杂; 书当建议写,我们建议你当「可以试试的默认值」听。
  • 「每个项目单独文件夹」7——理由书里只说了「整洁」,我们补上了真正的机制原因(寻址),那部分是我们的补充。

7. 边界与局限

  • 安装截图会过时。 VS Code 的安装界面和插件市场随时改版,书里的图只是「长这样」的示例, 认准名字(VS Code、Live Server,作者是 Ritwick Dey)比认图可靠。
  • Node.js 在这一章被一句话带过(前言和本章目标里提到「安装 Node.js 以启用 JavaScript 工具和包管理」), 但正文没有展开装法——真正用到 Node 是第 07 章装 Sass 和第 06 章的表单演示, 那里才会实际需要它。这是本书结构上的一个小毛边(目标列了、正文没教),照实指出。
  • 没有讲终端(命令行)。 而 Node、Sass 都要敲命令——零基础的读者在这里会遇到全书第一个真正的坎, 我们的拆解在 04、07 章相应位置补了最低限度的说明。

8. 可带走的

全章主线例子,一行写完: 装好 VS Code(勾上三个选项)→ 建一个项目文件夹 → 装 Live Server → 右键 index.html 选 Open with Live Server → 浏览器里看到这个文件,且存盘即刷新。

  1. 前端只需要代码编辑器不需要重型 IDE;这一行的默认选择是 VS Code;
  2. 装的时候勾上「右键打开」「设为默认编辑器」「加入 PATH」三个选项,日后的麻烦少一半;
  3. 一个项目一个文件夹——因为文件夹结构就是网站的地址结构;
  4. 预览要用 Live Server 这类本地服务器,不要用双击文件(file://),因为 http:// 才是网页的真实生存环境;
  5. Live Server 的本质是「本地 http 服务器 + 文件监听」,将来一切 dev server 都是这个原理的加强版;
  6. 这一章装好的东西,是后面 11 章每一次「改 → 存 → 看」的底座——回路不通,别往下读。

9. 原文地图

主题 原书章 原文位置
本章目标(装编辑器、组织文件、测试服务器) Setting up the Development Environment text/08-fm-introduction.txt:23(搜「essential skills required to set up」)
IDE 的定义与例子 Setting up the Development Environment text/08-fm-introduction.txt:29(搜「IDE is a software application」)
代码编辑器的定义与例子 Setting up the Development Environment text/08-fm-introduction.txt:33(搜「code editor is primarily designed」)
安装时的三个关键选项 Setting up the Development Environment text/08-fm-introduction.txt:83(搜「Open with Code」)
深色主题建议 Setting up the Development Environment text/08-fm-introduction.txt:89(搜「Dark Modern theme」)
一个项目一个文件夹 Setting up the Development Environment text/08-fm-introduction.txt:131(搜「separate folder for each project」)
Live Server 及其即时预览 Setting up the Development Environment text/08-fm-introduction.txt:137(搜「live server extension」) · text/08-fm-introduction.txt:139(搜「instant preview」)
章末小结重申 Live Server Setting up the Development Environment text/08-fm-introduction.txt:163(搜「instant previewing」)

  1. 出处:「Setting up the Development Environment」第 27 段(text/08-fm-introduction.txt:27,搜「both software tools used in web development」)。原文把编辑器和 IDE 并列为「写和管理代码的工具」,然后按功能范围区分两者。 ↩

  2. 出处:「Setting up the Development Environment」第 29 段(text/08-fm-introduction.txt:29,搜「IDE is a software application」)。原文:「An IDE is a software application that consists of a source code editor with syntax highlighting, along with built-in tools to help you develop and debug your code.」并提醒 Microsoft Visual Studio 不要与 VS Code 混淆。 ↩

  3. 出处:「Setting up the Development Environment」第 33 段(text/08-fm-introduction.txt:33,搜「code editor is primarily designed」)。 ↩

  4. 出处:「Setting up the Development Environment」第 83 段(text/08-fm-introduction.txt:83,搜「Open with Code」)。原文列的三项:Add "Open with Code" action to the context menu;Register as the default editor;Select Add to PATH。 ↩↩

  5. 出处:「Setting up the Development Environment」第 89 段(text/08-fm-introduction.txt:89,搜「Dark Modern theme」)。 ↩↩↩

  6. 出处:「Setting up the Development Environment」第 123–131 段(text/08-fm-introduction.txt:125,搜「Open Folder」;:131,搜「a new folder named website」)。 ↩

  7. 出处:「Setting up the Development Environment」第 131 段(text/08-fm-introduction.txt:131,搜「separate folder for each project」)。原文:「It is recommended to create a separate folder for each project or website in order to maintain an organized and structured workspace.」 ↩↩

  8. 出处:「Setting up the Development Environment」第 137 段(text/08-fm-introduction.txt:137,搜「live server extension」)。 ↩↩

  9. 出处:「Setting up the Development Environment」第 139 段(text/08-fm-introduction.txt:139,搜「instant preview」)。补充(不在书里,来自通用知识):file 协议与 http 协议的差异(表单、localStorage 行为不同)是这一行的常识,书里没有展开原因,我们补在此。 ↩

  10. 出处:「Setting up the Development Environment」第 163 段(text/08-fm-introduction.txt:163,搜「instant previewing」)。 ↩↩