Babel uses a plugin system to perform its code transformations. In addition to the default plugins offered by the Babel team, you can write your own plugin to serve your particular use-case. Writing a Babel plugin requires some understanding on how ASTs work and how to debug them. The Babel Plugin Handbook is an amazing resource to understand the complexities of ASTs and build Babel plugins easily, but how do you debug your plugin ?

Debugging a Babel plugin is not so different from debugging a typical Node.js based application. This guide will focus on configuring VS Code for easily debugging your Babel plugin.

VS Code keeps debugging configuration in a launch.json file located in a .vscode folder project root folder. It usually creates the file automatically when the "Run and Debug" button is triggered. In our case, we will have to manually tell VS Code that we are debugging a babel plugin. Once the launch.json file is generated, go to the file and replace the current configuration with the following configuration:

{
    "type": "node",
    "request": "launch",
    "name": "Debug babel",
    "console": "integratedTerminal",
    "autoAttachChildProcesses": true,
    "program": "${workspaceFolder}/node_modules/@babel/cli/bin/babel.js",
    "args": [
      "${workspaceFolder}/your_plugin_name.js"
    ]
  }

Note: Make sure @babel/cli is installed.

And that's it from configuration side! You should now be able to set breakpoints anywhere inside your babel plugin and get debugging.