认识你的电脑：文件、路径、和那个叫 VSCode 的编辑器

这是 zero-to-tech 系列的第二篇。第一篇讲了「一个网页请求从浏览器到服务器中间发生了什么」，这一篇回到更基础的事：你每天都在用的电脑，里面到底是怎么组织的。

我前同事是这么形容「零基础小白」的：「他电脑上桌面堆满了图标，找文件用搜索，从来没看过 C 盘里到底有什么。」

这种状态不是错——但它会让你在跟程序员/产品/AI 协作时，频繁撞到「目录」「路径」「当前目录」这类词。每次都卡一下，久了会很累。

这一篇的目标，就是把这层窗户纸彻底捅破。

一句话总结

电脑的文件 = 一颗树。树根叫根目录，从根到任一文件的路径叫绝对路径，相对于当前位置的路径叫相对路径。文件类型靠扩展名识别，VSCode 是目前最适合新手写代码的编辑器。

一、整体心智模型：电脑 = 一棵树

不管你的电脑是 Windows、macOS 还是 Linux，文件系统都可以想象成一棵倒过来的树：

              根目录（/  或  C:\）
            ┌─────┼─────┐
           ...   ...   ...        ← 顶层目录
         ┌─┴─┐ ┌─┴─┐ ┌─┴─┐
         ... ... ... ...         ← 子目录、文件

树根：根目录（Windows 是 C:\，macOS / Linux 是 /）
树枝：文件夹（也叫「目录」）
树叶：文件（普通文件、可执行文件、符号链接、设备文件等）

关键认知：所有文件都在这棵树里，没有"在树外面"的文件。你桌面上的图标、D 盘的文件、外接 U 盘的文件，最终都能追到树里某个位置。

二、文件：一个有名字、有内容的数据块

文件 = 硬盘上有名字 + 有内容的一段数据。

最朴素的拆解：

部分	说明
文件名	你在资源管理器里看到的名字，如 `report.txt`
扩展名	文件名最后 `.` 后的字母，如 `.txt`，告诉系统「这是文本」
内容	硬盘上真实的字节序列，可以是文字、图片、视频、代码
元数据	创建时间、修改时间、大小、权限等"关于文件的信息"

关键点：操作系统不关心你文件里装的是什么——它只存字节。文件"是什么类型"是约定（扩展名 + 内容头几个字节），不是物理事实。

三、绝对路径：从根出发，完整地址

绝对路径 = 从根目录开始，一层一层写下来，直到目标文件的完整地址。

3.1 Windows 的绝对路径

Windows 有多个根（每个盘符一个根：C:\、D:\ 等）：

C:\Users\YourName\Documents\report.txt
C:\Program Files\Google\Chrome\Application\chrome.exe
D:\projects\my-app\src\index.js

格式特点：

根：C:\、D:\ 等（盘符 + 冒号 + 反斜杠）
分隔符：反斜杠 \（注意不是 /！）
大小写不敏感：Report.txt 和 report.txt 是同一个文件

3.2 macOS / Linux 的绝对路径

Unix 系（macOS / Linux）只有一个根 /：

/Users/YourName/Documents/report.txt
/home/yourname/projects/my-app/src/index.js
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

格式特点：

唯一的根：/
分隔符：正斜杠 /
大小写敏感：Report.txt 和 report.txt 是两个不同的文件

3.3 为什么你应该知道绝对路径

配置文件里写路径，几乎都用绝对路径
命令行工具报错时，错误信息里的路径都是绝对路径
部署服务时，配置项里指定的目录是绝对路径
绝对路径是「文件身份证号」——它在全球任何机器上都能唯一定位那个文件（在同一台机器上当然也是）

四、相对路径：相对于"我现在在哪"

相对路径 = 相对于当前所在目录的路径。

4.1 两个核心符号

符号	含义
`.`	当前目录（一个点）
`..`	上级目录（两个点）
`~`	家目录（macOS / Linux，Windows 里也有类似概念）

4.2 假设你现在的"当前位置"是 `/Users/coya/projects/website`

