Triplex for VS Code

1. Visit the Visual Studio Code marketplace
2. Press the "Install" button
3. Make sure "Auto Update" is checked

The Open in Triplex CodeLens action appears above component functions. Clicking it opens the component in Triplex.

While focused in a jsx / tsx file selecting the Triplex: Open File action through the Command Palette (Command + Shift + P) will open the first found component in Triplex.

By default all React components can be opened by Triplex. When wanting to scope down files that can be opened you can create a configuration file and populate the "files" field.

For example the following configuration marks all jsx files inside the components folder can be opened, everything else is excluded.

{
  "files": ["../src/components/**/*.jsx"]
}

For more information see config.json Options > files.

Visual Studio Code by default doesn't run in a secure context which means certain APIs are unavailable, like SharedArrayBuffer. To enable these APIs you need to close all instances of Visual Studio Code and then re-open with the --enable-coi flag.

code --enable-coi

This flag was introduced on September 2022 (version 1.72).

Only components that are exported can be opened in Triplex. If you're trying to open a component that isn't exported you'll need to export it first.

-function Component() {
+export function Component() {

Components are rendered by themselves alongside visual controls. This means if your components rely on global state or context there may be some work involved to get it rendering without an error.

To resolve you could:

• Refactor your component to be self contained
• Use a provider component to provide the missing React context
• Declare the required context or state in another component and open that instead
• Set default props

If there's a problem and the editor has been put into an invalid state you can reload the editor by accessing the command palette via Shift + Cmd + P then selecting "Developer: Reload Webviews".

If you think you've found a bug please raise an issue on GitHub.

You might have GPU acceleration disabled. To fix:

1. Press Cmd + Shift + P
2. Search for "Preferences: Configure Runtime Arguments"
3. Add the following line of code:

   "disable-hardware-acceleration": false

Learn how to start a project and work with Triplex.