程序员的第一辆车：从选车到养车 —— 用 JavaScript 搞懂“工具”这件事

大家好，我是你们的老学长，一个在 211 计算机专业摸爬滚打多年、靠写技术博客苟活至今的研究生。今天这篇教程，不是教你怎么买特斯拉，也不是教你换机油——程序员的第一辆车，其实是你的开发工具链。

我当初学编程的时候，以为会写 console.log("Hello World") 就能当大神了。结果呢？连代码保存在哪都不知道，终端报错看得一脸懵，更别说调试、打包、部署这些“养车”操作了。写代码只是开车，而工具才是你的车。没车，你再会踩油门也跑不起来。

所以，今天我就用最犀利（带点吐槽）的方式，带你从 选车（选工具） 到 养车（用工具），手把手搞定程序员的“第一辆车”——并用 JavaScript 做实战演示。

---

一、这“车”到底是什么？为什么非得有？

简单说：“工具”就是帮你写代码、跑代码、查错误、发上线的一整套软件和流程。

你以为程序员整天在敲键盘写逻辑？错！80% 的时间都在和工具较劲：

• 代码写完怎么运行？
• 报错了怎么看？
• 怎么把代码变成别人能用的网站？
• 怎么让代码跑得更快、更安全？

这些问题，光靠 notepad.exe 是解决不了的。你需要一套完整的“车辆系统”——包括引擎（运行环境）、方向盘（编辑器）、仪表盘（调试工具）、加油站（包管理器）等等。

而 JavaScript，作为前端乃至全栈开发的“通用汽油”，是检验你这辆车好不好用的最佳试金石。

---

二、环境准备：别再用记事本了！选对“车架”

1. 安装 Node.js —— 你的 JavaScript 引擎

JavaScript 最初只能在浏览器里跑。但有了 Node.js，你就能在电脑本地运行 JS 了。这是“养车”的基础。

安装步骤（超简单）：

1. 打开 https://nodejs.org
2. 下载 LTS 版本（别贪新，稳定最重要）
3. 双击安装，一路 Next

验证是否成功：

node -v
npm -v

如果输出类似 v18.17.0 和 9.6.7，恭喜，你的“发动机”装好了！

💡 我当初装完就傻乎乎地直接写 .js 文件双击运行——结果弹出记事本。别笑，真有人这么干！

---

2. 选编辑器：VS Code 是唯一答案

别用 Sublime，别用 WebStorm（除非公司报销），VS Code 免费、快、插件多，是学生党和新手的神。

• 官网：https://code.visualstudio.com
• 安装后必装插件：
  • ESLint：帮你检查代码规范
  • Prettier：自动格式化代码（拯救缩进强迫症）
  • Live Server：一键启动本地服务器（前端必备）

🚫 吐槽时间：如果你还在用 Dreamweaver 写 HTML，请立刻卸载。那玩意儿比诺基亚还古董。

---

3. 终端（Terminal）：你的方向盘

Windows 用户请用 PowerShell 或 Git Bash（别用 cmd，太原始）。Mac/Linux 用户直接用自带终端。

重要命令速查表：

命令	作用
cd folder_name	进入文件夹
ls (Mac/Linux) / dir (Windows)	查看当前目录文件
node app.js	运行 JS 文件
npm init -y	初始化项目（生成 package.json）

---

三、核心概念：什么是“工具链”？JS 如何被“养”？

1. 工具 ≠ 单个软件，而是一套协作系统

想象你的 JS 代码是一块生肉：

• Node.js 是灶台（提供运行环境）
• npm 是菜市场（下载别人写好的工具/库）
• Webpack/Vite 是料理机（把代码打包压缩）
• ESLint 是质检员（检查你有没有放错调料）

它们各司其职，但必须协同工作。

2. JavaScript 的两种运行方式

方式	场景	特点
浏览器直接运行	学习、小 demo	简单，但功能受限
Node.js 运行	项目开发、服务端	功能全，可操作文件、网络等

举个栗子：

// browser.js（在 HTML 中用 <script> 引入）
alert("Hello from browser!");

// node.js（在终端运行 node node.js）
console.log("Hello from Node.js!");
const fs = require('fs');
fs.writeFileSync('test.txt', 'I am alive!');

后者能操作文件系统，前者不能。这就是“养车”和“推车”的区别。

---

四、实战项目：打造你的第一辆“JS 小车”

目标：用 JavaScript 写一个命令行待办事项（Todo CLI）工具，体验完整开发流程。

