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

文章目录

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

第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版包含最新特性。
1. 运行安装程序：
  双击下载的.msi文件启动安装向导。在安装过程中，关键配置选项包括：
- ✅ 勾选Add to PATH ( 自动添加环境变量 )
- ✅ 选择Install additional tools(可选，自动安装Chocolatey、Python等工具)
1. 验证安装：
  安装完成后，打开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，提高命令行操作效率。

启用自动保存：

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

配置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博客列表并展示统计信息。
在这里插入图片描述

项目初始化

创建项目目录：

mkdir blog-statistics
cd blog-statistics

初始化npm项目：
```
npm init -y
```

安装依赖包：

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;
        })

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