View source of deployed Stacks smart contracts in VS Code
While on explorer.stacks.co
, change stacks
to stackscode
and browse contracts comfortably in ephemeral VS Code instance
This project is supported by a generous grant from the Stacks Foundation.
You can read more about the grant here: https://grants.stacks.org/dashboard/grants/349
While browsing smart contract code on Stacks Explorer just change the base URL from .stacks.co
to .stackscode.co
. This will open Visual Studio Code instance and fetch the verified code using Stacks API.
- Supports mainnet as well as testnet
- Frictionless: tweak the url while browsing the explorer
explorer.stacks.co
->explorer.stackscode.co
- Support for contract name as well as contract deployment transaction ID. For example, BNS can be accessed via
/txid/SP000000000000000000002Q6VF78.bns?chain=mainnet
&/txid/0xd8a9a4528ae833e1894eee676af8d218f8facbf95e166472df2c1a64219b5dfb?chain=mainnet
Stacks contracts are open-source by default. All smart contract on Stacks can be viewed from the explorer itself. But the developer experience isn't desirable. To view the contracts referenced via use-trait
& impl-trait
, one needs to open these contracts in a separate tab. VS Code offers a great developer experience by allowing users to open files side-by-side, search-within-file & search-across-files, syntax highlighting using your favourite extension etc.
This project was inspired by github1s & DethCode
- Stacks Mainnet: StacksCode | Stacks Explorer
- Stacks Testnet: StacksCode | Stacks Explorer
The repository contains two packages, stacks-viewer
extension and the VSCode compilation meant for hosting it online.
All packages (currently one) except of @stackscode/stacks-viewer-vscode-host
located in packages/vscode-host
are managed by pnpm
. As VSCode depends on Yarn, our vscode-host
also needs Yarn.
# You need to create dummy certs using mkcert - https://github.com/FiloSottile/mkcert
cd ./certs
mkcert localhost
mkcert -install
cd ..
# install deps
pnpm install
# install vscode deps
cd packages/vscode-host/
yarn
cd ../../
pnpm build # this builds whole vscode and can take A LOT of time
pnpm serve
-
pnpm install
- Installs dependencies for the workspace,stacks-viewer
extension, and triggersyarn install
forvscode-host
through thepostinstall
script. -
pnpm build
- Builds all packages. -
pnpm serve
- Starts HTTP server withvscode-host
.
StacksCode contains a VSCode Web Extension using FileSystemProvider API to show sources of deployed Stacks smart contracts. The following links might be provide some insight, if you're not familiar with some of the aforementioned terms.