Action Recorder

Captures, automates, and visualizes your workflow actions—featuring multi-session support, advanced replay options, efficient performance handling, file duplication, new file creation, and fully customizable status bar buttons for enhanced productivity.

🚀 Features

🔑 Key Functionalities

File Duplication:
- Duplicate files instantly with a single command or hotkey (F9) or using a status bar button.
New Py File:
- Creates a new Python file (new_<number>.py) with an incrementing number in the current workspace.
- After installing the extension, the "New Py File" button appears in the status bar on the bottom-left corner of the VS Code interface.
Action Recording and Replay:
- Capture your actions within VS Code.
- Replay sessions step-by-step or instantly automate workflows.
Timeline Visualization:
- View recorded actions in a detailed, sortable timeline.
Multi-Session Support:
- Seamlessly switch between different recording sessions.
Integrated JSON Editor:
- Edit session data directly in a user-friendly webview editor.
Custom Commands:
- Execute shell commands from the extension.
- Add buttons in the status bar for quick command execution.
Hotkeys and Workflow Customization:
- Assign custom hotkeys and automate repetitive tasks with ease.

🧑‍💻 Usage

🔧 Core Commands

Start Recording:
- Use Action Recorder: Start Recording to begin capturing actions.
Stop Recording:
- Use Action Recorder: Stop Recording to end the session.
Replay Actions:
- Replay a session using Action Recorder: Replay Current Session.
Duplicate Files:
- Duplicate the currently active file using Action Recorder: Duplicate Current File or press F9.
Edit JSON Files:
- Open and edit session JSON files with Action Recorder: Edit Session JSON File.
Switch Active Session:
- Switch between sessions with Action Recorder: Switch Active Session.
Run Shell Command:
- Execute custom commands using Action Recorder: Run Shell Command.

Using Status Bar Buttons

Steps to Use Status Bar Buttons

Install the Extension:
- Install the extension from the VS Code Marketplace or via the .vsix package.
Activate the Extension:
- The buttons will appear automatically when the extension is activated.
- If the buttons don’t appear:
  - Ensure that the extension is loaded.
  - Reload the window by pressing Ctrl+Shift+P (Command Palette) and selecting Developer: Reload Window.
Default Buttons:
- By default, the buttons defined in the extension (e.g., Start Recording, Stop Recording, etc.) will appear in the Status Bar.

Customizing Buttons (Optional):

If you want to customize or add new Status Bar Buttons, update your settings.json file with the following structure:

"actionRecorder.statusBarButtons": [
  {
    "text": "$(play) Start Macro",
    "tooltip": "Start a macro recording",
    "command": "actionRecorder.startRecording",
    "alignment": "left",
    "priority": 100
  },
  {
    "text": "$(stop) Stop Macro",
    "tooltip": "Stop a macro recording",
    "command": "actionRecorder.stopRecording",
    "alignment": "left",
    "priority": 99
  },
  {
    "text": "$(refresh) Replay Actions",
    "tooltip": "Replay recorded actions",
    "command": "actionRecorder.replayActions",
    "alignment": "left",
    "priority": 98
  }
]

Add the desired buttons and their properties:
- text: The button icon or label.
- tooltip: A brief description shown when hovering over the button.
- command: The command executed when the button is clicked.
- alignment: Position of the button (left or right).
- priority: Determines the order of the buttons (higher priority appears first).

Enable Custom Buttons:
- The extension dynamically reads the actionRecorder.statusBarButtons configuration and updates the buttons accordingly.
Verify Button Placement:
- Buttons will appear on the left or right of the status bar depending on their alignment.
- The priority field controls the order of buttons.
Click and Use:
- Simply click a button to execute its associated command.
- Hover over a button to see its tooltip for details.

Troubleshooting

Buttons Not Visible?
- Ensure the extension is active:
  - Open the Command Palette (Ctrl+Shift+P) and run Developer: Show Running Extensions.
- Check for errors in the Output Panel (View -> Output) under the extension logs.

Commands Not Found?

Verify that the command exists in the activationEvents section of package.json. Example:

"activationEvents": [
  "onCommand:actionRecorder.startRecording",
  "onCommand:actionRecorder.stopRecording",
  "onCommand:actionRecorder.replayActions",
  "onCommand:actionRecorder.editJson",
  "onCommand:actionRecorder.runShellCommand"
]

Customization Not Applied?
- Ensure your settings.json update is valid.
- Reload VS Code to apply the changes.

Now you’re ready to use and customize Status Bar Buttons for your workflows!