./src/index.js              →  /Users/coya/projects/website/src/index.js
./public/favicon.ico        →  /Users/coya/projects/website/public/favicon.ico
../shared/utils.js          →  /Users/coya/projects/shared/utils.js    （往上跳一级再进 shared）
../../docs/readme.md        →  /Users/coya/docs/readme.md              （往上跳两级再进 docs）
~/Documents/notes.md        →  /Users/coya/Documents/notes.md          （从家目录出发）

4.3 为什么用相对路径

代码里用相对路径，迁移时不用改：你把整个项目文件夹搬到任何位置，相对路径都还能用；绝对路径一旦搬就要全部改。
多人协作时一致：你机器上的 /Users/coya/... 别人机器上根本不存在，但 ./src/index.js 在谁机器上都是同一个文件。
Git 仓库里基本都是相对路径：README.md、src/app.ts 这样写，永远不会因为搬到别处而失效。

4.4 一句话区分

绝对路径回答「这个文件在哪里」；相对路径回答「从这个文件出发，怎么到那个文件」。

五、文件类型和扩展名

扩展名 = 文件名最后一个 . 后面的字母序列。

5.1 常见扩展名速查

扩展名	类型	怎么打开
`.txt`	纯文本	任何编辑器
`.md`	Markdown 文本（带格式）	任何编辑器，渲染后是带样式的网页
`.docx`	Word 文档	Microsoft Word、WPS、Pages
`.pdf`	PDF 文档	Adobe Reader、浏览器、预览
`.png` `.jpg` `.gif` `.webp` `.svg`	图片	图片浏览器、看图软件、浏览器
`.mp3` `.wav` `.flac`	音频	音频播放器
`.mp4` `.mov` `.mkv`	视频	视频播放器
`.zip` `.tar.gz` `.7z`	压缩包	解压工具
`.exe` (Windows)	可执行文件	双击运行（注意来源安全）
`.sh`	Shell 脚本（macOS / Linux）	终端
`.py`	Python 源代码	VSCode、PyCharm 等
`.js` `.ts`	JavaScript / TypeScript 源代码	VSCode、WebStorm 等
`.html` `.css`	网页文件	浏览器、编辑器
`.json`	结构化数据	任何编辑器、代码格式化工具

5.2 关键认知：扩展名只是约定

操作系统认扩展名是为了方便，但真正决定文件类型的是内容字节。

最简单的实验：

创建一个 test.txt，里面写 print("hello")（Python 代码）
把文件改名成 test.py（或者反过来）

文件名变了，但内容没变。文件"是不是 Python 代码"取决于内容，跟扩展名关系不大。

这也是为什么：

macOS / Linux 经常可以无后缀运行脚本（看文件头 #! shebang 决定用什么解释器）
一些高级工具会忽略扩展名，根据内容自动判断类型

实操建议：日常使用相信扩展名就行，但心里要知道「扩展名是给人看的，不是给电脑看的」。

六、代码文件：纯文本 + 某种编程语言

代码文件 = 纯文本文件 + 某种编程语言的语法。

为什么代码文件必须是纯文本：因为代码是给程序员读的，也是给编译器/解释器读的。两者都需要直接看到字符本身，不能是 Word 那种带样式的二进制。

怎么识别一种代码文件：

扩展名：.py（Python）、.js（JavaScript）、.ts（TypeScript）、.java、.go、.rs（Rust）、.cpp、.c、.html、.css...
内容首行（可选）：shebang #!/usr/bin/env python3 告诉系统"用 Python 解释这个文件"

重点：

代码文件没有特殊的存储格式，就是普通文本，字节级别和 .txt 一样
保存时编码很重要：现代默认都用 UTF-8，但早期文件可能是 GBK、Shift-JIS 等
换行符差异：Windows 用 \r\n，macOS/Linux 用 \n——历史上造成过很多奇怪的 bug

七、VSCode：最适合新手的代码编辑器

VSCode（Visual Studio Code）是 Microsoft 出品的免费、跨平台、插件丰富的代码编辑器。它不是 IDE（集成开发环境）那么重，也不是 Notepad 那么轻——刚好在中间，所以成为目前程序员最常用的编辑器。

7.1 它能做什么

