docs: enhance VSCode extension documentation with new images and configuration steps

- Added images for various features including CodeLens hints, optimization tab, and completed optimizations.
- Updated configuration steps to include a visual guide for selecting project configuration.
This commit is contained in:
Mohamed Ashraf 2026-01-20 13:31:45 +02:00
parent 83058129fc
commit 130c84afc6
9 changed files with 10 additions and 0 deletions

View file

@ -31,6 +31,8 @@ The Codeflash extension provides a configuration interface in the sidebar where
</Step> </Step>
<Step title="Select Project Config"> <Step title="Select Project Config">
From the dropdown menu, click **"Project Config"** to open the configuration interface. From the dropdown menu, click **"Project Config"** to open the configuration interface.
![Kebab menu next to Optimize button](../../images/Select-Project-Config.png)
</Step> </Step>
<Step title="Update Settings"> <Step title="Update Settings">
Use the configuration interface to modify your `pyproject.toml` settings. Changes are saved directly to your project's configuration file. Use the configuration interface to modify your `pyproject.toml` settings. Changes are saved directly to your project's configuration file.

View file

@ -31,6 +31,7 @@ def process_data(items):
1. Open any Python file in your project 1. Open any Python file in your project
2. The extension analyzes your code automatically 2. The extension analyzes your code automatically
3. Functions that can be optimized show an "optimize" hint above them 3. Functions that can be optimized show an "optimize" hint above them
![CodeLens hint above function](../../images/CodeLens.png)
4. Click the hint to start optimization 4. Click the hint to start optimization
<Tip> <Tip>
@ -62,6 +63,8 @@ The **Optimization** tab is your main interface for selecting code to optimize.
### File and Function Selection ### File and Function Selection
![Optimization tab with file and function selectors](../../images/optimization-tab.png)
At the top of the Optimization tab, you'll find two dropdown selectors: At the top of the Optimization tab, you'll find two dropdown selectors:
1. **FILE** — Select a Python file from your workspace 1. **FILE** — Select a Python file from your workspace
@ -90,6 +93,7 @@ Below the file/function selectors, you'll find two action cards for common optim
#### Optimize Current File #### Optimize Current File
- **Icon:** Lightning bolt - **Icon:** Lightning bolt
![Optimize current file quick action card](../../images/Optimize-current-file.png)
- **Action:** Analyze and optimize all functions in the currently opened file - **Action:** Analyze and optimize all functions in the currently opened file
- **How to use:** Click the card to optimize all functions in the active editor tab - **How to use:** Click the card to optimize all functions in the active editor tab
@ -101,6 +105,7 @@ Below the file/function selectors, you'll find two action cards for common optim
#### Optimize Changed Code #### Optimize Changed Code
- **Icon:** Git diff symbol (intertwined links) - **Icon:** Git diff symbol (intertwined links)
![Optimize Changed Code quick action card](../../images/optimize-code-diff.png)
- **Action:** Optimize functions in your Git diff - **Action:** Optimize functions in your Git diff
- **How to use:** Click the card to automatically detect and optimize all modified functions in your current Git changes - **How to use:** Click the card to automatically detect and optimize all modified functions in your current Git changes
@ -138,6 +143,7 @@ When you haven't started any optimizations yet, the Tasks tab shows:
Once optimizations complete, you'll see a list showing: Once optimizations complete, you'll see a list showing:
![Completed optimizations list in Tasks tab](../../images/optimized-function-tab-tasks.png)
- **Function Name** — The name of the optimized function - **Function Name** — The name of the optimized function
- **Status Badge** — Shows completion status with speedup information: - **Status Badge** — Shows completion status with speedup information:
- "Completed (Xx Faster)" — Displays the performance improvement - "Completed (Xx Faster)" — Displays the performance improvement
@ -184,6 +190,8 @@ Once you've selected functions to optimize (via any method above), here's what h
After an optimization completes, you can review it in the Tasks tab or via inline comments. After an optimization completes, you can review it in the Tasks tab or via inline comments.
![Detailed optimization explanation view](../../images/optimization-details-explaination.png)
### In the Tasks Tab ### In the Tasks Tab
Click **View Optimization** on any completed optimization to see: Click **View Optimization** on any completed optimization to see:

BIN
docs/images/CodeLens.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB