Inspect in VSCode

This is a simple extension for deno/fresh projects that allows you to inspect your components’ source code in VSCode. This repository includes a sample site to show how it works. Activate the extension with backquote (`) and click on any component. Your browser will attempt to navigate to the source code file in your project.

Demo gif showing inspect to vscode

This is a native feature in live, the upcoming deno-native CMS.

Usage

Start the project:

cd example/
deno task start

Go to https://localhost:8080

Now hit the backquote key (`) and click on any DOM Element while the project is open in VSCode. Your browser should navigate to VSCode and open the correct file and line.

Implementing in your project

Add "inspect_vscode/": "https://deno.land/x/inspect_vscode@0.1.0/" and "std/":"https://deno.land/std@0.148.0/" to your import_map.json file.
Create islands/InspectVSCode.tsx:

/** @jsx h */
import InspectVSCode from "inspect_vscode/island.tsx";

export default InspectVSCode;

Create routes/_live/inspect.ts:

import inspectVSCodeHandler from "inspect_vscode/handler.ts";

export const handler = inspectVSCodeHandler;

Import islands/InspectVSCode.tsx in a route and render it.

Done!