初学者也能做代码审查？用 JavaScript 爬虫自动揪出坏代码！

大家好，我是一个从培训班出来的前端开发。当初学编程时，最怕听到“代码审查”这个词——听起来高大上，总觉得是大厂工程师才玩的东西。但其实，代码审查（Code Review）的核心目的特别朴素：别让烂代码溜进项目里。

今天这篇教程，我就带零基础的你，用 JavaScript 写一个简单的爬虫工具，自动扫描项目里的“危险代码”，实现最基础的代码审查优化。你不需要懂 Git、不需要会 CI/CD，只要会写几行 JS，就能迈出自动化审查的第一步！

---

为什么新手也要关心代码审查？

我当初学的时候，以为代码能跑就行。结果上线后，同事指着我的代码说：“这变量名 a1、b2 是认真的吗？”、“这里没做输入校验，容易被 XSS 攻击！”……那一刻我才明白：写代码不是自嗨，而是为团队和产品负责。

代码审查不是挑刺，而是：

• 发现潜在 bug
• 统一代码风格
• 防止安全漏洞
• 帮助新人成长

而今天我们要做的，就是用 JavaScript + 爬虫思维，让机器帮我们自动完成一部分审查工作！

📌 注意：这里的“爬虫”不是抓网页数据，而是“爬”你本地项目的代码文件，逐行检查内容。

---

环境准备：5 分钟搭好开发环境

我们只需要 Node.js 和一个文本编辑器（比如 VS Code）。

步骤 1：安装 Node.js

去官网 https://nodejs.org 下载 LTS 版本（长期支持版），一路默认安装即可。

验证是否成功：

node -v
npm -v

看到版本号就说明装好了！

步骤 2：创建项目目录

mkdir code-review-bot
cd code-review-bot
npm init -y

步骤 3：安装依赖

我们需要读取文件，所以用 Node.js 内置的 fs 模块就够了，无需额外安装 npm 包！

---

核心概念：什么是“代码审查优化”？

简单说，就是用规则自动检查代码是否符合规范。比如：

规则类型	示例
安全问题	是否使用了 eval()？是否拼接了用户输入到 HTML？
代码风格	变量名是否太随意（如 x, tmp1）？
性能隐患	是否在循环里调用了耗时函数？

我们今天的爬虫，就专注检查 安全类问题——这是新手最容易踩的坑！

---

实战项目：写一个 JavaScript 代码审查小工具

我们要实现的功能：扫描指定目录下所有 .js 文件，找出包含 eval() 或 innerHTML = 用户输入 的危险代码。

第一步：读取项目中的所有 JS 文件

新建文件 review.js，写入以下代码：

const fs = require('fs');
const path = require('path');

// 递归获取目录下所有 .js 文件
function getAllJsFiles(dir) {
  let results = [];
  const list = fs.readdirSync(dir);
  list.forEach(file => {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);
    if (stat && stat.isDirectory()) {
      results = results.concat(getAllJsFiles(filePath));
    } else if (file.endsWith('.js')) {
      results.push(filePath);
    }
  });
  return results;
}

这段代码会像“蜘蛛”一样，爬遍你整个项目文件夹，把所有 .js 文件路径收集起来。

第二步：定义审查规则

我们定义两个危险模式：

1. 使用了 eval()
2. 使用了 element.innerHTML = xxx（且 xxx 来自用户输入）

先写一个简单的检查函数：

function checkDangerousCode(filePath) {
  const content = fs.readFileSync(filePath, 'utf8');
  const lines = content.split('\n');
  const issues = [];

  lines.forEach((line, index) => {
    // 检查 eval
    if (line.includes('eval(')) {
      issues.push({
        file: filePath,
        line: index + 1,
        message: '发现危险函数 eval()！可能导致代码注入攻击',
        code: line.trim()
      });
    }

    // 检查 innerHTML 赋值（简化版）
    if (line.includes('.innerHTML =') || line.includes('["innerHTML"] =')) {
      issues.push({
        file: filePath,
        line: index + 1,
        message: '发现 innerHTML 赋值！请确保内容经过转义，防止 XSS',
        code: line.trim()
      });
    }
  });

  return issues;
}