能力	说明
语法高亮	不同语言的关键字、字符串、注释用不同颜色显示
自动补全	写一半时提示可能的选项（变量名、函数名、属性名）
代码跳转	按住 Ctrl/Command 点击函数名，直接跳到定义位置
实时错误检查	写错语法立刻红色波浪线，不需要跑起来才知道
集成终端	编辑器里直接打开命令行，不用切换窗口
Git 集成	看到文件改动、暂存、提交、推送，全在编辑器里
调试器	一步步执行代码，看每一步变量的值
扩展插件	装个插件就能支持新语言、新框架、新工具

7.2 第一次打开 VSCode：先做这 3 件事

1. 打开一个项目文件夹

File → Open Folder → 选择你的项目文件夹

VSCode 的核心心智模型是「打开一个文件夹，里面所有文件一起管理」。不要只打开单个文件——你会失去所有跨文件的智能能力（跳转、搜索、引用）。

2. 安装语言扩展

打开任意 .py / .js / .ts / .go 文件，VSCode 会自动推荐安装对应的语言扩展。点「Install」就行。

常用入门扩展：

扩展	作用
Chinese (Simplified) Language Pack	中文界面
Python	Python 智能提示、调试
ESLint / Prettier	JavaScript / TypeScript 代码风格检查 + 格式化
Markdown All in One	Markdown 写作增强
GitLens	Git 历史可视化

3. 打开集成终端

Ctrl + `  （macOS 是 Cmd + `）

或者菜单 Terminal → New Terminal。在 VSCode 里直接跑命令，不用切换窗口。

7.3 一个最小工作流

1. File → Open Folder   打开项目
2. 编辑文件             左侧资源管理器点文件 → 修改
3. Ctrl + S             保存
4. Ctrl + `             打开终端
5. 跑命令               比如 npm run dev / python script.py
6. F5                   启动调试（如果配好了）

7.4 VSCode 不是唯一的选择

场景	替代品
想更轻量	Sublime Text、Vim、Emacs
重度 Python	PyCharm
重度 Java / Kotlin	IntelliJ IDEA
重度前端	WebStorm（JetBrains 全家桶）
在线编辑器	GitHub Codespaces、StackBlitz、CodeSandbox

但对刚入门不知道选什么的情况，VSCode 是最安全的选择——免费、跨平台、什么语言都能写、社区大、文档全。

八、把今天的内容串起来

概念	一句话
文件	有名字、有内容的字节块
路径	文件在文件系统里的"地址"
绝对路径	从根出发的完整地址
相对路径	相对于当前目录的地址（`.`、`..`）
扩展名	文件名最后 `.` 后的字母（约定，不是物理事实）
代码文件	纯文本 + 某种编程语言
VSCode	跨平台、免费、插件丰富的代码编辑器

九、给非工程师的 3 个心智模型

桌面不是文件系统的根：桌面上看到的图标是「根目录的某个子文件夹的快捷方式」。你完全可以把整个桌面文件夹搬到 D:\桌面，所有快捷方式依然能用——桌面只是视图。
"." 和 ".." 是相对路径的灵魂：所有相对路径都基于这两个符号。. 是「我脚下」，.. 是「回头一步」。掌握它们，你就掌握了 90% 的相对路径场景。
VSCode 的文件夹心智模型：VSCode 不是用来"打开一个文件"的工具，是用来"打开一个项目"的工具。整个项目一起管，跨文件能力才能发挥。

十、一句话总结

电脑的文件系统是一棵树。绝对路径是从根出发的完整地址；相对路径是相对于当前位置、用 . 和 .. 表达的地址。扩展名是给人看的约定，文件类型由内容字节决定。VSCode 是当前最适合新手写代码的编辑器——打开文件夹、安装语言扩展、用集成终端，三步入门。

这个系列下一篇会写什么

zero-to-tech / 命令行是什么：终端、shell、那些神秘的黑窗口
zero-to-tech / 进程、线程、内存：你的电脑同时在跑多少事
zero-to-tech / Git 是什么：版本控制的最小心智模型

上一篇：网络是怎么工作的（英文摘要版）