步骤 1：创建项目

mkdir my-todo-cli
cd my-todo-cli
npm init -y

此时会生成 package.json，这是你项目的“车辆登记证”。

步骤 2：写核心逻辑（app.js）

// app.js
const fs = require('fs');
const path = require('path');

const TODO_FILE = path.join(__dirname, 'todos.json');

// 读取待办事项
function readTodos() {
  if (!fs.existsSync(TODO_FILE)) {
    return [];
  }
  const data = fs.readFileSync(TODO_FILE, 'utf8');
  return JSON.parse(data || '[]');
}

// 保存待办事项
function saveTodos(todos) {
  fs.writeFileSync(TODO_FILE, JSON.stringify(todos, null, 2));
}

// 添加任务
function addTodo(task) {
  const todos = readTodos();
  todos.push({ id: Date.now(), task, done: false });
  saveTodos(todos);
  console.log(`✅ Added: ${task}`);
}

// 列出任务
function listTodos() {
  const todos = readTodos();
  if (todos.length === 0) {
    console.log('📭 No todos yet!');
    return;
  }
  todos.forEach(t => {
    const mark = t.done ? '✔' : '○';
    console.log(`${mark} [${t.id}] ${t.task}`);
  });
}

// 主逻辑：根据命令行参数执行操作
const command = process.argv[2];
const arg = process.argv[3];

if (command === 'add' && arg) {
  addTodo(arg);
} else if (command === 'list') {
  listTodos();
} else {
  console.log('Usage: node app.js add "task" | node app.js list');
}

步骤 3：测试你的“小车”

node app.js add "Learn JavaScript"
node app.js add "Write blog"
node app.js list

输出：

✅ Added: Learn JavaScript
✅ Added: Write blog
○ [1698765432100] Learn JavaScript
○ [1698765432101] Write blog

步骤 4：让它更像“工具”——配置 npm script

编辑 package.json，在 "scripts" 中添加：

{
  "scripts": {
    "add": "node app.js add",
    "list": "node app.js list"
  }
}

现在你可以这样用：

npm run add -- "Buy milk"
npm run list

✅ 看！你已经从“写代码的人”升级为“造工具的人”了。

---

五、常见问题（FAQ）：新手翻车现场实录

Q1：为什么我的 node app.js 报错说“找不到模块”？

A：你可能在错误的目录下运行。确保你在 my-todo-cli 文件夹内。用 pwd（Mac/Linux）或 cd（Windows）确认当前位置。

Q2：todos.json 文件去哪了？

A：它会自动生成在项目根目录。如果看不到，可能是隐藏了（Mac）或没刷新（VS Code 侧边栏点刷新图标）。

Q3：能不能不用命令行，做个图形界面？

A：可以！但那是“换车”——比如用 Electron 做桌面应用。先学会开手动挡（CLI），再考虑自动挡（GUI）。

Q4：这个工具能给别人用吗？

A：当然！只要对方有 Node.js，把整个文件夹发给他就行。更高级的做法是发布到 npm，但这属于“改装车”范畴，下次再讲。

---

六、学习建议：下一步怎么“改装升级”？

你现在的“小车”是纯手动挡。下一步可以：

1. 加个“导航仪”：用 yargs 库美化命令行参数解析

   npm install yargs
   

2. 上“自动驾驶”：学习 Vite 或 Webpack，理解现代前端构建工具
3. 换“新能源”：尝试 TypeScript，给 JS 加上类型检查（防 bug 神器）
4. 考“驾照”：系统学习 Node.js 核心模块（http, stream, child_process）

🚨 避坑指南：别一上来就学 React/Vue！先把 JS 基础和工具链搞明白。否则就像没学交通规则就上高速——迟早翻车。

---

结语：工具是程序员的延伸

我写这篇教程，是因为看到太多新人卡在“环境配置”这一关，误以为自己不适合编程。其实，不是你不行，是你的“车”没选对、没养好。

JavaScript 只是燃料，真正的核心是你对工具的理解和掌控力。当你能随手搭起一个项目、调试一个 bug、部署一个服务时，你就不再是“码农”，而是“造轮子的人”。

记住：优秀的程序员，90% 的时间在优化工具，10% 的时间在写业务逻辑。

现在，启动你的引擎，去造属于你的第一辆车吧！

本文代码已整理至 GitHub（虚拟地址）：github.com/yourname/my-first-js-car
欢迎关注我的博客，下期讲《如何用 Git 给你的车装上“倒车影像”》。