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

文章目录

• 第2章：Nodejs环境搭建 —— 准备你的开发工具（基于Windows 10）
• • 2.4 开发工具推荐
  • • 2.4.1 Node.js开发环境搭建
    • • 安装Node.js和npm
      • 环境配置
      • 多版本管理(可选)
    • 2.4.2 代码编辑器：VS Code及其插件配置
    • • VS Code核心优势
      • 必备插件推荐
      • VS Code配置建议
    • 2.4.3 调试工具与技术
    • • 内置调试器
      • VS Code调试配置
      • Chrome DevTools调试
      • Iron-node调试工具
      • whistle调试代理工具
    • 2.4.5 实战案例：创建博客统计工具
    • • 项目初始化
      • 项目结构设计
      • 核心代码实现
      • 运行与调试
      • 项目扩展建议
    • 总结

第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_globalmkdir D:\\node_cache# 配置npmnpm 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-nodeiron-node app.js

whistle调试代理工具

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

主要功能：

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

安装与使用：

npm install -g whistlewistle start

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

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

项目初始化

1. 创建项目目录：

   mkdir blog-statisticscd blog-statistics

2. 初始化npm项目：

   npm init -y

3. 安装依赖包：

   npm install express superagent cheerio asyncnpm 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.htmlapp.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; })