开发环境 — 写代码之前,先把「写→看」的回路接上
开发环境 — 写代码之前,先把「写→看」的回路接上
这一章讲一件事: 开始写网页之前,要往电脑里装哪几样东西、为什么这么装。 东西有三样:一个写代码的编辑器(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. 作者的判断与证据
这一章属于「操作手册」型,判断密度低,但有两处值得标:
书内明确的做法(可以照抄):
属于作者经验、书里没给证据的说法:
- 「深色主题减少眼睛疲劳」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 → 浏览器里看到这个文件,且存盘即刷新。
- 前端只需要代码编辑器不需要重型 IDE;这一行的默认选择是 VS Code;
- 装的时候勾上「右键打开」「设为默认编辑器」「加入 PATH」三个选项,日后的麻烦少一半;
- 一个项目一个文件夹——因为文件夹结构就是网站的地址结构;
- 预览要用 Live Server 这类本地服务器,不要用双击文件(file://),因为 http:// 才是网页的真实生存环境;
- Live Server 的本质是「本地 http 服务器 + 文件监听」,将来一切 dev server 都是这个原理的加强版;
- 这一章装好的东西,是后面 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」) |
Footnotes
-
出处:「Setting up the Development Environment」第 27 段(
text/08-fm-introduction.txt:27,搜「both software tools used in web development」)。原文把编辑器和 IDE 并列为「写和管理代码的工具」,然后按功能范围区分两者。 ↩ -
出处:「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 混淆。 ↩ -
出处:「Setting up the Development Environment」第 33 段(
text/08-fm-introduction.txt:33,搜「code editor is primarily designed」)。 ↩ -
出处:「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。 ↩ ↩2 -
出处:「Setting up the Development Environment」第 89 段(
text/08-fm-introduction.txt:89,搜「Dark Modern theme」)。 ↩ ↩2 ↩3 -
出处:「Setting up the Development Environment」第 123–131 段(
text/08-fm-introduction.txt:125,搜「Open Folder」;:131,搜「a new folder named website」)。 ↩ -
出处:「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.」 ↩ ↩2 -
出处:「Setting up the Development Environment」第 137 段(
text/08-fm-introduction.txt:137,搜「live server extension」)。 ↩ ↩2 -
出处:「Setting up the Development Environment」第 139 段(
text/08-fm-introduction.txt:139,搜「instant preview」)。补充(不在书里,来自通用知识):file 协议与 http 协议的差异(表单、localStorage 行为不同)是这一行的常识,书里没有展开原因,我们补在此。 ↩ -
出处:「Setting up the Development Environment」第 163 段(
text/08-fm-introduction.txt:163,搜「instant previewing」)。 ↩ ↩2