Twigs IntelliSense

Twigs IntelliSense enhances the Twigs development experience for Visual Studio Code users with advanced features including autocomplete, seamless access to Twigs components documentation from the VSCode command palette, and a color swatch reference for color variables.

Installation

Install via the Visual Studio Code Marketplace →

In order for the extension to activate you must have Twigs installed and a Twigs config file named twigs.config.{js,ts} in your workspace root directory.

Features

Autocomplete

Intelligent suggestions with values for Twigs theme variables.

Quick Access to Twigs Docs

Easy access to Twigs docs from VSCode command palette.

Press (Ctrl + Shift + P) in windows or (Cmd + Shift + P) in mac to open Command Palette. Search for Twigs Docs to list all the components. Select the item to redirect to Twigs Documentation.

Color Preview

See the color preview on the suggestions.

Troubleshooting

If you’re having issues getting the IntelliSense features to activate, there are a few things you can check:

• Reload VSCode. To reload Press (Ctrl + Shift + P) in windows or (Cmd + Shift + P). Select Reload Window.
• Ensure that you have a Twigs config file in your workspace and that this is named twigs.config.{js,ts}. Check out the Twigs documentation for details on creating a config file.
• Ensure that the Twigs module is installed in your workspace, via npm, yarn.
• Make sure your VS Code settings aren’t causing your Twigs config file to be hidden/ignored, for example via the files.exclude or files.watcherExclude settings.