A Remix IDE extension for VSCode
The Remix Project — which encompasses Remix IDE and its associated libraries, is proud to announce an beta release of a Remix extension for VSCode. It is available now in VSCode from the marketplace.
Search for: Remix
Here’s the Remix extension page on the VSCode site.
In this Beta Release, what can the Remix extension do?
Let’s start with the basics. You can run Remix in VSCode and use the default features of VSCode — like the VSCode Editor and its File Explorer. Also Remix in VSCode is not a web app, so you’ll have direct access to your computer’s filesystem.
In this beta, you can:
- Use Remix‘s Solidity Compiler as well as other Remix plugins that operate on the compilation result.
- Compile with Juan Blanco’s Solidity VSCode extension- (see below for more info) and then use the Remix plugins that operate on the compilation result.
What will it be able to do in the next step?
Deploy
Our next next step in the development plan for this extension will be to add the Deploy & Run plugin. In Remix IDE (the web app), the Deploy & Run plugin deploys to public testnets (or to the mainnet) when the provider: Injected Web3 has been selected. We are figuring out a way of deploying to public networks without using MetaMask’s because it is not available in VSCode.
Debug
As soon as the Run & Deploy is added, all plugins that use that plugin’s API will also soon follow. And at the top of this list is the Debugger.
So try out the Beta!
Setup
- Load the Remix extension from the VSCode Marketplace
- The Remix’s Solidity Compiler plugin is loaded by default.
- To load the other plugins, click the Remix icon and you’ll see the plugins in the left panel.
- Then to activate any plugin you see on the left panel, click on the plugin and you will be prompted with an activation modal/menu.
Compiling Solidity & YUL
There are 2 compilers available:
- Remix Solidity/YUL compiler (which as the name says also compiles YUL) This is the same compiler used in Remix IDE. For the sake of differentiating between the two plugins, I’ll refer to this as Remix Solidity Compiler. It is available when you activate the Remix extension.
- There is already a popular VSCode extension for compiling Solidity. It is named Solidity extension and it is written by Juan Blanco. For the sake of clarity in this article, I’ll refer to it as Juan Blanco’s Solidity extension. To use this extension, you need to activate it in the VSCode Marketplace.
The basic differences between the two is that the Remix Solidity Compiler also compiles YUL whereas Juan Blanco’s Solidity extension does not compile YUL — but it does run a bit faster.
Choose a Solidity Version
Whichever compiler you’ll use probably need to select the version of Solidity.
Go to the Command Palette ( Shift+cmd+p )(mac: Shift+opt +p) and type version — to get the Solidity (Juan Blanco’s extension) & Remix Solidity Compiler.
Here is the Remix Solidity Compiler modal for choosing the compiler version.
Firing up either Compiler
Click into the panel with the Solidity file to make it the active tab.
- use the command palette ( Shift+cmd+p ) and type in compile. You will see both compiler options there (assuming you already activated Juan Blanco’s Solidity extension).
Choose one and in the output panel you should see something like:
And what about F5??
For users of Juan Blanco’s Solidity extension, you’d usually compile by hitting F5.
But F5 will not work (yet) in conjunction with Remix.
You should compile with the ‘Compile with Solidity extension’. This way you get the benefits of both extensions.
Currently, Remix can only listen on Juan Blanco’s Solidity compilation result when his extension is called from within our extension. So for now, don’t use the shortcuts.
Again, make sure the .sol file actively selected when compiling. If you have the plugin in focus, it won’t be able to tell which file you want to compile.
Once the Deploy and Run plugin has been integrated — users will be able compile with either the Remix Solidity Compiler or the Juan Blanco Solidity extension and then deploy to a public test net and debug with the Remix Debugger.
The Remix plugins currently available
The currently available plugins are those that use the compilation result.
Defi Explorer
The Defi Explorer will load Uniswap contracts into the Files Explorer so you can play around with this protocol and understand how it works.
EthDoc
The EthDoc Documentation Generator takes the NatSpec comments and formats them into legible documentation.
Learneth
Learneth is a tutorial framework inside of Remix for step by step learning. Some of the tutorials include tests where students work is checked.
There are tutorials for beginners through experienced learners. We have written the tutorials but it is easy to write Learneth tutorials for your classes and to host them on your own repo.
One Click Dapp
A free tool to generate smart contract interfaces.
Sol2UML -Create a UML diagram
This plugin will draw a UML diagram on the most recently compiled Solidity file.
SolHint Linter
The SolHint linter will give you warnings and when you click on a warning it will highlight the relevant code.
Sourcify — contract fetching & verification
- Fetching Contracts
Input the address of a verified contract to fetch it. - Verifying with Sourcify
Currently the verification works but until the Deploy and Run plugin is integrated into the Remix VSCode extension, the workflow is too tortuous. So just wait on this one.
Tenderly
Remix & Tenderly project integration. Verify Contracts (although this has the same issue as the Sourcify verifier). Import to Remix from your Tenderly project.
Want to code up some plugins for Remix in VSCode?
Checkout the remix-vscode repo and its README file for instructions.
Let us know what you think
The Remix VSCode is in Beta — so any feedback you give will be very useful. Post issues: https://github.com/ethereum/remix-vscode/issues
