【Node.js从 0 到 1：入门实战与项目驱动】2.4 开发工具推荐（VS Code 、IDEA及插件、终端工具、调试工具）

第2章：Nodejs环境搭建 —— 准备你的开发工具（基于Windows 10）

2.4 开发工具推荐

• Node.js开发效率很大程度上取决于开发工具的选择与配置。
• 一个精心配置的开发环境可以让你专注于编码而不是环境问题，提供更顺畅的开发体验。
• 本节将为你推荐Windows 10平台上Node.js开发所需的各类工具，包括代码编辑器、终端工具和调试工具，并通过实战案例展示如何应用这些工具。

2.4.1 Node.js开发环境搭建

在开始选择开发工具前，我们需要先搭建好Node.js基础开发环境。

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，使JavaScript能够脱离浏览器在服务器端运行。

安装Node.js和npm

• 1. 下载Node.js安装包：
     访问Node.js官方网站，下载LTS(长期支持版)或Current(最新版)版本的安装包。LTS版更稳定适合生产环境，Current版包含最新特性。
• 2. 运行安装程序：
     双击下载的.msi文件启动安装向导。在安装过程中，关键配置选项包括：
  • ✅ 勾选Add to PATH ( 自动添加环境变量 )
  • ✅ 选择Install additional tools(可选，自动安装Chocolatey、Python等工具)
• 3. 验证安装：
     安装完成后，打开CMD或PowerShell，输入以下命令验证安装：

  node -v  # 查看Node.js版本
  npm -v   # 查看npm版本
  

  如果显示版本号(如v20.12.2和10.5.0)，则表示安装成功。
  

环境配置

解决权限问题和配置自定义路径：

# 创建全局模块存放目录
mkdir D:\node_global
mkdir D:\node_cache# 配置npm
npm config set prefix "D:\node_global"
npm config set cache "D:\node_cache"# 将路径添加到系统环境变量PATH中

多版本管理(可选)

使用nvm-windows(Windows版Node版本管理器)管理多版本Node.js：

nvm list available  # 查看可安装版本nvm install 18.16.0 # 安装指定版本nvm use 18.16.0     # 切换版本

2.4.2 代码编辑器：VS Code及其插件配置

• Visual Studio Code(简称VS Code)是微软开发的轻量级但功能强大的源代码编辑器，已成为Node.js开发的首选编辑器。

VS Code核心优势

• 智能代码补全：基于语义分析提供智能提示
• 集成调试功能：内置调试支持，可直接在编辑器中设置断点、检查变量
• Git集成：内置Git版本控制功能
• 扩展性强：通过安装扩展支持多种编程语言和工作流程

必备插件推荐

以下是26个能够极大提升Node.js开发效率的VS Code插件，为了更清晰地展示这些插件，我整理了以下表格。

插件类别	插件名称	主要功能	适用场景
通用开发增强	Prettier - Code formatter	自动格式化代码，保持风格统一	JavaScript/TypeScript/HTML/CSS等前端语言
	ESLint	检测并自动修复代码错误，确保编码标准	JavaScript/TypeScript开发
	GitLens	增强Git集成，展示详细提交历史和代码注释	需要频繁进行版本控制的项目
	Bracket Pair Colorizer	为配对括号着色，使代码结构更清晰	处理深层嵌套的代码逻辑
	Auto Import	自动查找、分析并提供导入建议	TypeScript/TSX开发
Node.js开发专用	Node.js Extension Pack	Node.js开发扩展包，包含多种功能	Node.js项目开发
	npm	提供npm包管理功能，运行脚本	所有Node.js项目
	Thunder Client	轻量级REST API客户端，测试API功能	API开发和测试
	Code Runner	快速运行代码片段	快速测试代码逻辑
前端开发专用	Live Server	提供HTML/CSS/JS文件的实时热加载和浏览器预览	前端网页开发
	Auto Rename Tag	自动匹配并重命名配对的HTML/JSX/XML标签	HTML/JSX/XML开发
	Import Cost	在行尾显示导入包的大小	前端性能优化
	Tailwind CSS IntelliSense	提供Tailwind CSS的高级自动完成和工具提示	使用Tailwind CSS的项目
AI辅助编程	通义灵码(TONGYI Lingma)	智能代码续写、优化、注释生成和代码解释	提高编码效率和质量的场景
	GitHub Copilot	AI编程助手，提供代码建议	多种编程任务
主题与美化	Material Theme	美观大方的界面主题	所有开发场景
	vscode-icons	用图标增强文件导航体验	所有开发场景
	Community Material Theme	社区提供的Material主题变体	所有开发场景

VS Code配置建议

为了获得更好的Node.js开发体验，建议进行以下配置：

• 1. 配置终端：
     将默认终端设置为PowerShell或Windows Terminal，提高命令行操作效率。
• 2. 启用自动保存：

  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
  

• 3. 配置npm集成：

  "npm.enableScriptExplorer": true,
  "npm.packageManager": "npm",
  "npm.scriptCodeLens.enabled": true
  

2.4.3 调试工具与技术

调试是Node.js开发过程中不可或缺的环节，好的调试工具和技术能帮助快速定位和解决问题。

内置调试器

Node.js自带内置调试器，可以使用以下命令启动：

