Two VS code tutorials (#3603)
Co-authored-by: angiejones <jones.angie@gmail.com>
This commit is contained in:
Rizel Scarlett
@@ -53,7 +53,7 @@ The features don't end here. The team is actively exploring several exciting fea
|
||||
# Community and Contributing
|
||||
The project is open source, and welcomes contributions from the community. If you'd like to support the project or directly contribute to it, you can check out [the VSCode MCP repo on GitHub](https://github.com/block/vscode-mcp), or [join the Block Open Source Discord](https://discord.gg/block-opensource) if you'd like to ask the team any questions or start discussions.
|
||||
|
||||
You can also follow the [tutorial showing you how to integrate VS Code with Goose](/docs/mcp/vscode-mcp).
|
||||
You can also follow the [tutorial showing you how to integrate VS Code with Goose](/docs/mcp/vs-code-mcp).
|
||||
|
||||
<head>
|
||||
<meta property="og:title" content="Cracking the Code in VS Code" />
|
||||
|
||||
@@ -63,7 +63,7 @@ This works differently from the Knowledge Graph extension even though they both
|
||||
|
||||
## VS Code Extension: Your Favorite Editor, Connected
|
||||
|
||||
One of the biggest points in conversations with people especially around vibe coding, is finding ways to track what changes are being made. While version control is always recommended, sometimes I want to be able to stop or change direction before going too far. The [VS Code Extension](/docs/mcp/vscode-mcp) alongside other features, allows me to preview the diff of my code changes before I commit them.
|
||||
One of the biggest points in conversations with people especially around vibe coding, is finding ways to track what changes are being made. While version control is always recommended, sometimes I want to be able to stop or change direction before going too far. The [VS Code Extension](/docs/mcp/vs-code-mcp) alongside other features, allows me to preview the diff of my code changes before I commit them.
|
||||
|
||||
I can choose to accept or refuse these changes, or tell Goose to try something else before any actual changes are made.
|
||||
|
||||
|
||||
@@ -34,6 +34,11 @@ The list of experimental features may change as Goose development progresses. So
|
||||
description="An experimental Android automation app that acts as an open agent running on your phone, providing maximal automation of everyday tasks."
|
||||
link="/docs/experimental/goose-mobile"
|
||||
/>
|
||||
<Card
|
||||
title="VS Code Extension"
|
||||
description="An experimental extension enabling Goose to work within VS Code."
|
||||
link="/docs/experimental/vs-code-extension"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+5
-4
@@ -1,16 +1,17 @@
|
||||
---
|
||||
title: VS Code Extension
|
||||
description: Use the Goose VS Code Extension to connect Goose to your editor
|
||||
sidebar_label: VS Code Extension
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
:::warning
|
||||
This extension is experimental and under development.
|
||||
:::warning
|
||||
This is an experimental extension enables you to use Goose within VS Code. It is not to be confused with the [VS Code MCP Server](/docs/mcp/vs-code-mcp).
|
||||
:::
|
||||
|
||||
This tutorial covers how to install and use the [Goose VS Code Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-goose) so you can use Goose interactively for file operations and development workflow management from within VS Code.
|
||||
This tutorial covers how to install and use the [Goose VS Code Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-goose) so you can use Goose within VS Code.
|
||||
|
||||
:::info Prerequisite
|
||||
- [VS Code](https://code.visualstudio.com/) version 1.95.0 or higher is required
|
||||
@@ -0,0 +1,155 @@
|
||||
---
|
||||
title: VS Code Extension
|
||||
description: Use VS Code MCP Server as a Goose Extension for file operations and VS Code integration
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
|
||||
|
||||
<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/gddEgvCLrgU" />
|
||||
|
||||
This tutorial covers how to add the [VS Code MCP Server](https://github.com/block/vscode-mcp) as a Goose extension to enable VS Code integration, file operations, and development workflow management.
|
||||
|
||||
:::tip TLDR
|
||||
|
||||
**Command**
|
||||
```sh
|
||||
npx vscode-mcp-server
|
||||
```
|
||||
|
||||
**Required Setup**
|
||||
|
||||
Install the [VS Code MCP Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-mcp-extension) from the Visual Studio Marketplace.
|
||||
:::
|
||||
|
||||
## Configuration
|
||||
|
||||
:::info
|
||||
Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
|
||||
:::
|
||||
|
||||
1. Add the [VS Code MCP Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-mcp-extension) to your VS Code. No additional settings required in VS Code.
|
||||
|
||||
<Tabs groupId="interface">
|
||||
<TabItem value="cli" label="Goose CLI" default>
|
||||
1. Run the `configure` command:
|
||||
```sh
|
||||
goose configure
|
||||
```
|
||||
|
||||
2. Choose to add a `Command-line Extension`
|
||||
```sh
|
||||
┌ goose-configure
|
||||
│
|
||||
◇ What would you like to configure?
|
||||
│ Add Extension
|
||||
│
|
||||
◆ What type of extension would you like to add?
|
||||
│ ○ Built-in Extension
|
||||
// highlight-start
|
||||
│ ● Command-line Extension (Run a local command or script)
|
||||
// highlight-end
|
||||
│ ○ Remote Extension
|
||||
└
|
||||
```
|
||||
|
||||
3. Give your extension a name
|
||||
```sh
|
||||
┌ goose-configure
|
||||
│
|
||||
◇ What would you like to configure?
|
||||
│ Add Extension
|
||||
│
|
||||
◇ What type of extension would you like to add?
|
||||
│ Command-line Extension
|
||||
│
|
||||
// highlight-start
|
||||
◆ What would you like to call this extension?
|
||||
│ vscode-mcp
|
||||
// highlight-end
|
||||
└
|
||||
```
|
||||
|
||||
4. Enter the command
|
||||
```sh
|
||||
┌ goose-configure
|
||||
│
|
||||
◇ What would you like to configure?
|
||||
│ Add Extension
|
||||
│
|
||||
◇ What type of extension would you like to add?
|
||||
│ Command-line Extension
|
||||
│
|
||||
◇ What would you like to call this extension?
|
||||
│ vscode-mcp
|
||||
│
|
||||
// highlight-start
|
||||
◆ What command should be run?
|
||||
│ npx vscode-mcp-server
|
||||
// highlight-end
|
||||
└
|
||||
```
|
||||
|
||||
5. Enter the timeout value (default 300s is recommended)
|
||||
```sh
|
||||
┌ goose-configure
|
||||
│
|
||||
◇ What would you like to configure?
|
||||
│ Add Extension
|
||||
│
|
||||
◇ What type of extension would you like to add?
|
||||
│ Command-line Extension
|
||||
│
|
||||
◇ What would you like to call this extension?
|
||||
│ vscode-mcp
|
||||
│
|
||||
◇ What command should be run?
|
||||
│ npx vscode-mcp-server install
|
||||
│
|
||||
// highlight-start
|
||||
◆ Please set the timeout for this tool (in secs):
|
||||
│ 300
|
||||
// highlight-end
|
||||
│
|
||||
└
|
||||
```
|
||||
|
||||
6. No additional environment variables are required for basic setup
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="ui" label="Goose Desktop">
|
||||
1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=vscode-mcp-server&id=vscode-mcp&name=VS%20Code%20MCP&description=VS%20Code%20integration%20and%20file%20operations)
|
||||
2. Press `Yes` to confirm the installation
|
||||
3. Click `Save Configuration`
|
||||
4. Click `Exit` from the upper left corner
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
||||
|
||||
## Example Usage
|
||||
|
||||
The VS Code MCP extension enables Goose to interact with your VS Code environment, managing files, projects, and development workflows.
|
||||
|
||||
The key strength of the VS Code MCP Server is its ability to:
|
||||
|
||||
- Show diffs before making changes
|
||||
- Integrate file operations with VS Code's interface
|
||||
- Manage project workspaces
|
||||
- Provide immediate visual feedback in the editor
|
||||
|
||||
|
||||
:::note
|
||||
Every time you start a Goose session with the VS Code MCP server enabled, it checks to see if a matching project is open in VS Code. If not, it will prompt you to open the project before proceeding.
|
||||
:::
|
||||
|
||||
### Goose Prompt
|
||||
|
||||
```
|
||||
Update the contributing guide with instructions on how to start docusaurus dev server
|
||||
```
|
||||
|
||||
## Result
|
||||
|
||||
|
||||
@@ -269,7 +269,7 @@ const config: Config = {
|
||||
},
|
||||
{
|
||||
from: '/docs/tutorials/vscode-mcp',
|
||||
to: '/docs/mcp/vscode-mcp'
|
||||
to: '/docs/mcp/vs-code-mcp'
|
||||
},
|
||||
{
|
||||
from: '/docs/tutorials/youtube-transcript',
|
||||
|
||||
@@ -18,7 +18,8 @@ function ExtensionDetail({ server }: { server: MCPServer }) {
|
||||
const overrides: Record<string, string> = {
|
||||
'computercontroller': 'computer-controller-mcp',
|
||||
'pdf-read': 'pdf-mcp',
|
||||
'knowledge-graph-memory': 'knowledge-graph-mcp'
|
||||
'knowledge-graph-memory': 'knowledge-graph-mcp',
|
||||
'vscode': 'vs-code-mcp',
|
||||
};
|
||||
|
||||
const getDocumentationPath = (serverId: string): string => {
|
||||
|
||||
Reference in New Issue
Block a user