Algorand VS Code Extension
This is a VS Code extension for the Algorand Blockchain.
How to Use
Prerequisite
Installation
Download the built extension in the releases. Open the Extensions page in VS Code and select Install from VSIX...
Features
TEAL language support
- TEAL syntax highlight
- Hover information
- Auto-complete
TEAL & PyTeal compiler integration
- Open a
*.teal
or *.pyteal
file
- Press
Cmd+Shift+B
to call out the compiler task
- For the first time running the compiler, you will probably see the No build task to fun found. Configure Build Task... notification. Click it and you will see an option Algorand Compiler: TEAL or PyTeal. Click it again and VS Code will configure a
tasks.json
file for you. Switch to your .teal
or .pyteal
file and click Cmd+Shift+B
to compile
Algorand Panel
Algorand Panel is a dedicated interface for Algorand-related operations, accessible through a button at the left of the bottom bar. Please make sure you have installed and started Docker before using the Algorand Panel.
- Install Algorand node (algorand/stable) - This is the official docker image for Algorand node. Click the New Instance button and click the Algorand version to open the dropdown. You can install and manage Algorand nodes in the Algorand Version Manager.
- Manage Algorand node instances - Click the New Instance button, enter the instance name and select a version for algorand node to create a new instance. The extension will download the network snapshot to expedite the sync process.
- Start a local node - Just click the Start button
- Display node logs - Shown in VS Code terminal
Algorand transactions
You can use the Algorand Panel to construct transactions with a user interface. It supports
Before using the feature, please make sure you have successfully started an Algorand node.
An Algorand transaction can consist of a list of individual parts, known as atomic transfer. Therefore, the content of a transaction is an array, which in the simplest case only contains one item. Click the dropdown button at the right of the Transaction Array input and select Add New Item... You will see a popup window guiding you through making a single transaction. Once you filled out the required information and clicked Confirm, you will see the newly created transaction added to the Transaction Array as well as in the Transaction Object below. If you want to modify or delete it, click the item in the array or the x
button respectively.
To be able to perform the signing process, you need to provide a keys.json
file of the following format. Be careful that all private information here is saved in plain text so DO NOT USE THEM ON MAINNET.
[
{
"address": "{address A}",
"mnemonic": "{mnemonic for address A}"
},
{
"address": "{address B}",
"mnemonic": "{mnemonic for address B}"
}
// and more
]
When finished, click the Push Transaction button, confirm and send the transaction to the Algorand network.
Algorand smart contract
We provided an example project to demostrate how to use this extension to work on Algorand smart contract.
- Open the
example
in VS Code as the project root folder;
- Open the file
main.py
and press Cmd+Shift+B
to compile the PyTeal script to TEAL. A file of name main.teal
will be generated;
- Open the file
main.teal
and press Cmd+Shift+B
to compile the TEAL script;
- Open the Algorand Panel and start an Algorand node. Make sure the node has synced with the network;
- Import the transaction by selecting the file
txns/call_contract.json
;
- Click the Push Transaction button to push the transaction.
Develop the Extension
Project Structure
.
├── package.json // The extension manifest.
├── example // example project with transaction objects
├── client
│ ├── src
│ │ ├── view // The frontend for Algorand Panel (React)
│ │ └── extension // Extension & Language Client
└── server // Language Server
└── src
└── server.ts // Entry point
Run in dev mode
- Run
npm install
in this folder. This installs all necessary npm modules in both the client and server folder
- Open VS Code on this folder
- Press Ctrl+Shift+B to compile the client and server
- Switch to the Debug viewlet
- Select
Launch Client
from the drop down
Build from source
- Run
npm install -g vsce
- Run
npm install
in this folder
- Run
vsce package