# CatSuite Studio for VS Code

> CatSuite Studio for VS Code: how to install and use the extension to create, validate, test and sign .catplug plugins with CatSuite SDK suggestions.

- Language: en
- Canonical URL: https://netcattest.com/catsuite/en/docs/extensions/vscode
- Section: Extensions
- Updated: 2026-10-06
- Other language (pt-BR): https://netcattest.com/catsuite/docs/extensoes/vscode

**CatSuite Studio** is the official CatSuite extension for **Visual Studio Code**. With it you write JavaScript plugins, commands and workflows for the CatSuite app without leaving the editor: **SDK** suggestions as you type `cat.`, ready-made templates, project **validation**, a **local preview** with fixtures and **signed `.catplug`** package builds. This page explains how to install, configure and use every feature of the extension.

| Resource | Address |
|---|---|
| Install the extension | [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=NetCatTest.catsuite-studio) |
| Source code | [catsuite-vscode folder on GitHub](https://github.com/netcattest/catsuite/tree/main/catsuite-vscode) |
| License | MIT |
| Requirement | Visual Studio Code 1.100.0 or newer |

## What CatSuite Studio is and what it is for

CatSuite Studio is a development workbench for [CatSuite extensions](https://netcattest.com/catsuite/en/docs/extensions). It brings a plugin's full cycle into VS Code: writing the code with SDK help, checking the manifest and permissions, watching the behavior in an isolated preview and building the signed package you import into the app.

It is the installable alternative to the [web extension IDE](https://netcattest.com/catsuite/en/docs/extensions/ide). Both speak the same API v1 contract and produce `.catplug` packages; the choice depends on where you prefer to work.

> [!NOTE]
> CatSuite Studio ships the extension SDK: the `catsuite.d.ts` types file comes inside the extension and powers the editor suggestions. You do not need to download the SDK separately.

## Installation

### From the Marketplace

1. Open the [CatSuite Studio page on the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=NetCatTest.catsuite-studio).
2. Click **Install** and allow the browser to open VS Code.
3. Confirm the installation in the editor.

### From the VS Code Extensions view

1. Open the **Extensions** view in the VS Code sidebar.
2. Search for **CatSuite Studio**.
3. Check that the publisher is **NetCatTest** and click **Install**.

### From the command line

```bash
code --install-extension NetCatTest.catsuite-studio
```

### Requirements

- **Visual Studio Code 1.100.0 or newer**.
- A **trusted workspace**: creating projects, running the preview, signing and exporting require the open folder to be marked as trusted in VS Code.
- A CatSuite app that supports extensions, to install and run the exported packages.

> [!WARNING]
> Install CatSuite Studio only from the official Marketplace or from the [source code on GitHub](https://github.com/netcattest/catsuite/tree/main/catsuite-vscode). Be wary of `.vsix` files distributed on other sites.

## Getting started

1. Open a folder in Visual Studio Code.
2. Open the command palette and run **CatSuite: Create extension**.
3. Pick a template and open its JavaScript entry script.
4. Type `cat.` to explore the SDK, then run **CatSuite: Validate project**.
5. Run **CatSuite: Test with a local fixture** to check the preview.
6. When the project is ready, run **CatSuite: Build signed .catplug** and import the package into a CatSuite version that supports extensions.

For a quick script, with no project, run **CatSuite: New CatPlug script**, or create an empty `.catjs` file or textual `.catplug` file and type `catplug`.

## The CatSuite Studio interface

After installation, a **CatSuite** icon appears in the VS Code activity bar. It opens two views:

- **Projects** — the CatSuite projects in the open workspace.
- **SDK features** — the SDK features available to insert into your code.

The **CatSuite: CatSuite Atelier** command opens the extension's main panel, the starting point to create, validate, test and package.

## Writing with the SDK

- **Suggestions as you type `cat.`.** The editor lists the SDK APIs with contextual help, based on the `catsuite.d.ts` types. By default suggestions appear in any language; you can limit them to CatSuite projects in the settings.
- **The `catplug` template.** Type `catplug` to insert a ready-made script template.
- **Insert SDK feature.** The **CatSuite: Insert SDK feature** command adds SDK feature snippets at the cursor.
- **Textual files.** Textual `.catplug` and `.catjs` files get JavaScript editing, syntax highlighting, snippets and diagnostics. Compiled packages open in a separate inspector.

See the full contract in the [JavaScript API reference](https://netcattest.com/catsuite/en/docs/extensions/api).

## Creating projects and workflows

The **CatSuite: Create extension** command opens a wizard with templates for:

- panels and commands;
- traffic analysis;
- header changes;
- workflow steps;
- parsers.

The **CatSuite: Create example workflow** command generates an example `.catflow` file for [visual workflows](https://netcattest.com/catsuite/en/docs/workflows).

## Validating the project

CatSuite Studio checks the project while you work:

- **manifest** — identity, entry script, permissions, destinations and hashes (see [the .catplug package manifest](https://netcattest.com/catsuite/en/docs/extensions/manifest));
- **permissions and SDK usage** — whether the code uses capabilities the manifest declares;
- **file hashes** — whether the manifest hashes match the files;
- **workflow connections** — whether the steps of a `.catflow` are wired correctly.

With **continuous validation** on (the default), problems show up in the editor as you type. To run the full check, use **CatSuite: Validate project**. After changing files, **CatSuite: Update manifest hashes** recalculates the hashes.

The `manifest.json`, `catsuite.projeto.json`, `.catflow` and `.catdata` files also get JSON schema validation, with field suggestions.

## Local preview with fixtures

The **CatSuite: Test with a local fixture** command runs the script in an **isolated QuickJS preview**, with local fixtures and simulated host APIs. In the preview you inspect:

- the registered tabs;
- the findings generated;
- the request changes;
- the emitted artifacts.

> [!IMPORTANT]
> The preview does not send live HTTP requests and does not run external tools. Validate the real behavior separately, in your authorized CatSuite environment.

## Packaging and signing

The **CatSuite: Build signed .catplug** command creates the plugin's final package with your **signing identity**. The source script goes through the project build before it reaches the app, and the installed CatSuite must support the package format and the SDK version the plugin requests.

The signing identity is managed by three commands:

| Command | What it does |
|---|---|
| **CatSuite: Show signing identity** | Shows the identity used to sign your packages. |
| **CatSuite: Export protected identity backup** | Creates an encrypted backup of the identity, to keep or move to another machine. |
| **CatSuite: Restore identity from backup** | Restores the identity from a protected backup. |

> [!TIP]
> Keep the identity backup somewhere safe. It lets you keep signing packages as the same author after you change computers.

## Inspecting packages and recognizing authors

The **CatSuite: Inspect CatSuite file** command opens compiled packages and shows the package integrity and the author fingerprint. The inspection tells two things apart:

- **valid signature** — the package was not changed after it was signed;
- **recognized author** — you have already confirmed that the fingerprint belongs to a trusted author.

Use **CatSuite: Recognize this package author** after checking the fingerprint with the author through a trusted channel, and **CatSuite: Remove recognized author** to undo it. The inspector also opens password-protected packages.

To edit an existing plugin without touching the original, use **CatSuite: Create editable package copy**: the extension turns the package into a project copy and preserves the original package and its origin information.

> [!WARNING]
> A valid signature does not mean the author is trustworthy. Check the fingerprint before recognizing an unfamiliar author.

## Files CatSuite Studio understands

| File | What it is for |
|---|---|
| `.catjs` or textual `.catplug` | JavaScript source for development |
| `manifest.json` | Plugin identity, entry script, permissions, destinations and hashes |
| `catsuite.projeto.json` | CatSuite Studio project configuration |
| Compiled `.catplug` | Plugin package for inspection and import into the app |
| `.catflow` | Workflow definition, with validation and inspection |
| `.catdata` | Exported CatSuite data, for inspection |

## Every command

Open the command palette (`Ctrl+Shift+P` on Windows and Linux, `Cmd+Shift+P` on macOS) and type **CatSuite** to see the list.

| Command | What it does |
|---|---|
| **CatSuite Atelier** | Opens the extension's main panel. |
| **Create extension** | New project wizard from a template. |
| **New CatPlug script** | Creates a standalone script, with no project. |
| **Open script in editor** | Opens the project's entry script. |
| **Validate project** | Checks manifest, permissions, SDK usage, hashes and workflows. |
| **Update manifest hashes** | Recalculates the file hashes in the manifest. |
| **Insert SDK feature** | Inserts an SDK feature snippet at the cursor. |
| **Create example workflow** | Generates an example `.catflow`. |
| **Test with a local fixture** | Runs the isolated preview with fixtures. |
| **Build signed .catplug** | Packages and signs the plugin. |
| **Inspect CatSuite file** | Opens a CatSuite package or file in the inspector. |
| **Create editable package copy** | Turns a package into an editable project, preserving the original. |
| **Show signing identity** | Shows the signing identity. |
| **Export protected identity backup** | Exports the encrypted identity. |
| **Restore identity from backup** | Restores the identity from a backup. |
| **Recognize this package author** | Marks the author's fingerprint as recognized. |
| **Remove recognized author** | Removes an author from the recognized list. |
| **Apply CatSuite style** | Applies the CatSuite look to the editor. |
| **Restore previous style** | Returns to the theme you used before. |
| **Apply CatSuite file icons** | Turns on the CatSuite file icons. |
| **Choose language** | Switches the language of the extension panels. |
| **Open CatSuite Studio settings** | Opens the extension settings. |
| **Refresh** | Reloads the extension views. |

## Settings

Run **CatSuite: Open CatSuite Studio settings** or search for `catsuite` in the VS Code settings.

| Option | Values | Default | What it does |
|---|---|---|---|
| `catsuite.idioma` | `sistema`, `pt-BR`, `en` | `sistema` | Panel, prompt and help language. VS Code command labels follow the editor language. |
| `catsuite.validacaoContinua` | `true`, `false` | `true` | Validates manifest, JavaScript and workflow while you edit. |
| `catsuite.estiloPainel` | `catsuite`, `editor` | `catsuite` | Style of the CatSuite Studio panels. It does not change the global theme. |
| `catsuite.autor` | text | empty | Suggested author for new plugins. |
| `catsuite.sugestoesGlobais` | `true`, `false` | `true` | Shows `cat.` suggestions and `catplug` templates in any file, including files outside projects. |

```json
{
  "catsuite.idioma": "en",
  "catsuite.validacaoContinua": true,
  "catsuite.estiloPainel": "catsuite",
  "catsuite.autor": "Lab Team",
  "catsuite.sugestoesGlobais": false
}
```

## Themes, icons and language

CatSuite Studio ships two color themes and a file icon theme:

- **CatSuite Cyber** — the app's black-and-yellow look;
- **CatSuite Comfort** — an alternative palette for those who prefer less contrast;
- **CatSuite icons** — dedicated icons for the ecosystem files.

Use **CatSuite: Apply CatSuite style** and **CatSuite: Apply CatSuite file icons** to turn them on, and **CatSuite: Restore previous style** to return to your theme. The panels work in **Brazilian Portuguese** and **English**: choose with **CatSuite: Choose language** or let them follow the editor language.

## CatSuite Studio or the web IDE?

| Situation | Best option |
|---|---|
| Trying out a quick idea, with nothing to install | [Web IDE](https://netcattest.com/catsuite/en/docs/extensions/ide) |
| Working on a computer where you cannot install extensions | [Web IDE](https://netcattest.com/catsuite/en/docs/extensions/ide) |
| Larger projects, versioned with Git | CatSuite Studio |
| Building packages signed with your author identity | CatSuite Studio |
| Inspecting received packages and recognizing authors | CatSuite Studio |

## Common problems

**`cat.` suggestions do not appear.** Check that the `catsuite.sugestoesGlobais` option is on, or that the file is inside a CatSuite project.

**I cannot create the project, test or sign.** These actions require a trusted workspace. Mark the folder as trusted in VS Code and try again.

**The app rejected the package.** Check that your CatSuite version supports extensions and the SDK version the plugin requests, run **CatSuite: Validate project** and build the package again.

**Validation reports mismatched hashes.** Run **CatSuite: Update manifest hashes** after changing the project files.

**I changed computers and lost the identity.** Restore it with **CatSuite: Restore identity from backup**, using the protected backup you exported earlier.

## Next step

- [Web extension IDE](https://netcattest.com/catsuite/en/docs/extensions/ide)
- [JavaScript API reference](https://netcattest.com/catsuite/en/docs/extensions/api)
- [The .catplug package manifest](https://netcattest.com/catsuite/en/docs/extensions/manifest)
- [Downloads and SDK](https://netcattest.com/catsuite/en/docs/downloads)