chore: add vscode snippets and playground launch config

.vscode/launch.json

@@ -19,5 +19,13 @@
         "<node_internals>/**"
       ]
     },
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch playground",
+      "url": "http://localhost:5173",
+      "webRoot": "${workspaceFolder}",
+      "preLaunchTask": "Run playground dev server"
+    }
   ]
 }

.vscode/tasks.json

@@ -0,0 +1,16 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"group": "build",
+			"type": "npm",
+			"script": "dev",
+			"path": "apps/playground",
+			"problemMatcher": [
+				"$vite"
+			],
+			"label": "Run playground dev server",
+			"isBackground": true,
+		}
+	]
+}

.vscode/transform.code-snippets

@@ -0,0 +1,64 @@
+{
+  // Place your webcrack workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+  // Placeholders with the same ids are connected.
+  // Example:
+  // "Print to console": {
+  // 	"scope": "javascript,typescript",
+  // 	"prefix": "log",
+  // 	"body": [
+  // 		"console.log('$1');",
+  // 		"$2"
+  // 	],
+  // 	"description": "Log output to console",
+  "scope": "typescript",
+  // }
+  "Transform": {
+    "prefix": ["tra", "export transform"],
+    "body": [
+      "import * as t from '@babel/types';",
+      "import * as m from '@codemod/matchers';",
+      // https://github.com/microsoft/vscode/issues/37570#issuecomment-672199343
+      "import { Transform } from '${TM_DIRECTORY/.*src(\\/[^\\/]*)(\\/[^\\/]*)?(\\/[^\\/]*)?(\\/[^\\/]*)?(\\/[^\\/]*)?(\\/[^\\/]*)?/${1:+../}${2:+../}${3:+../}${4:+../}${5:+../}${6:+../}/}ast-utils';",
+      "",
+      "export default {",
+      "  name: '${TM_FILENAME_BASE/[A-Z]/-${0:/downcase}/g}',",
+      "  tags: ['${1|safe,unsafe|}'],",
+      "  visitor() {",
+      "    return {",
+      "      ${3:Expression}: {",
+      "        exit(path) {",
+      "          $0",
+      "        },",
+      "      },",
+      "    };",
+      "  },",
+      "} satisfies Transform;",
+      ""
+    ],
+    "description": "Transform",,
+    "scope": "typescript",
+  },
+  "Comment": {
+    "prefix": ".comment",
+    "body": [".addComment('leading', '${0:text}');"],
+    "description": "Add a leading comment to a NodePath",
+    "scope": "typescript",
+  },
+  "Save": {
+    "prefix": "save",
+    "body": [
+      "// HACK: remove after testing",
+      "writeFileSync(",
+      "  '$WORKSPACE_FOLDER/${1:save $TM_FILENAME_BASE:$TM_LINE_NUMBER}.js',",
+      "  String(${2:path})",
+      ");",
+      "$0"
+    ],
+    "description": "Save the generated code of a NodePath to a file",
+    "scope": "typescript",
+  }
+}

CONTRIBUTING.md

@@ -13,10 +13,14 @@ This project uses [pnpm](https://pnpm.js.org/) for package management. Please ma
 
 ## Attach a Debugger
 
-1. Create the file `packages/webcrack/tmp/test.js` and paste your code
-2. Press `F5` in VSCode to build the project and launch the debugger
+Press `F5` in VSCode to build the project and launch the debugger.
+Choose any of these launch configurations:
 
-The output will be saved in `tmp/webcrack-out`.
+- `Launch playground`: runs a dev server in the background and opens the playground in your browser.
+  <https://github.com/j4k0xb/webcrack/assets/55899582/8d6509c6-7ec2-43c8-8d1b-8aac5b279e45>
+- `Deobfuscate tmp file`: runs the CLI locally.
+  1. Create the file `packages/webcrack/tmp/test.js` and paste your code
+  2. The output will be saved in `tmp/webcrack-out`
 
 ## Tests
 
@@ -27,6 +31,9 @@ Run the tests with `pnpm test`.
 If the snapshots are outdated, make sure the changes are correct and update them:
 ![failed snapshot](https://user-images.githubusercontent.com/55899582/219093007-825a5056-38a0-4e8b-8512-b56e20174885.png)
 
+The tests can also be debugged by installing the [Vitest extension](https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer) and right-clicking on the play icon:
+![vitest debug](https://github.com/j4k0xb/webcrack/assets/55899582/9661b202-7f85-4615-bf83-c132cfdaa9f7)
+
 ## Linting and Formatting
 
 ```bash