Known Limitations

Replay of text changes depends on the file’s content not changing drastically.
Shell commands might be OS-dependent.
For very large sessions, implement the chunking logic in SessionManager.addActionToSession() to store intermediate data on disk.

Example: Starting a Macro and Saving as JSON

Scenario

You want to record a series of actions (e.g., editing files, running commands) and save the macro for future use.

Start Recording a Macro
- Open the command palette (Ctrl+Shift+P or Cmd+Shift+P) and run:
  Action Recorder: Start Recording.
- Perform the actions you want to record:
  - Open files.
  - Edit content.
  - Execute commands.
- All actions will be captured in the current session.
Stop Recording
- When done, open the command palette and run:
  Action Recorder: Stop Recording.
Export the Macro
- Run the command:
  Action Recorder: Export Current Session.
- Select a location to save the session as a .json file.
- The file will contain all recorded actions, including timestamps and details.
Verify the Export
- Open the .json file in a text editor to ensure the session is correctly saved. It should look similar to this:

{
  "id": "session-id-123",
  "name": "My Macro Session",
  "startTime": 1670000000000,
  "actions": [
    {
      "id": "action-1",
      "type": "fileOpen",
      "timestamp": 1670000001000,
      "details": { "fileName": "example.txt" }
    },
    {
      "id": "action-2",
      "type": "textInsertion",
      "timestamp": 1670000002000,
      "details": { "text": "Hello, World!" }
    }
  ]
}

Reusing the Macro

Import the JSON File
- Run the command:
  Action Recorder: Import Session.
- Select the saved .json file.
Replay the Actions
- Run:
  Action Recorder: Replay Current Session.

The extension will execute the recorded actions step by step, replicating the macro.

More Examples

Example 1: Automated Refactoring Steps

Scenario

You need to refactor a variable name in multiple files and then run ESLint auto-fixes.

Start Recording
- Command Palette: > Intelligent Macro: Start Recording
Rename Variable
- Press F2 (the VSCode default rename shortcut) on a variable named oldVarName.
- Type newVarName in the rename prompt.
- VSCode updates all references in the current file or project scope (depending on your settings).
Run ESLint Auto-Fix
- Open Command Palette: > ESLint: Fix all auto-fixable problems
- ESLint fixes indentation, unused imports, etc.
Stop Recording
- Command Palette: > Intelligent Macro: Stop Recording
- Visual Timeline shows:
  - Rename Symbol: oldVarName -> newVarName
  - Command: ESLint: Fix all auto-fixable problems
Using the Macro
- Next time, highlight a variable, press Ctrl + Shift + R, and the macro repeats the rename + auto-fix sequence.

Example 2: Generating and Opening a New React Component

Scenario

You often create React components with the same structure. Automate:

Creating a new file in a specified folder.
Inserting boilerplate React component code.
Opening the file in split view to immediately start editing.

Start Recording
- Command Palette: > Intelligent Macro: Start Recording
Create New File
- In Explorer, create a new file called MyComponent.jsx in the src/components/ folder.
Open the File
- Double-click MyComponent.jsx to open it in the current editor group.
Split Editor
- VSCode command: View: Split Editor Right.

Insert Component Template

Paste or type:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>MyComponent</h1>
    </div>
  );
}

export default MyComponent;

Stop Recording
- Command Palette: > Intelligent Macro: Stop Recording
- Timeline shows:
  - File created: src/components/MyComponent.jsx
  - Editor: Open file (MyComponent.jsx)
  - Editor: Split Editor Right
  - Text inserted: (React component boilerplate)
Using the Macro
- Next time, run the macro and specify a new component name.

Example 3: Java File Creation and Maven Test Run

Scenario

You’re working on a Java project and regularly:

Create a new Java class in a certain package.
Insert standard class-level comments (author, date, etc.).
Run mvn test to ensure everything still passes.

Start Recording
Create New Java File
- In src/main/java/com/example/utils/, create StringUtils.java.

Insert Class Skeleton

package com.example.utils;

/**
 * Utility class for string operations.
 * @author ...
 * @date ...
 */
public class StringUtils {
    // TODO: Implement
}

Open Terminal / Run Maven Test
- Command: View: Toggle Terminal
- Terminal command: mvn test
Stop Recording
- Timeline:
  - File created: src/main/java/com/example/utils/StringUtils.java
  - Inserted text (package, javadoc, class skeleton)
  - Command: View: Toggle Terminal
  - Terminal command: mvn test