💡 提示：实际项目中，可以用正则表达式更精确匹配，但对新手来说，includes 更直观。

第三步：整合并运行

在 review.js 末尾加上主逻辑：

function runCodeReview(projectPath) {
  console.log(`🔍 开始审查项目：${projectPath}`);
  const jsFiles = getAllJsFiles(projectPath);
  let allIssues = [];

  jsFiles.forEach(file => {
    const issues = checkDangerousCode(file);
    allIssues = allIssues.concat(issues);
  });

  if (allIssues.length === 0) {
    console.log('✅ 恭喜！未发现高危代码问题。');
  } else {
    console.log(`⚠️ 发现 ${allIssues.length} 个潜在问题：\n`);
    allIssues.forEach(issue => {
      console.log(`文件: ${issue.file}`);
      console.log(`行号: ${issue.line}`);
      console.log(`问题: ${issue.message}`);
      console.log(`代码: ${issue.code}\n`);
    });
  }
}

// 从命令行传入要审查的目录
const targetDir = process.argv[2] || './';
runCodeReview(path.resolve(targetDir));

第四步：测试你的审查工具

1. 创建一个测试文件 test.js：

// test.js
let userInput = prompt("请输入内容");
document.getElementById('output').innerHTML = userInput; // 危险！
eval(userInput); // 更危险！

2. 运行审查工具：

node review.js .

你应该看到类似输出：

⚠️ 发现 2 个潜在问题：

文件: /your-path/test.js
行号: 2
问题: 发现 innerHTML 赋值！请确保内容经过转义，防止 XSS
代码: document.getElementById('output').innerHTML = userInput;

文件: /your-path/test.js
行号: 3
问题: 发现危险函数 eval()！可能导致代码注入攻击
代码: eval(userInput);

成功！你的第一个代码审查爬虫跑起来了！

---

新手常见问题 & 解决方案

Q1：为什么不用 ESLint 这种专业工具？

A：ESLint 确实强大，但它配置复杂，规则抽象。自己写审查脚本的好处是：理解原理 + 灵活定制。等你熟悉了，再过渡到 ESLint 会更快上手。

Q2：这个爬虫只能查 JS 吗？

A：当然可以扩展！只要改 getAllJsFiles 函数，让它也找 .html、.vue 文件，再加对应的检查规则就行。比如检查 HTML 中的 <script> 标签。

Q3：误报怎么办？比如注释里写了 eval？

A：好问题！你可以改进匹配逻辑，比如跳过注释行（以 // 或 /* 开头的行）。这也是学习正则表达式的好机会！

Q4：能集成到 Git 提交前自动运行吗？

A：完全可以！用 husky + lint-staged 就能做到。不过那是进阶内容了，先把基础打牢！

---

学习建议：下一步怎么走？

1. 巩固基础：多练习文件读写、字符串处理，这是“代码爬虫”的核心。
2. 学习正则表达式：让匹配更精准，比如区分 innerHTML = "固定字符串" 和 innerHTML = userVar。
3. 了解 AST（抽象语法树）：真正的代码分析工具（如 ESLint）都基于 AST，比字符串匹配更可靠。
4. 尝试集成到真实项目：在你的个人项目里跑一跑，看看能不能发现隐藏问题。
5. 探索开源工具：研究 SonarQube、CodeClimate 等平台的原理，它们底层也是“爬虫+规则”。

---

最后说两句

我当初学的时候，总觉得自己写的代码没人看，无所谓质量。直到一次因为 innerHTML 导致网站被挂马，才痛定思痛。代码审查不是束缚，而是保护——保护用户、保护团队、也保护你自己。

今天这个小工具虽然简陋，但它代表了一种思维：用自动化手段提升代码质量。哪怕只是多检查一行 eval，也是进步。

记住：最好的代码审查，是你自己在写代码时就想到的那些“万一”。

现在，打开你的终端，试试 node review.js . 吧！你的项目，值得被认真对待。