Awesome

<img width="200" alt="get in touch with Consensys Diligence" src="https://user-images.githubusercontent.com/2865694/56826101-91dcf380-685b-11e9-937c-af49c2510aa0.png"><br/> ^{[ 🌐 📩 🔥 ]}<br/><br/>

Solidity Visual Developer

• Advanced Solidity Language Support
• Code Augmentation
• Source Exploration
• Visual Security Linting

An extension that supports developers in writing secure and well understood code

This extension contributes security centric syntax and semantic highlighting, a detailed class outline, specialized views, advanced Solidity code insights and augmentation to Visual Studio Code.

⚠️ Note: Customize this extension to fit your needs! Show/Hide/Enable/Disable features in Preference → Settings → Solidity Visual Developer: solidity-va.*, select one of the customized security-aware color themes in Preferences → Color Themes.

We ❤ feedback → get in touch!

Marketplace: ext tintinweb.solidity-visual-auditor

Features

Semantic highlighting and solidity insights for passive security awareness. Most features are configurable (preferences -> Settings -> Solidity Visual Developer)

Themes (preferences -> Color Theme):

• Visual Auditor Dark - based on the "Atom One" theme
• Visual Auditor Light (Visual Studio) - based on the standard "light (VSCode)" theme
• Visual Auditor Solarized Light - based on the standard "Solarized Light" theme

Syntax Highlighting

• access modifiers (external, public, payable, ...)
• security relevant built-ins, globals, methods and user/miner-tainted information (address.call(), tx.origin, msg.data, block.*, now)
• storage access modifiers (memory, storage)
• developer notes in comments (TODO, FIXME, HACK, ...)
• custom function modifiers
• contract creation / event invocations
• easily differentiate between arithmetics vs. logical operations
• make Constructor and Fallback function more prominent

Code fragments passively draw your attention to statements that typically <span style="color:#c5f015">reduce risk </span> or <span style="color:#f03c15">need your attention </span>.

Semantic Highlighting

• highlights StateVars (constant, inherited)
• detects and alerts about StateVar shadowing
• highlights function arguments in the function body

Review Features

• audit annotations/bookmarks - @audit - <msg> @audit-ok - <msg> (see below)
• generic interface for importing external scanner results - cdili json format (see below)
• codelens inline action: graph, report, dependencies, inheritance, parse, ftrace, flatten, generate unittest stub, function signature hashes, uml

Graph- and Reporting Features

• 💒🤵👰 vscode-solidity-auditor ⚭ Sūrya
  • access your favorite Sūrya features from within vscode!
  • interactive call graphs with call flow highlighting and more!
• 📈🎉 auto-generate UML diagrams from code to support your threat modelling exercises or documentation!

Code Augmentation

• Hover over Ethereum Account addresses to download the byte-code, source-code or open it in the browser
• Hover over ASM instructions to show their signatures
• Hover over keywords to show basic Security Notes
• Hover over StateVar's to show declaration information

Views

• Cockpit View
  • Explore and focus on solidity files in your workspace
  • Generate report/graphs for any files/folders selected in the explorer views
  • Selectively flatten files
  • Search for contracts that are likely to be deployed in the system
  • Context-sensitive views: click into a contract in the editor to list public state-changing method
  • Get quick access to extension settings
• Outline View
  • populates VS Code outline view with sourceUnit and contract layout
  • contracts, stateVars, methods, inherited names
  • annotates security relevant information (visibility, ...)
  • calculates complexity rating
  • annotations functions with information about whether they are accessing stateVars

Installation

Method 1: Install by going to Visual Studio Market Place and click Install.

Method 2: Bring up the Extension view in VS Code and search for Solidity Visual Developer and click Install

Method 3 (Manual):

1. Download the latest compiled extension as *.vsix
2. Fire up Terminal and install the extension by running code --install-extension "solidity-visual-auditor-0.0.x.vsix"
3. vscode --> preferences --> color scheme --> Solidity Visual Developer Dark

