Skip to main content

Pieces for Developers Visual Studio Code Extension

Install the VS Code Extension

Using the Pieces for Developers VS Code Extension in combination with the Pieces Desktop App makes saving and reusing code simple within your IDE.

Installing the Pieces for Developers VS Code Extension​

info

In order to use the Pieces VS Code Extension, you must have Pieces OS. We recommend also using the Pieces for Developers desktop app.

You can install the VS Code Extension through the VS Code Marketplace or by searching for Pieces in the plugins search of your IDE.

Once you've installed the extension, you'll have to restart VS Code before using Pieces.

Pieces Copilot​

Utilize a powerful Copilot integrated into your IDE, bringing your development to the next level.

  1. Ask Copilot
    • Ask the Copilot about a file, folder, snippet, code fragment, or terminal output. All available by right-clicking, and then selecting 'Ask Copilot'. Ask Copilot
  2. Pieces: Fix
    • Integrated into the VS Code quick fix menu, when you have an error in your code, simply open the quick fix menu and select 'Pieces: Fix' to have the Copilot resolve your issue for you. Pieces: Fix
  3. Pieces: Comment & Pieces: Explain
    • Each method in your code has a code lens (like git lens) that allows you to explain, or comment your code. Pieces: Comment & Pieces: Explain
  4. A familiar chat experience spread across all your favorite text editing softwares
    • The Copilot chat window has the same familiar features integrated into multiple text editing softwares: VS Code, Jetbrains, Visual Studio, Web Extension, Obsidian, and JupyterLab.

Save Snippets with Pieces for VS Code​

To save code to Pieces from VS Code, simply highlight the snippet and save with:

  1. Keyboard Shortcut
    • Windows: Shift + CTRL + V
    • macOS: Shift + CMD + V
  2. Right Click
    • Right-click and select "Save to Pieces"
Save Snippets

View Saved Snippets​

To view your full list of code snippets inside your IDE:

  1. Find the Pieces for Developers Icon in the sidebar tray
  2. Select the Pieces Icon and a sidebar viewer will open with all of your snippets in a language-based list
  • You can expand the list of snippets for each language by clicking on the name of the language.

Preview Saved Snippets in Markdown​

If you'd like to get a closer look at a snippet before adding it to your project, click on the snippet in the list view and it will open in a Markdown preview. You'll be able to see the snippet and its context, including any tags, descriptions, titles, related links, related people, and previously generated shareable links.

Preview Snippets in Markdown

Refresh your Saved Snippets​

Sometimes, when saving new snippets from other plugins and extensions, you'll have to refresh your VS Code extension to get a fully updated snippet list. To refresh the list, click the refresh button located at the top of the Pieces Explorer.

Suggested Materials​

In the Pieces VS Code Extension list view, check out the Suggested Materials section. The snippets displayed here are relevant to your current file so that you can add them to your project with less searching. Pieces aims to show you the exact snippet you need precisely when you need it— and our suggestions will only get better the more you use it!

Explored Materials & Snippet Insights​

Exploring Materials with Pieces Insights allows you to learn more about a code snippet without saving it to your repository.

To Explore a material:

  1. Highlight a code snippet in your editor
  2. Right-click and select “Explore with Pieces Insights” or hit [Shift+Alt+E] (Windows)/[Shift+Option+E] (macOS)
  3. Click the “View Insights” success message in the lower right corner of your editor
  4. Pieces will open a new window with a markdown file that showcases your snippet, its description, and other associated metadata.

To revisit explored materials, visit the section titled “Explored Materials & Snippet Insights” in the Extension Tree View. Here, you can view your explored materials, save them to Pieces, or delete them— just right-click.

If you'd like to automatically save your explored materials to your Pieces repository, toggle on “Explore and Save” in your extension settings.

info

In order to Explore Materials, you must be connected to your Pieces Cloud.

Pieces can discover related snippets to the code in your editor, even if you're curious about code that isn't a Pieces snippet. To find related materials:

  1. Highlight some code in your editor
  2. Right-click and select “Find Related Materials in Pieces”
  3. Pieces will search your saved snippets and display any related materials in the Side Panel so that you can easily add them to your project.

Connect Account​

From this section of the sidebar, you can connect to (and disconnect from) your Pieces account without opening the Pieces for Developers desktop app. You'll need to be connected to your Pieces account in order to generate shareable links and explore materials.

Edit snippets in VS Code​

