Skip to content
Gusto’s condensed “G” logoWorkbench

Visual Studio Code Extension

Visual Studio Code tooling for development with Workbench— Gusto’s Design System

To streamline development with Workbench and reduce typing for common patterns, we’ve created a Visual Studio Code extensionExternal link.

Workbench extension snippet autocomplete example. With 'workbench.dia' typed, code snippets are offered for 'workbench.dialog', 'workbench.dialog.form', and 'workbench.dialog.formik'
Type workbench or wb to see available snippets. Snippets are then accessible by component name.
Workbench extension snippet autocomplete example. With 'workbench.dia' typed, code snippets are offered for 'workbench.dialog', 'workbench.dialog.form', and 'workbench.dialog.formik'
Selecting an option will fill in the snippet. You can navigate to each section of the snippet with the Tab key. Guidance is provided in the form of a top-level comment in cases where the imports are not directly from the core @gusto/workbench package or for patterns using hooks.

Gusto Workbench on the Visual Studio Code MarketplaceExternal link

  1. To install the extension from within your editor, open the Extensions tab.
Open the extensions tab in Visual Studio code from the command palette by typing command, shift, P for MacOS and Linux or control, shift, P for Windows and typing “Extensions: Install Extensions”
  1. Then type “Gusto Workbench” into the search bar and navigate down to “Gusto Workbench” and click “Install”.
Type “Gusto Workbench” into the search bar and navigate down to “Gusto Workbench” and click “Install.”