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
🧑💻 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
.
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
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
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
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
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! 🚀