Remix Plugin Engine Plugs Ahead
If you don’t already know it, the Remix Project — which encompasses Remix IDE and its associated libraries, has released an extension for VSCode.
That’s right! Remix in VSCode!
It is available now in VSCode from the marketplace.
Search for: Remix
Here’s the Remix extension page on the VSCode site. We’ve published an article with a full intro to the Remix VSCode extension.
I’d like to step back to explain how the VSCode extension came to be and what other types of integration are on the way.
Migration to a Plugin architecture
For the past few years, Remix IDE has moved to a plugin architecture to standardize communication between its modules.
Now our plugins communicate through the remix-plugin API. Furthermore, by exposing methods in this API, we have opened up the development of plugins for Remix to external teams.
The goal was to facilitate:
- development of useful tools for Remix IDE — like Solidity2UML, SolHint Linter, EthDoc, Gas Profiler, and DGIT
- integration of other projects into Remix IDE — like Quorum, Vyper plugin, Celo, Tenderly, MythX, and 3Box.
- integration of Remix IDE into other platforms and contexts — like VSCode which is what this article is about.
We would like to thank the external devs, Edson Alcalá,MachinaLabs, Edi Sinovcic & Shard Labs, dexfair, as well teams of external teams who build plugins for Remix for their projects: Quorum, Florian Idelberger & Lexon, MythX, One Click Dapp, Provable, SolHint, Tenderly, Ligi & WalletConnect.
We would also like to thank our team member Francois Guezengar AKA @GrandSchtroumpf who developed Remix Plugin Engine.
And this article announcing the VSCode extension would not have been possible without the excellent work of 0mkar who developed the VSCode extension.
Remix plugins are environment agnostic
To continue with our plugin ethos, we have organized Remix plugins so that they don’t care or even know which environment they are in. They can be in Remix, VSCode or anywhere else! The Remix Plugin Engine however does need to know where it is operating. So we have made a special flavor of engine for VSCode.
Getting Remix IDE to work as a VSCode extension
In VSCode, you usually need to write a separate extension to interact with a component. For example, for file handling — you’d need a extension that deals exclusively with communication to the VSCode File Editor. But with Remix Plugin Engine, the engine takes care of patching messages to other Remix plugins or to VSCode components.
So, by using the Remix plugin API, our webapp plugins work with both Remix and VSCode.
To walk through the diagram above, when a Remix plugin wants to open a file in the VSCode editor, it sends a message to the Remix VSCode Plugin Engine and the Plugin Engine connects the message to VSCode component.
On the VSCode side, it’s architecture is not so far from that of a web app. It uses the Electron engine and has Chrome devtools. Furthermore, it has lots of similarities with the Chrome engine. All that and it has WebView & Iframe window plugins. So the architecture of the two projects have some commonalities.
Try out our VSCode extension
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
VSCode is just the start!
Remix in other Projects
We are also working on integrating Remix into Theia — an IDE built on top of Eclipse…but more on this in a future post.
Standardization
The Remix VSCode Extension is part of our effort to standardize the interfaces between tools. Interoperability between the smart contract IDEs & Frameworks will allow coders to choose the tool for the task and not to be forced into centralization against the whims of their decentralized hearts.
Basically, we want you to make your own mix or remix of all the available smart contract coding tools.
Useful Links
The Remix Project GitHub repo: github.com/ethereum/remix-project
Remix Extension for VSCode: https://github.com/ethereum/remix-vscode
Gitter: ethereum/remix
Twitter: @EthereumRemix
