使用 VS Code 开发 Node.js

以下是关于如何在 Visual Studio Code (VS Code) 中开发 Node.js 应用程序的简洁中文指南，涵盖环境配置、调试和常用插件，适合初学者和进阶用户。

---

1. 准备工作

确保已完成以下步骤：

• 安装 Node.js：按照之前的指南安装 Node.js 和 npm（参考 Node.js 官网或前文）。
• 安装 VS Code：
• 下载并安装 Visual Studio Code（https://code.visualstudio.com/）。
• 验证安装：打开 VS Code，确认正常运行。

---

2. 配置 VS Code 开发 Node.js 环境

步骤 1：创建项目文件夹

1. 创建一个新文件夹（如 my-node-app）。
2. 在 VS Code 中打开该文件夹：

• 点击“文件” > “打开文件夹”，选择项目文件夹。

步骤 2：初始化 Node.js 项目

1. 打开 VS Code 内置终端：

• 快捷键：Ctrl + ~（Windows/Linux）或 Cmd + ~（macOS）。

1. 初始化项目，生成 package.json：

   npm init -y

步骤 3：安装常用插件

在 VS Code 中安装以下插件以提升开发效率（点击左侧“扩展”图标搜索并安装）：

• ESLint：代码语法检查和格式化，支持 JavaScript 规范。
• Prettier – Code formatter：自动格式化代码，保持一致性。
• Node.js Extension Pack：包含 Node.js 开发常用工具，如调试支持。
• JavaScript (ES6) code snippets：提供 JavaScript 和 Node.js 代码片段，加速编码。
• Path Intellisense：自动补全文件路径。

步骤 4：配置 ESLint 和 Prettier

1. 安装 ESLint 和 Prettier 依赖：

   npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

2. 初始化 ESLint：

   npx eslint --init

按提示选择配置（如使用 Airbnb 规范，支持 Node.js 和 ES6）。

3. 创建 Prettier 配置文件 .prettierrc：

   {
     "semi": true,
     "trailingComma": "es5",
     "singleQuote": true,
     "printWidth": 80
   }

4. 配置 VS Code 设置：

• 打开“设置”（Ctrl + ,），搜索以下选项并启用：
  • Editor: Format On Save：保存时自动格式化。
  • ESLint: Enable：启用 ESLint 语法检查。

---

3. 编写和运行 Node.js 代码

创建第一个程序

1. 在项目文件夹中创建 index.js：

   const http = require('http');
   const server = http.createServer((req, res) => {
     res.statusCode = 200;
     res.setHeader('Content-Type', 'text/plain');
     res.end('Hello, Node.js from VS Code!\n');
   });
   server.listen(3000, () => {
     console.log('Server running at http://localhost:3000/');
   });

2. 运行程序：

• 在终端输入：
  bash node index.js
• 打开浏览器，访问 http://localhost:3000，应看到“Hello, Node.js from VS Code!”。

使用 npm 脚本

1. 编辑 package.json，添加启动脚本：

   "scripts": {
     "start": "node index.js"
   }

2. 在终端运行：

   npm start

---

4. 调试 Node.js 代码

配置调试环境

1. 创建调试配置文件：

• 点击 VS Code 左侧“运行和调试”图标（或 Ctrl+Shift+D）。
• 点击“创建 launch.json 文件”，选择“Node.js”环境。
• 默认生成 launch.json，内容如下：
  json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/index.js" } ] }

1. 设置断点：

• 在 index.js 中点击代码行号左侧，添加红色断点。

1. 启动调试：

• 点击“运行和调试”面板中的绿色“播放”按钮（或按 F5）。
• VS Code 将运行程序并在断点处暂停，允许查看变量、调用栈等。

调试技巧

• 监视变量：在调试面板添加需要监视的变量。
• 步进/步出：使用 F10（步进）、F11（步入）控制调试流程。
• 调试控制台：在调试时使用 VS Code 的“调试控制台”执行动态代码。

---

5. 开发 Express 应用（示例）

Express 是 Node.js 的流行框架，适合快速构建 Web 应用。

1. 安装 Express：

   npm install express

2. 创建 app.js：

   const express = require('express');
   const app = express();
   const port = 3000;

   app.get('/', (req, res) => {
     res.send('Hello, Express!');
   });

   app.listen(port, () => {
     console.log(`Server running at http://localhost:${port}/`);
   });

3. 运行：

   node app.js

访问 http://localhost:3000，看到“Hello, Express!”。

4. 使用 Nodemon 自动重启：

• 安装 Nodemon：
  bash npm install --save-dev nodemon
• 修改 package.json：
  json "scripts": { "start": "node app.js", "dev": "nodemon app.js" }
• 运行 npm run dev，代码更改后服务器自动重启。

---

6. 实用技巧

• 代码补全：VS Code 对 JavaScript/Node.js 有内置智能补全，结合插件更强大。
• 终端集成：使用 VS Code 内置终端运行 npm 命令，避免切换窗口。
• Git 集成：VS Code 内置 Git 支持，方便版本管理（需安装 Git）。
• 扩展 Marketplace：根据需求安装其他插件，如 REST Client（测试 API）或 Docker（容器化开发）。

---

7. 常见问题

• 模块未找到：确保运行 npm install 安装依赖。
• 端口冲突：检查 3000 端口是否被占用，必要时更改端口号。
• 调试失败：确认 launch.json 中的 program 路径正确。

---

8. 下一步

• 学习 Express 或 Koa 框架开发 RESTful API。
• 探索 VS Code 的任务运行器（Tasks）自动化构建流程。
• 参考 Node.js 文档（https://nodejs.org/en/docs/）和 VS Code 文档（https://code.visualstudio.com/docs）。

如需更详细的某部分讲解或示例代码，请告诉我！