Tour

Scroll down and take the tour.

• semantic highlighting for state variables (constant=green, statevar=golden, inherited=blue)
• semantic highlighting for function arguments
• outline view with security annotations and inherited names
• tooltips (asm instruction signatures, security notes)
• @audit tags
• graph's and uml
• generic interface to import issues from external scanners
• Cockpit View

Ethereum Account Address Actions

• open the account on etherscan.io
• show the contract code
• show the VerifiedContract source code
• decompile the byte-code. requires vscode-decompiler

Semantic function argument highlighting

• arguments are assigned different colors in the scope of the function

Inline Bookmarks: @audit tags

This feature is provided by Inline Bookmarks.

• @audit - <msg> ... flag lines for security review or start a security review discussion
• @audit-ok - <msg> ... flag that a line was checked for security or a security discussion on that line turned out to be a non-issue

Code Augmentation / Annotations / Hover / Tooltip

• additional information for various keywords (including security notes)

• asm instruction signatures

• Address hover integration via tintinweb.vscode-ethover
  • Open it in etherscan (or whatever you configure)
  • Show address balance in hover (mainnet) (note: might be rate-limited, configure your API key in settings)
  • Download the bytecode and disassemble it.
    • With hover info on instructions
    • Representation of data as ASCII and resolving 4bytes to funcsigs, Color code reflects the type of instruction: stack, memory, storage, arithm., logic, system, environment, …
  • Download the bytecode and show it.
    • With hover info
    • Click to see instruction boundaries
    • Color coded bytes to reflect type of instruction)
  • Show verified contract source (etherscan.io)
  • Show reconstructed contract source from eveem.org
  • Show reconstructed contract source from evm.js
  • run vscode-decompiler to decompile it manually using panoramix (eveem.org) locally

State Variable Highlighting

• highlight contract local stateVars (golden box)

• alert on a shadowed variable (red box)

• highlight const stateVar (green box)

• highlight inherited stateVar (blue box Approval)

CodeLenses

• surya - interactive graph

• surya - generate report, show inheritance, show AST

• flatten source file with tintinweb.vscode-solidity-flattener (using truffle-flattener)

• surya - ftrace

• UML - auto-generate UML for source-units or specific contracts

• Function Signature Hashes

Outline View

• library with function parameters T and declarations

• class and events, functions annotated (stateMutability, visibility)

• class and events, functions annotated (stateMutability, visibility)

• inheritance browser - resolves inheritance, only shows inherited names

• extra information (subjective function complexity; accesses stateVar?)

Cockpit View

We've been working on a new cockpit view that allows you to navigate large codebases more efficiently. Check out the new  <img width="32" alt="sidebar-logo" src="https://user-images.githubusercontent.com/2865694/78054647-acc8b980-7382-11ea-9542-ee8bcfaae175.png">  icon in the activity bar to your left.

So, what can you do with it?

• Explore .sol files with the new workspace explorer
• Generate report/graphs for any files/folders selected in the explorer views <br><img width="360" alt="image" src="https://user-images.githubusercontent.com/2865694/83885864-34e28b00-a747-11ea-990d-74410f062153.png"><img width="360" alt="image" src="https://user-images.githubusercontent.com/2865694/83886949-0f09b600-a748-11ea-8cf2-878773e3f0b0.png">
• Conveniently flatten selected files (selected folders or all files in the top-level view) (Note: truffle-flattener may require an npm install of the project for flattening to work)
• Search for contracts that are likely to be deployed in the system (complete workspace or selected folders) <br><img width="360" alt="image" src="https://user-images.githubusercontent.com/2865694/78017640-d666ee00-734c-11ea-8d16-fbf393ad4804.png">
• Context-sensitive views: click into a contract in the editor to list public state-changing methods <br><img width="360" alt="image" src="https://user-images.githubusercontent.com/2865694/78017716-fc8c8e00-734c-11ea-8e04-0e9ed0a71471.png">
• Get quick access to extension settings <br><img width="360" alt="image" src="https://user-images.githubusercontent.com/2865694/78018038-7ae93000-734d-11ea-8303-a4366e231217.png">