node inspect app.js

VS Code调试配置

在VS Code中，可以通过配置launch.json文件来设置调试环境：

{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Launch Program","program": "${workspaceFolder}/app.js","env": {"NODE_ENV": "development"},"console": "integratedTerminal"}]
}

配置完成后，可以设置断点、查看变量值、单步调试等。

Chrome DevTools调试

Node.js还支持使用Chrome DevTools进行调试：

node --inspect-brk app.js

然后在Chrome浏览器中打开chrome://inspect，即可使用熟悉的DevTools界面进行调试。

Iron-node调试工具

Iron-node是一个基于Node.js的调试工具，它提供了一个交互式的调试环境。

特点和优势：

• 实时调试：在代码运行时提供实时的调试功能，可以随时设置断点、查看变量值等
• 命令行界面：方便地输入调试命令，如设置断点、查看变量值、执行表达式等
• 多语言支持：支持JavaScript、TypeScript、CoffeeScript等
• 轻量级：安装和配置简单，不会给系统带来额外的负担
• 跨平台：可以在Windows、Mac和Linux等多个操作系统上运行

安装与使用：

npm install -g iron-node
iron-node app.js

whistle调试代理工具

whistle是基于Node实现的跨平台web调试代理工具，支持所有安装了Node的操作系统。

主要功能：

• 查看请求(响应)的基本信息、头部、内容及Timeline等
• 重发请求、构造请求
• 设置hosts
• 修改请求的url参数、方法、头部、内容
• 延迟请求、限制请求速度、设置请求超时时间
• 替换本地文件或线上请求
• 修改响应的状态码、头部、内容(可以指定注入js、css或html)

安装与使用：

npm install -g whistle
wistle start

2.4.5 实战案例：创建博客统计工具

下面通过一个实际案例演示如何使用Node.js和推荐的工具开发一个博客统计工具，用于获取CSDN博客列表并展示统计信息。

项目初始化

1. 创建项目目录：

   mkdir blog-statistics
   cd blog-statistics
   

2. 初始化npm项目：

   npm init -y
   

3. 安装依赖包：

   npm install express superagent cheerio async
   npm install -g nodemon
   

项目结构设计

blog-statistics/
├── app.js                 # 主应用程序文件
├── routes/
│   └── blog.js           # 博客路由处理
├── public/
│   └── index.html        # 前端展示页面
├── package.json
└── node_modules/

核心代码实现

• package.json：

{"name": "blog-statistics","version": "1.0.0","description": "CSDN博客统计工具","main": "app.js","scripts": {"start": "node app.js","dev": "nodemon app.js"},"dependencies": {"express": "^4.18.2","axios": "^1.6.2","cheerio": "^1.0.0-rc.12","async": "^3.2.5"},"devDependencies": {"nodemon": "^3.0.1"},"keywords": ["blog", "statistics", "csdn"],"author": "Your Name","license": "MIT"
}

• 后端API实现(app.js)：

// 在 app.js 开头添加
console.log('程序开始启动...');const express = require('express');
const path = require('path');
const blogRouter = require('./routes/blog');  // 修正路径
const app = express();
const port = process.env.PORT || 3001;// 解决File未定义问题的兼容代码
if (typeof File === 'undefined') {global.File = class File {};
}// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));// 解析JSON请求体
app.use(express.json());
app.use(express.urlencoded({ extended: true }));// 使用博客路由
app.use('/api/blog', blogRouter);// 添加根路径路由，确保能访问index.html
app.get('/', (req, res) => {res.sendFile(path.join(__dirname, 'index.html'));
});// 404处理
app.use((req, res) => {res.status(404).json({ error: '请求的资源不存在' });
});// 错误处理中间件
app.use((err, req, res, next) => {console.error(err.stack);res.status(500).json({ error: '服务器内部错误' });
});// 启动服务器
app.listen(port, () => {console.log(`博客统计工具运行在 http://localhost:${port}`);console.log(`请打开浏览器访问上述地址`);
}).on('error', (err) => {if (err.code === 'EADDRINUSE') {console.error(`端口 ${port} 已被占用，请更换端口后重试`);} else {console.error('服务器启动失败:', err);}
});

• 博客路由处理(routes/blog.js)：

const express = require('express');
const router = express.Router();
const axios = require('axios');
const cheerio = require('cheerio');
const async = require('async');// 获取博客列表接口
router.get('/list', async (req, res) => {try {const userBlogLink = req.query.url;if (!userBlogLink) {return res.status(400).json({ error: '请输入博客地址' });}// 首先获取总页数const totalPage = await getTotalPage(userBlogLink);console.log(`总共发现 ${totalPage} 页博客`);// 并发获取所有页面的博客文章const pagePromises = [];for (let i = 1; i <= totalPage; i++) {pagePromises.push(getOnePageBlogLink(i, userBlogLink));}const blogsArr = await Promise.all(pagePromises);// 合并所有博客文章const allBlogs = blogsArr.flat();// 计算统计数据const stats = {total: allBlogs.length,readCount: 0,commentCount: 0,likeCount: 0};// 更新统计数据allBlogs.forEach(blog => {stats.readCount += blog.readCount || 0;stats.commentCount += blog.commentCount || 0;stats.likeCount += blog.likeCount || 0;})