如何运行ESLint并附加VSCode或Chrome调试器进行调试

一、VSCode调试方案 #

方式1：直接通过VSCode启动调试 #

1. 在项目根目录创建.vscode/launch.json文件，填入以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "ESLint Debug",
      "program": "${workspaceFolder}/node_modules/eslint/bin/eslint.js",
      "args": [
        "--no-eslintrc", // 可选：禁用全局配置，仅使用项目本地规则
        "src/your-target-file.js" // 替换为你要调试的目标文件/目录
      ],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal",
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

2. 在你的ESLint规则代码中插入debugger;语句标记断点。
3. 打开VSCode调试面板，选择「ESLint Debug」配置，点击启动按钮即可触发调试。

方式2：附加到已启动的ESLint进程 #

1. 用Node调试参数启动ESLint：

node --inspect-brk ./node_modules/eslint/bin/eslint.js src/your-target-file.js

执行后命令行会输出类似Debugger listening on ws://127.0.0.1:9229/xxxxxx的调试地址。
2. 在launch.json中添加附加配置：

{
  "type": "node",
  "request": "attach",
  "name": "Attach to ESLint",
  "port": 9229,
  "skipFiles": [
    "<node_internals>/**"
  ]
}

3. 选择「Attach to ESLint」配置，点击启动即可附加到进程开始调试。

二、Chrome调试器方案 #

1. 用调试参数启动ESLint：

node --inspect-brk ./node_modules/eslint/bin/eslint.js src/your-target-file.js

2. 打开Chrome浏览器，输入地址chrome://inspect进入调试页面。
3. 在「Remote Target」区域点击「Configure」，添加localhost:9229并保存。
4. 页面会列出正在调试的Node进程，点击「inspect」打开Chrome DevTools，在Sources面板找到你的ESLint规则代码，添加断点即可调试。

关键说明 #

• --inspect-brk会在进程启动时立刻暂停，方便提前设置断点；若不需要启动暂停，改用--inspect参数即可。
• 确保ESLint为项目本地安装（即node_modules下存在eslint）；若为全局安装，将program路径替换为全局ESLint入口路径（可通过which eslint查看）。

内容的提问来源于stack exchange，提问作者Ricola