VSCode Getting Started Experience

CHANGELOG.md

@@ -6,6 +6,17 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ## [Unreleased]
 
+## [0.0.11]
+
+### Added
+
+- Added the `Function Graph Overview: Show Graph Overview` command to VSCode to show the graph
+
+### Changed
+
+- In VSCode, the extension will now show in the activity bar by default
+- All development-related docs moved to the `docs` directory to avoid confusing users
+
 ## [0.0.10]
 
 ### Added

README.md

@@ -6,11 +6,22 @@ This extension adds a Graph Overview to VS Code, showing the CFG (control-flow g
 
 ![Screenshot of the extension](./media/screenshots/banner_dark.png)
 
-## Installation
+## Getting Started
 
-Install via the [extension page](https://marketplace.visualstudio.com/items?itemName=tamir-bahar.function-graph-overview) at the VSCode Marketplace.
+1. Install via the [extension page](https://marketplace.visualstudio.com/items?itemName=tamir-bahar.function-graph-overview) at the VSCode Marketplace.
 
-## Demo
+2. Open the command-pallete (<kbd>Ctrl+Shift+P</kbd> or <kbd>⇧⌘P</kbd>) and run the `Function Graph Overview: Show Graph Overview` command.
+
+3. Open your code and place your cursor inside a function to see the graph.
+
+4. You can drag the graph view to the other sidebar or to the bottom panel
+
+### JetBrains IDEs
+
+If you're using a JetBrains IDE, see [the JetBrains plugin](https://github.com/tmr232/jb-function-graph-overview)
+for further instructions.
+
+### Demo
 
 You can try it out via an [interactive demo](https://tmr232.github.io/function-graph-overview/) if you don't want to install it.
 
@@ -47,25 +58,3 @@ Custom color schems are created via the [interactive demo](https://tmr232.github
 - [C](https://tmr232.github.io/function-graph-overview/?language=1)
 - [C++](https://tmr232.github.io/function-graph-overview/?language=3)
 - [Python](https://tmr232.github.io/function-graph-overview/?language=2)
-
-## Development
-
-### Requirements
-
-- [Bun](https://bun.sh/) is required to develop the project.
-- [Bun for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=oven.bun-vscode) is needed for debugging in VS Code
-- [emscripted](https://emscripten.org/) is only required if you want to add new tree-sitter parsers.
-
-### Getting Started
-
-Clone the project and install dependencies.
-
-```bash
-git clone https://github.com/tmr232/function-graph-overview/
-cd function-graph-overview
-bun install
-```
-
-You can debug the extension via VS Code by pressing F5.
-
-To run the demo, run `bun demo`.

docs/Development.md

@@ -0,0 +1,27 @@
+# Development
+
+These are instructions for developing this project.
+For usage instructions, return to [the readme](../README.md).
+
+## Minimal Requirements
+
+- [Bun](https://bun.sh/) is required to develop the project.
+- [Bun for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=oven.bun-vscode) is needed for debugging in VS Code
+
+## Getting Started
+
+Clone the project and install dependencies.
+
+```bash
+git clone https://github.com/tmr232/function-graph-overview/
+cd function-graph-overview
+bun install
+```
+
+You can debug the extension via VS Code by pressing F5.
+
+To run the demo, run `bun demo`.
+
+## Adding Languages
+
+If you want to add support for more languages, read about [adding a language](./AddNewLanguage.md).

package.json

@@ -66,7 +66,7 @@
   "//": "START EXTENSION ATTRIBUTES",
   "publisher": "tamir-bahar",
   "name": "function-graph-overview",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Function Graph Overview",
   "displayName": "Function Graph Overview",
   "icon": "./media/icon.png",
@@ -122,18 +122,34 @@
         }
       }
     },
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "function-graph-overview",
+          "title": "Function Graph Overview",
+          "icon": "./media/svg/view-icon.svg"
+        }
+      ]
+    },
     "views": {
-      "explorer": [
+      "function-graph-overview": [
         {
           "type": "webview",
           "id": "functionGraphOverview.overview",
-          "name": "Graph Overview",
+          "name": "Function Graph Overview",
           "icon": "./media/svg/view-icon.svg",
           "contextualTitle": "Graph Overview",
           "visibility": "visible"
         }
       ]
-    }
+    },
+    "commands": [
+      {
+        "command": "functionGraphOverview.focus",
+        "title": "Show Graph Overview",
+        "category": "Function Graph Overview"
+      }
+    ]
   },
   "engines": {
     "vscode": "^1.86.0"

src/vscode/extension.ts

@@ -387,6 +387,16 @@ export async function activate(context: vscode.ExtensionContext) {
       },
     ),
   );
+
+  const command = "functionGraphOverview.focus";
+
+  const commandHandler = () => {
+    vscode.commands.executeCommand("functionGraphOverview.overview.focus");
+  };
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand(command, commandHandler),
+  );
 }
 
 // This method is called when your extension is deactivated