Using the Macro
- Press your assigned shortcut to:
  - Create the class file.
  - Insert boilerplate.
  - Open terminal and run mvn test.

Example 4: Automated Bug-Hunting Workflow

Scenario

You need to look at logs, search for specific errors, and copy them into a ticket system:

Start Recording
Open Log File
- Use Quick Open (Ctrl + P) to open logs/errors.log.
Search for a Keyword
- Type in the search box: ERROR_503.
Select and Copy Lines
- Highlight the lines containing the error and press Ctrl + C to copy.
Open a New Editor (Scratch Pad)
- Command Palette: > File: New Untitled File
- Paste the copied error lines.
Stop Recording
- Timeline shows:
  - Quick Open file: logs/errors.log
  - Search: ERROR_503
  - Text Selection: Lines 52-55
  - Copy to clipboard
  - New Untitled File
  - Paste from clipboard
Using the Macro
- Next time, run GetErrorLogs to automate opening the file, finding error lines, copying them, and pasting into a new file.

Example 5: Multi-Action Frontend Workflow

Scenario

In a Node/React project, automate:

Pulling the latest changes from Git.
Installing dependencies.
Starting the development server.
Launching the app in your browser.

Start Recording
Pull Latest Changes
- VSCode Git panel → “Pull from…”
- Or run in Terminal: git pull origin main.
Install Dependencies
- Terminal command: npm install (or yarn).
Start Dev Server
- Terminal command: npm start.
Open Browser
- Run custom VSCode command or extension to launch localhost:3000 in your browser.
Stop Recording
- Timeline shows:
  - Git pull
  - npm install
  - npm start
  - Browser launch
Using the Macro
- Press your macro shortcut once to:
  - Pull the latest changes.
  - Install dependencies.
  - Start the server.
  - Launch the browser.

Example 6: Contextual Insertions for Documentation

Scenario

Automate adding a standard doc block to each exported function in a TypeScript file.

Start Recording

Place Cursor

Move the cursor above a function:

export function getUserDetails(userId: string) {...}

Type Docstring

/**
 * Retrieves details for the specified user.
 * @param {string} userId - The ID of the user to retrieve.
 * @returns {Promise<User>} Promise resolving to user details.
 */

Stop Recording
- Timeline shows:
  - Cursor: Moved to line X
  - Text Insertion: (TypeScript doc block)
Using the Macro
- Press your shortcut to auto-insert a doc block above a function.
- Optionally, enhance to prompt for parameter names or function descriptions.

Example 7: Automating Python Library Installation and Testing

Scenario

You need to install a Python library, create a script to test its functionality, and run the script to verify the installation.

Start Recording
- Command Palette: > Intelligent Macro: Start Recording
Install Library
- Open the integrated terminal in VS Code.
- Run the command: pip install requests.

Create a Test Script

Create a new file named test_requests.py.

Insert the following code into the file:

import requests

response = requests.get("https://httpbin.org/get")
print("Status Code:", response.status_code)
print("Response JSON:", response.json())

Run the Script
- Execute the command: python test_requests.py in the terminal.
- Observe the output confirming that the requests library was installed and is working correctly.
Stop Recording
- Command Palette: > Intelligent Macro: Stop Recording
- Visual Timeline shows:
  - Terminal command: pip install requests
  - File created: test_requests.py
  - Text inserted: Python code
  - Terminal command: python test_requests.py
Using the Macro
- The next time you need to install and test a Python library, run the macro.
- It will automate the steps of installing the library, creating a test script, and running the test.

Example 8: Automating Virtual Environment Setup and Library Installation

Scenario

You frequently create virtual environments for Python projects and need to install specific libraries in them.

Start Recording
- Command Palette: > Intelligent Macro: Start Recording
Create Virtual Environment
- Open the integrated terminal in VS Code.
- Run the command: python -m venv venv.
Activate Virtual Environment
- On Windows: venv\Scripts\activate
- On macOS/Linux: source venv/bin/activate.
Install Libraries
- Run the command: pip install numpy pandas.

Verify Installation

Open a new Python file named test_env.py and insert:

import numpy as np
import pandas as pd

print("Numpy version:", np.__version__)
print("Pandas version:", pd.__version__)

Run the Script
- Execute python test_env.py to ensure the libraries were installed correctly.
Stop Recording
- Command Palette: > Intelligent Macro: Stop Recording
- Visual Timeline shows:
  - Terminal commands for creating and activating the virtual environment
  - pip install numpy pandas
  - File creation and script execution.
Using the Macro
- Automate setting up new environments with specific libraries for every project.

