使用 VS Code 开发 Node.js-node.js-CSS教程网

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

1. 准备工作

确保已完成以下步骤：

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

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

步骤 1：创建项目文件夹

创建一个新文件夹（如 my-node-app）。
在 VS Code 中打开该文件夹：
- 点击“文件” > “打开文件夹”，选择项目文件夹。

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

打开 VS Code 内置终端：
- 快捷键：Ctrl + ~（Windows/Linux）或 Cmd + ~（macOS）。
初始化项目，生成 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

安装 ESLint 和 Prettier 依赖：

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

初始化 ESLint：
```
npx eslint --init
```
按提示选择配置（如使用 Airbnb 规范，支持 Node.js 和 ES6）。

创建 Prettier 配置文件 .prettierrc：

{
  "semi": true,
  "trailing***ma": "es5",
  "singleQuote": true,
  "printWidth": 80
}

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

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

创建第一个程序

在项目文件夹中创建 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/');
});

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

使用 npm 脚本

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

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

在终端运行：
```
npm start
```

4. 调试 Node.js 代码

配置调试环境

创建调试配置文件：

点击 VS Code 左侧“运行和调试”图标（或 Ctrl+Shift+D）。
点击“创建 launch.json 文件”，选择“Node.js”环境。

默认生成 launch.json，内容如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

设置断点：
- 在 index.js 中点击代码行号左侧，添加红色断点。
启动调试：
- 点击“运行和调试”面板中的绿色“播放”按钮（或按 F5）。
- VS Code 将运行程序并在断点处暂停，允许查看变量、调用栈等。

调试技巧

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

5. 开发 Express 应用（示例）

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

安装 Express：
```
npm install express
```

创建 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}/`);
});

运行：
```
node app.js
```
访问 http://localhost:3000，看到“Hello, Express!”。
使用 Nodemon 自动重启：
- 安装 Nodemon：
```
npm install --save-dev nodemon
```
- 修改 package.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.***/docs）。

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

转载请说明出处内容投诉
CSS教程网 » 使用 VS Code 开发 Node.js

模板网

分享到：