Editing a snippet that is saved to Pieces for Developers from VS Code is easy! To edit a snippet, follow these steps:

  1. Open the Pieces Explorer using the activity bar
  2. From the “Saved Pieces” drop down list, right-click on the snippet you want to change
  3. Click "Edit"
  4. Edit your snippet, then save by pressing CTRL + S or ⌘ + S

Search for snippets in VS Code​

To search for a snippet:

  1. Open an editable file in VS Code
  2. Right-click and choose "Search Pieces" or use the shortcut CTRL + ALT + P or ⌘ + ⌥ + P
  3. Type keywords into the search bar, and when you hit enter, the snippet will be inserted into the file

Pieces for Developers VS Code Extension Settings​

Add Snippets​

To import your User Snippets from VS Code to Pieces, click "Import User Snippets to Pieces" in this section.

Auto-complete​

To enable/disable auto-complete in this extension, you can check/uncheck the box in this section of the VS Code extension settings.

To change the auto-complete key:

  1. Go to the Pieces Settings by searching for “Pieces” in the VS Code settings or by clicking the settings button next to “Saved Materials" in the Pieces Explorer
  2. Scroll down to Pieces: Autocomplete Key
  3. Choose the key that you prefer: Enter and Tab, or just Tab

Save your settings, and you're good to go!

Auto-Expansion​

If you choose to enable this option, your snippet list will be automatically expanded to match the language of your active file.

This setting enables automatic copying for generated Pieces links. If enabled, you won't need to copy a Pieces link before sharing it with a teammate or friend.

Auto-Save​

If you choose to enable auto-save, Pieces will automatically save highly re-used and potentially useful snippets while you work. This cuts down on the number of snippets you need to save manually and helps to prevent searching for code in all of your files.

Cloud Capabilities​

Here you can choose which type of ML models you'd like to use in Pieces for VS Code: Cloud, Local, or Blended. To learn more about the types of ML models and their privacy implications, visit this section of our documentation.

Display​

In this section, you can choose what aspect of your snippets to display in the snippet list.

  • Name: Displays the title of the snippet
  • Description: Displays the snippet's description
  • Preview: Displays a preview of the code within the snippet

Explored Snippet Insights​

This section of the settings covers your Explored Snippets. If you choose to Document with Pieces Insights, exploration results will be added above the snippet as a comment.

info

If you choose to Explore and Save, any explored snippets will be automatically saved to your Pieces repository.

Launch Pieces OS​

If Pieces OS isn't running, you can launch it from the settings page instead of from your Applications folder.

Notifications​

The Pieces for Developers VS Code Extension can throw a lot of notifications. To help make your experience less noisy, you can choose the notifications you'd like to see in this section of the user settings.

  • All Notifications: You'll see all notifications, including success notifications, suggestion notifications, and failure notifications.
  • Only Critical Notifications: You'll only see critical notifications, such as failure notifications.

If you choose to check this box, any code that you select to search for related materials will be saved to your Pieces repository.

Git Context​

In this section of the settings, you can control the Git context associated with your snippets. Pick if you'd like to include information from your Git history, commit links, and commit people here.

In this section, you can customize your search experience in VS Code.

Search By​

Pick your search parameters! In search by, you can decide if your search will match the characters in your snippets' titles, tags, code contents, or combinations of the three.

Search Display​

Here, select what you'd like to display in your search results: Title, tags, and code, or title, tags, and description.

Search Result Action​

Finally, choose what you want to happen when you select a search result:

  • Open in overview
  • Insert snippet at cursor position
  • Open in overview and copy to clipboard
  • Copy to clipboard

Share Feedback​

You can share bug reports or other feedback by selecting the Share Feedback link in this section.

Side Panel Views​

Decide if you'd like for the following sections to show up in your Pieces Side Panel:

  • Explored Materials
  • Related Materials
  • Saved Materials
  • Suggested Materials

Telemetry​

By unchecking this box, you revoke permission to share analytics with the Pieces development team.

Having Trouble with Pieces for VS Code?​

If the VS Code extension isn't working for you, please make sure you have the following:

  • The latest version of Pieces for VS Code
  • Pieces OS version 8.0.0 or higher
info

After installing or updating your software, please restart VS Code. If there is still a problem, reach out to our support.

Uninstalling the Pieces for VS Code Extension​

To uninstall Pieces for VS Code:

  1. Visit the Extensions tab on your sidebar
  2. Select the Settings icon next to the Pieces for VS Code Extension
  3. Select uninstall

In order for Pieces to be completely uninstalled from VS Code, you'll need to restart your IDE.

Support and Community​