如何在VSCode中调试Angular Nx项目？解决启动报错及skipFiles失效问题

错误信息显示在nx.js中遇到Unexpected token ?，这是因为代码使用了空值合并赋值运算符（??=），该语法需要Node.js 14.0.0及以上版本支持。而VSCode集成终端使用的Node版本低于14，导致无法解析该语法。

解决方案： #

• 检查VSCode终端的Node版本：在VSCode终端执行node -v，对比本地shell中的版本（本地shell运行正常说明版本符合要求）
• 统一VSCode终端的Node版本：
  • 如果使用nvm，确保在VSCode中加载了正确的nvm环境（可重启VSCode或在终端手动执行nvm use <你的版本>）
  • 或者在VSCode的settings.json中配置终端环境变量，指定Node路径：

    "terminal.integrated.env.linux": {
      "PATH": "/path/to/your/node/bin:$PATH"
    }
    

• 直接升级Node.js到14.x及以上版本

Firefox调试器的skipFiles需要匹配webpack打包后的虚拟路径，而非本地文件路径。原配置使用本地路径${workspaceFolder}/node_modules/**无法生效，因为调试器关联的是webpack生成的路径。

解决方案： #

修改launch.json中的skipFiles配置为webpack路径格式：

"skipFiles": [
  "webpack:///node_modules/**",
  "webpack:///<node_internals>/**",
  "${workspaceFolder}/lib/**"
]

原tasks.json的endsPattern可能无法匹配Nx的编译成功提示，导致任务无法正确识别为完成状态。可以更新正则表达式覆盖Nx的输出：

"endsPattern": {
  "regexp": "Compiled |Failed to compile.|Successfully ran target serve for project"
}

原始配置文件 #

launch.json #

{"version": "0.2.0","configurations": [{"name": "Firefox: start","preLaunchTask": "Angular Client: yarn start","request": "launch","reAttach": true,"type": "firefox","url": "http://localhost:4200","pathMappings": [{"url": "webpack:///src","path": "${workspaceFolder}/src"}],"skipFiles": [// FIXME: Does not work, debugger still goes through node_packages code"${workspaceFolder}/<node_internals>/**","${workspaceFolder}/node_modules/**","${workspaceFolder}/lib/**"]}]}

tasks.json #

{"version": "2.0.0","tasks": [{"label": "Angular Client: yarn start","type": "shell","command": "yarn","args": ["start"],  // FIXME: Does not work with Nx in VSCode"isBackground": true,"problemMatcher": {"owner": "typescript","source": "ts","applyTo": "closedDocuments","fileLocation": "relative","pattern": "$tsc","background": {"activeOnStart": true,"beginsPattern": {"regexp": "(.*?)"},"endsPattern": {"regexp": "Compiled |Failed to compile."}}}}]}

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