Remix in VSCode: Compiling, debugging, Metamask & Remixd
While the Remix extension for VSCode is still in Beta — try out Remix’s popular features in VSCode!
In the VSCode marketplace search for: Ethereum Remix
As of version 0.0.9 we have included:
- the famous Remix debugger
- connect directly to the Remix IDE with an integrated Remixd module
- deploy with Metamask via the Remixd module
- compile with automatic imports
- an improved menu and command structure
Let’s dive in!
The Remix tools in VSCode
The Remix extension icon on the left exposes two menus. One for core functionality and one for the plugins. But before trying this, open up a workspace, otherwise the extension will not load. You need some files to work on.
We have also sneakily added the core commands below the file explorer so you can easily fire up that compiler.
Compiling supports imports
Imports are now dealt with in the same way as they are in Remix!
So now you can drop in your ERC20 Open Zeppelin contract and it will compile. It also deals with imports for Hardhat & Truffle.
In the next release of the extension, the compiler’s UI will be the same as in Remix IDE.
Compiling is easy! Just open any .sol file and click on compiler. VSCode will prompt you to select the file you wish to compile.
Watch the output below in VSCode for errors and any other messages.
So then what?
Compiling compiles and writes some data to your filesystem. Remix has apps and plugins that can deal with this data and do something with it. Try out the plugins — but especially check out…
Deploy & Run
The Run & Deploy app in the extension is very similar to the basic functionalities you have in Remix IDE. Once you have compiled your contract use that app to deploy it. You can also compile directly from that app.
Running Remixd from VSCode
Remixd is a daemon that lets you connect Remix IDE (the web app) to your local filesystem. You can now run this daemon straight from VSCode, no need to run it in the terminal. It will automatically expose your VSCode workspace to Remix IDE.
But why would you want to connect VSCode to Remix IDE— the web app?
You can then use the in-browser tools like… Metamask!
Deploy to Public test nets or to the mainnet with Metamask
Also exciting is that you can deploy to the in-browser JSVM chain from VSCode.
But just don’t get carried away — you can only connect to Remixd to a single workspace.
Anyway, its easy to get Remix going — just click on the remixd client (see the image below)
In Remix IDE (the website) connect to localhost in the File Explorer.
Deploy Deploy Deploy!
Local networks, Remix VM, Metamask & Wallet Connect
If you are familiar with running and deploying in Remix, the Deploy & Run app in VSCode will look familiar to you.
However, you will always need to connect to some network first before you can do this. Unlike Remix IDE, there is no default VM active, you will have to make a choice.
Local networks are easy, you can run your Ganache client and connect. If you have configured your Truffle environment to connect to public test networks that will, of course, also work.
If you want to use the Remix VM you can do so by connecting to Remix IDE with Remixd as described earlier. Deploying from the extension will deploy to the Remix VM. You could of course also just work in Remix IDE (the web app) itself.
But connecting with Remixd to Remix IDE allows you to deploy to Metamask!
Once you have clicked to start the Remixd daemon, go to the File Explorers inRemix IDE (the web app) and select the localhost workspace. Then, also in the Remix IDE web app go to Deploy & Run plugin and select the Inject Web3 provider.
In the VSCode Run & Deploy application just refresh the accounts. It will reload your connection.
Now when deploying, Metamask will popup in your browser window asking to sign the transaction.
WalletConnect is another option for you to use. Scan the familiar QR code with your phone on a Wallet Connect compatible app and you can connect to it. Any transaction you run will run through the app on your phone, so keep it by your side and preferably open to sign the transactions. Wallet Connect connections can be a bit unstable and sometimes you need to reconnect on your phone.
Debugger
The debugger is a popular application in Remix. We have ported it to VSCode.
As you run a transaction in the Run & Deploy app in the extension in VSCode it will output some familiar data. Just copy the transactionhash.
Fire up the debugger and paste the hash there.
So what is next?
We will continue to improve this VSCode extension and to add more of the familiar Remix UI to VSCode so you can mix your workflows. Doing this in VSCode presented us with a lot of challenges and there are bugs of course. Please let us know!
You can reach us on Twitter, Gitter, and via email (remix@ethereum.org)
TIA!
Shout-out & thanks
I’d like to say thanks to the guys from Moonbeam https://moonbeam.network/ who developed a plugin for Remix to connect to their network. This plugin provided the basic react code for the VSCode version of our current Run & Deploy application. That saved us a lot of time in getting a prototype out there. Thanks Antoine!
