Live coding is the best way to teach and share your knowledge with others but as you know this is not easy! The idea behind writing this extension is to have live coding with a hundred percent accuracy and less stressful moments!

You can achieve the goal in two different ways:

1. Recording everything via macros.
2. Replay a pre-defined script.

For the first approach, it is fast but not accurate because you are recording your mistakes too, so, I am using the second one to nail it!

You have full control of the script that you want to type:

• Move the cursor in any direction and number you want.
• Using predefined utility commands to simplify the typing process.
• Calling commands available in VS Code e.g. Format the document by editor.action.formatDocument.
• Present your code perfectly with manual and automatic pause/resume cycles.

To use this extension, first, you should create a .vscreplay file. Anything in this file will auto-type exactly as you have like all characters, new lines, spaces, and so on but you can change the way of typing with the operational characters and commands that are provided before.

replay and pause commands just work when you have a .vscreplay file in your active editor.

For example a file like:

---
file: ./folder1/folder3/sample.js
line: 0
col: 0
clean: true
save: true
---
// What is Jest?
// Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
// How should we write a test with Jest?
⭯5
⧉ delete-all
// (1) Install Jest using your favorite package manager:
// npm install --save-dev jest
// or
// yarn add --dev jest
⧉ waitn:3:Creating functionality	

// (2) Create a 'sum.js' file:
function sum(a, b) {⮒⮒}⇥
↑↑  return a + b;↓
module.exports = sum;
⧉ waitn:3:Creating test file	

// (3) Create a file named 'sum.test.js'. This will contain our actual test:
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {⮒⮒});⇥
↑↑  expect(sum(1, 2)).toBe(3);↓
⧉execute:editor.action.formatDocument
⧉ waitn:3:Configuration

// (4) Add the following section to your 'package.json':
/*⮒*/↑
{
  "scripts": {
    "test": "jest"
  }
}↓↓
⧉ waitn:3:Running the test
// (5) Finally, run 'yarn test' or 'npm test' and Jest will print this message:
// PASS  ./sum.test.js
// ✓ adds 1 + 2 to equal 3 (5ms)

The sample file is also accessible from here.

You can use a number after the below operational characters to write less repetitive code:

If you set 0 for the count, the extension automatically considers it as 1.

Each .vscreplay should have a setting on top of the .vscreplay file.

---
file: ./folder1/sample1.js
line: 0
col: 0
speed: 20
delay: 250
bspeed: 20
bdelay: 250
clean: true
next: ./sample2.vscreplay
save: true
info: true
---
...

You should use the relative path for the file and next settings. The root of the starting point is your VS Code workspace folder.

Copy and paste the characters from this tutorial is not a good way! To work easier you can use the below snippets.

For manual control on auto typing, you can use the following shortcuts:

• The first release.

• The boost operational character is added.

• The double-boost operational character is added.

• The selectn command is added.
• The speed command is added.
• The esbuild bundler is added.
• The backspace speed and delay configurations are added.

• The memory command is added.
• The restore command is added.
• The ll (last line) is added.

I am heavily inspired by auto-type to implement this extension.

Replay icons created by Andrean Prabowo - Flaticon