A Major Update Comes to the Remix Editor

• Autocompletes Solidity files
• Displays inline where errors are occurring
• Includes a hover feature
• Lets you jump to references and definitions
• Shows Gas Estimates

Autocomplete Solidity Files

As of Remix v0.26.0, autocompleting Solidity code happens when you type in the Editor. The Compiler will run in the background, and will process any imports you have. You will see these imports appear in the .deps directory in the File Explorer.

Tip:
If you start with a Solidity file that has errors, the Compiler might not be able to compile it. In that case, autocomplete features will not fully work until the first time a file is successfully compiled. After that, autocomplete will work even if there are errors, but only for the elements the Compiler already knows the meaning of. But if you add, for example, a new function in a file that has errors, autocomplete will not be able to find that function because it can’t compile the file. We will continue to improve this to provide more flexibility.

Errors and Warnings

You can tell the Compiler is successful if no errors or warnings are displayed in the Editor. Errors are displayed using squiggly lines. A red line indicates an error, a yellow line is a warning.

Hovering over the squiggle line shows you the message from the Compiler.

Tabs and the File Explorer will also show you a file has errors or warnings.

This is especially useful if you have errors in your imports. Your main file might not compile, but now you would see there is a problem straight away.

Hovering over the number, which indicates the amount of errors/warnings, will display the information from the Compiler.

Gas Estimates

Gas estimates are now displayed in the Editor. This only works when the compilation is successful.

Constructor gas estimates are also displayed, and consist of two components: creation cost and code deposit cost.

Go to Definition

By right-clicking, you can go to a definition. You can also use the shortcut displayed.

You can also right-click on the filename of an import statement and jump to that file.

You can also ‘peek’ the definition inline in the editor. You can then jump to a definition by double clicking on the line on the right hand side.

Go to References

By right-clicking, you can display all the references. You can also use the shortcut displayed.

You can jump to a reference by double clicking on the line on the right hand side.

Highlighting

References are now highlighted in the Editor.

Hovering

Hovering over any element in the code will provide you with information on the definition, the type, and the location.

This will only work when the file has been compiled properly at some point. If it has not, hovering will just show simple definitions:

Settings

All of these features can be turned off in Remix Settings.

Now go get coding!

Your fingers can be all toes — because autocomplete will minimize those typos! Jump to the ref! Hover for the def! See that squiggle? Then you gotta rework your groove! Now dig your gas estimation!
Ready… set… go → deploy that sucker.

Please give us some feedback about these Editor enhancements. We will be continuing to improve these features, so your comments will really help us. Comment below in this article or in Twitter, Gitter, or via email (remix@ethereum.org) or Discord.

Big shoutout to Juan Blanco of the Solidity extension for VSCode, we were happy to study his approach and used solidity code snippets in the autocomplete code. Find his extension here! And to the guys who keep the this solidity parser going for inspiration sharing the code!