Example 9: Automating API Testing Workflow

Scenario

You need to test an API by sending GET and POST requests and logging the results.

Start Recording
- Command Palette: > Intelligent Macro: Start Recording

Create a Test Script

Create a new file api_test.py.

Insert the following code:

import requests

# GET request
response_get = requests.get("https://jsonplaceholder.typicode.com/posts/1")
print("GET Response:", response_get.json())

# POST request
response_post = requests.post("https://jsonplaceholder.typicode.com/posts", json={"title": "foo", "body": "bar", "userId": 1})
print("POST Response:", response_post.json())

Run the Script
- Execute python api_test.py in the terminal to view the API responses.
Stop Recording
- Command Palette: > Intelligent Macro: Stop Recording
- Visual Timeline shows:
  - File creation
  - Python code insertion
  - Script execution.
Using the Macro
- Automate repetitive API testing by reusing the macro to create similar test scripts for different endpoints.

Some more Example Workflows for Action Recorder

Example 1: Exporting a Session

Imagine you want to save your recorded session to share or use later:

Export a Session
- Run the command: Action Recorder: Export Current Session.
- Choose a file location in the save dialog.
- The session is saved as a .json file.
Verify the Export
- Open the .json file to ensure it contains your recorded actions.

Example 2: Importing a Session

Imagine you received a session file and want to replay it:

Import the Session
- Run the command: Action Recorder: Import Session.
- Select the .json file containing the session.
Replay the Imported Session
- Run Action Recorder: Replay Current Session.
- Watch as the actions from the imported session are replicated.

Example 3: File Duplication

Imagine you need to quickly duplicate a file for testing or prototyping:

Duplicate the File
- Open the file you want to duplicate.
- Run the command: Action Recorder: Duplicate Current File. (shortcut key: F9, or Button).
- A new file will be created in the same directory with the following naming convention:
  - filename_copy1.extension
  - filename_copy2.extension
  - ... (Incrementing number if multiple copies are created)
Verify the Duplicate
- Open the duplicated file and make changes as needed.

Example 4: Running a Shell Command

Imagine you want to execute a quick shell command directly from the extension:

Run a Shell Command
- Run the command: Action Recorder: Run Shell Command.
- Enter your desired shell command (e.g., ls or npm install) in the input box.
- The command is executed in a new terminal.
Verify Execution
- Check the terminal output for the result of your command.

Example 5: Switching Sessions

Imagine you’ve recorded multiple sessions and need to switch between them:

Switch Active Session
- Run the command: Action Recorder: Switch Active Session.
- Choose a session from the dropdown menu.
Verify the Active Session
- Open the timeline view to confirm the active session’s actions are displayed.

Contributing

Issues, feature requests, and pull requests are welcome!

Publisher: daryoushalipourtirotir
Version: 1.0.0
VS Code Engine: ^1.75.0
Categories: Productivity, Development Tools, Other
Keywords: Automation, Workflow, Replay, Development, Editor Actions, Productivity, File Management, Macro, VS Code Extension, Python, React, Command Runner, Session Management

🎉 Thank You for Using Action Recorder!

We hope this extension enhances your workflow and makes your coding experience smoother. Your feedback is invaluable to us.

If you enjoyed using it, please consider ⭐️ starring this project and sharing it with your friends and colleagues.

Happy Coding! 🚀

Action Recorder

Daryoush Alipour tirotir

Action Recorder

🚀 Features

🔑 Key Functionalities

🧑‍💻 Usage

🔧 Core Commands

Using Status Bar Buttons

Steps to Use Status Bar Buttons

Troubleshooting

Known Limitations

Example: Starting a Macro and Saving as JSON

Scenario

Reusing the Macro

More Examples

Example 1: Automated Refactoring Steps

Scenario

Example 2: Generating and Opening a New React Component

Scenario

Example 3: Java File Creation and Maven Test Run

Scenario

Example 4: Automated Bug-Hunting Workflow

Scenario

Example 5: Multi-Action Frontend Workflow

Scenario

Example 6: Contextual Insertions for Documentation

Scenario

Example 7: Automating Python Library Installation and Testing

Scenario

Example 8: Automating Virtual Environment Setup and Library Installation

Scenario

Example 9: Automating API Testing Workflow

Scenario

Some more Example Workflows for Action Recorder

Example 1: Exporting a Session

Example 2: Importing a Session

Example 3: File Duplication

Example 4: Running a Shell Command

Example 5: Switching Sessions

Contributing

🎉 Thank You for Using Action Recorder!