And there is more to come 🙌 stay tuned!

Note: The cockpit view is fully customizable. You can hide both the sidebar menu or any view in the cockpit that you do not need (right-click → hide).

Commands

• suggest top level contracts aka "entrypoint contracts" (most derived)
• flatten current (codelens) or all suggested top level contracts (command)
• list all function signatures (human readable or json format)
  
• open remix in external browser

Please refer to the extension's contribution section to show an up-to-date list of commands.

Theme: Solidity Visual Developer Light (VSCode)

Theme: Solidity Visual Developer Dark

Simple DAO

Vulnerable Contract

Theme: Solidity Visual Developer Solarized Light

Simple DAO

Extension Settings

• solidity-va.mode.active .. Enable/Disable all active components of this extension (emergency master-switch).
• Solidity-va.parser.parseImports ... Whether to recursively parse imports or not
• Solidity-va.hover ... Enable or Disable generic onHover information (asm instruction signatures, security notes)
• Solidity-va.deco.statevars ... decorate statevars in code view (golden, green, blue boxes)
• Solidity-va.deco.arguments ... enable/disable or select the mode for semantic highlighting of function arguments. (default: 'enable' = 'color and arrow')
• Solidity-va.deco.argumentsMode ... select the mode for semantic highlighting of function arguments (may require a reload)
• Solidity-va.deco.argumentsSuffix ... a custom Suffix/Symbol that is appended to the decoration when performing semantic highlighting for function arguments
• Solidity-va.outline.enable ... enable/disable outline and symbolprovider
• Solidity-va.outline.decorations ... decorate functions according to state mutability function visibility
• Solidity-va.outline.inheritance.show ... add inherited functions to outline view
• Solidity-va.outline.extras ... annotate functions with extra information (complexity, statevar access)
• Solidity-va.outline.var.storage_annotations ... Whether to show/hide storage annotations for variables in the outline view
• Solidity-va.outline.pragmas.show ... Whether to show/hide pragmas in the outline view
• Solidity-va.outline.imports.show ... Whether to show/hide imports in the outline view
• Solidity-va.diagnostics.import.cdili-json ... Automatically import diagnostic issues from external scanners using the cdili-issue.json format:

  {
    "onInputFile": "contracts/BountiesMetaTxRelayer.sol",
    "atLineNr": "10",
    "ruleType": "code_smell",
    "severity": "major",
    "linterVersion": "0.1",
    "linterName": "maru",
    "message": "State Variable  Default Visibility - It is best practice to set the visibility of state variables explicitly. The default           visibility for \"bountiesContract\" is internal. Other possible visibility values are public and private.",
    "forRule": "State_Variable_Default_Visibility"
  }
  

• Solidity-va.codelens.enable ... enable/disable codelens support (inline code actions)
• solidity-va.preview.dot ... open dot output in graphviz rendered form
• solidity-va.preview.markdown ... open markdown output in rendered form
• Solidity-va.tools.surya.input.contracts ... Define whether surya should take cached files or all contracts in the workspace as input

Please refer to the extension's contribution section to show an up-to-date list of settings.

FAQ

• Q: The uml feature does not seem to work. How can I set it up?
• A: We are relying on a properly set-up plantuml installation. Please follow the set-up guide at jebbs-plantuml vscode extension.

Known Issues

• outline view does not always refresh. TempFix: modify and save the file to trigger a refresh.
• codelenses do not appear. TempFix: modify and save the file to trigger a refresh.
• github issues

Acknowledgements

• Themes: Atom One Dark Theme and an adapted version of built-in Solarized Light
• Base Grammar for Solidity: vscode-solidity

Release Notes

Changelog