{providers.map(provider => {
const name = provider.id.replace('docs/cloud-providers/supported-providers/', '');
const logoUrl = logos[`./logo-${name}.svg`];
const label = provider.data.sidebar?.label || provider.data.navTitle || provider.data.title;
return (
#### How to Connect
To connect to any of these providers, follow these general steps:
1. **Open the DBCode Extension**: Launch Visual Studio Code and open the DBCode extension.
2. **Add a New Connection**: Click on the "Add Connection" icon.
3. **Select Your Provider**: Choose the desired cloud provider from the list on the right.
4. **Authenticate**: Follow the authentication process specific to the provider.
5. **Start Managing Your Databases**: Once connected, you can start managing your databases directly from Visual Studio Code.
For detailed instructions on connecting to each provider, refer to the [connect a cloud provider](/docs/cloud-providers/connect) article.
By supporting these leading cloud providers, DBCode ensures you have the flexibility and power to manage your databases efficiently and effectively within your development environment.
---
### Neon
## Requirements
To set up Neon with DBCode, you will need to use an API key.
You can obtain your API key by following the instructions provided on the Neon API key setup page in the dashboard.
## Connecting
Once you have your API key, follow the [connect a cloud provider](/docs/cloud-providers/connect) article.
For more information about Neon, check out their website.
---
### Supabase
## Requirements
To set up Supabase with DBCode, you will need an access token.
You can obtain an access token by following the instructions provided on the Access Tokens page in the dashboard.
## Connecting
Once you have your access token, follow the steps in the [connect a cloud provider](/docs/cloud-providers/connect) article.
DBCode connects through the Supabase connection pooler using temporary credentials from the Supabase Management API. No permanent database users are created.
For more information about Supabase, check out their website.
---
### Turso
## Requirements
To set up Turso with DBCode, you will need to use an API token.
You can obtain your API token by following the instructions provided on the API Token page in the dashboard.
## Connecting
Once you have your API key, follow the [connect a cloud provider](/docs/cloud-providers/connect) article.
For more information about Turso, check out their website.
---
## Docs > Connections
### index
---
title: Connections
description: Connect with our documentation on connections, including automatic ssl, zero-config setup, and SSH tunnels.
sidebar:
hidden: true
order: 2
---
---
## Docs > Connections > Auto Ssl
### Automatic SSL for known hosts
When connecting to a host that matches our known hosts list below, the connection will automatically be configured to utilize SSL, enhancing security by encrypting data in transit.
This includes automatically downloading any required public certificates, which verify the server's identity and ensures a trusted communication channel.
SSL protects sensitive data from interception and tampering, providing peace of mind and a safer environment for your database operations.
## Known Hosts
- AWS RDS
- Azure SQL
- CockroachDB Cloud
- Neon
- Supabase
- Timescale
- YugabyteDB
---
## Docs > Connections > Color
### Color-code connections
Assigning custom colors to your connections in DBCode helps you visually separate environments like development, staging, and production.
## Adding a Color to a Connection
1. **Open DBCode in Visual Studio Code:**
- Select the DBCode icon in the Activity Bar.
2. **Select the Connection:**
- In the DBCode Explorer, locate the connection you want to color.
3. **Set a Connection Color:**
- Right-click the connection and choose **Edit Connection** from the context menu.
- In the **Edit Connection** tab, use the color swatch next to **Connection name** to choose a color.
- Select **Save connection** to apply the color.
After saving, the selected color appears in these places by default:
- The connection item in the DBCode Explorer. DBCode colors the connection name and status indicators, like the default marker and connected indicator, while leaving the main database icon unchanged.
- Primary key indicators for tables in that connection.
- Editor tabs associated with the connection.
- SQL file headers associated with the connection.
## Modifying Color Settings in the Extension Settings
You can choose where DBCode applies connection colors in Visual Studio Code:
1. **Open Settings:** Press Cmd+, on macOS or Ctrl+, on Windows and Linux.
2. **Search for DBCode color settings:** Search for `DBCode connection color`.
3. **Configure DBCode color settings:** Adjust the DBCode color settings for editor tabs, the status bar, and the command center.
## Additional Notes
DBCode keeps the selected color for that connection across Visual Studio Code restarts. The extension settings control which VS Code surfaces also use the color.
---
## Docs > Connections > Connect
### Connect to a saved connection
Connect to a saved connection in DBCode with a single click.
## Connecting
1. Click the **DBCode** icon in the Activity Bar to open the DB Explorer
2. Click on a saved connection to connect. You can also right-click and select **Connect** from the context menu
3. If the connection requires authentication (such as a password), a prompt appears. Enter the credentials to complete the connection
Once connected, a dot appears next to the connection name. Expand the connection to browse schemas, tables, views, and other database objects.
## Cancelling a Connection Attempt
While a connection is being established, a **Cancel Connection Attempt** button appears on the connection. Click it to abandon the attempt, for example when the server is unreachable because a VPN is down, and retry immediately once the network is back. Attempts that receive no response also time out on their own after the connection timeout, so a connection never stays stuck connecting.
## Disconnecting
Select a saved connection to reveal the toolbar icons. Click the **Disconnect** button (the first icon) to end the session. You can also right-click the connection and select **Disconnect** from the context menu.
Your saved connection settings are retained for future use. Disconnecting only ends the active session.
---
## Docs > Connections > Copy
### Duplicate a connection
Duplicate an existing connection to reuse its settings, useful when you need a similar connection with minor changes like a different database, user, or role.
## How to Copy
1. Select a saved connection to reveal the toolbar icons. Click the **Copy Connection** button (the clipboard icon) to create a duplicate
2. A **New Connection** tab opens with all settings pre-filled from the original. The name defaults to the original name with "Copy" appended
3. Modify any settings you need (name, server, credentials, database) then click **Save**
The copy appears in the Connections panel alongside the original.
You can also right-click a connection and select **Copy Connection** from the context menu.
## When to Copy
- **Multiple environments** - Copy a production connection and change the host for staging or development
- **Different credentials** - Same server, different user or role
- **Testing variations** - Experiment with connection settings without affecting the original
---
## Docs > Connections > Create
### Create a connection
Set up a new database connection, link a cloud provider, or explore with the sample database included in the DBCode extension.
1. **Open DBCode:**
- Select the DBCode icon in the Activity Bar.
2. **Add a connection:**
- Select **Add Connection** in the Connections view, or select the **+** icon in the Connections header.
3. **Choose a database type:**
- Select a database tile, filter the available databases, or paste a connection string into the search field.
4. **Enter the connection details:**
- **Connection name:** Enter a recognizable name for the connection.
- **Host and port or socket:** Enter the server address and port, or select a socket connection when supported.
- **Authentication method:** Choose the method required by your database.
- **Username and password:** Enter the credentials when the selected authentication method requires them.
- **Password storage:** Choose whether DBCode stores the password in Visual Studio Code Secret Storage.
- **Database:** Select or enter the database to open.
- **SSL and advanced settings:** Configure these options when your server requires them.
The available fields vary by database type.
5. **Test and save the connection:**
- Select **Test** to verify the details, then select **Save connection**.
The saved profile appears under Connections. Select or expand it to connect and explore the database.
## Connecting a Cloud Provider
Connecting a cloud provider allows you to access multiple databases within that provider, without the need for individual configurations. For more detailed instructions, refer to the [Cloud Provider Integration Guide](/docs/cloud-providers).
## Exploring with the Sample Database
To quickly explore DBCode's features, use the built-in sample database:
1. Open the DBCode view in the Activity Bar.
2. Select **Explore With a Sample Database** in the Connections view.
DBCode creates and opens the built-in SQLite sample connection so you can explore its tools without configuring a server.
---
## Docs > Connections > Delete
### Delete a connection
Deleting a connection removes its saved connection details from DBCode. It does not delete any data in the database itself.
1. **Open DBCode in Visual Studio Code:**
- Select the DBCode icon in the Activity Bar.
2. **Locate the Connection to Delete:**
- In the DBCode Explorer, find the connection you want to delete. Disconnect it before proceeding.
3. **Delete the Connection:**
- Right-click the connection and select **Delete Connection** from the context menu.
- If DBCode asks for confirmation, confirm the deletion.
4. **Connection Removed:**
- The connection will be removed from your list, and it will no longer be accessible in DBCode.
- If you need to connect to this database again, recreate the connection. For more information, see the [create connection](../create/) article.
## Important Notes
- **Deleting a Grouped Connection:** If the connection is part of a group, only the specific connection will be deleted, not the entire group.
- **Data Safety:** Deleting a connection in DBCode only removes the saved connection details. It does not delete any data in the database itself.
---
## Docs > Connections > Edit
### Edit connection settings
Update and modify existing database connection settings in DBCode to keep your connections up-to-date and working efficiently.
1. **Open DBCode in Visual Studio Code:**
- Start Visual Studio Code, then select the DBCode icon in the Activity Bar (typically on the left side).
2. **Locate Your Connection:**
- In the DBCode `Connections` pane, find the list of your saved connections.
- Then click on pencil icon besides connection name or right-click on the connection you want to modify, then choose **Edit Connection** from the context menu.
3. **Update Connection Details:**
- A settings panel will open, allowing you to adjust the connection details, common details include:
- **Server Name:** Update the connection name if needed.
- **Type:** Modify the database type (e.g., MySQL, PostgreSQL) if it has changed.
- **Host:** Change the server's host address, such as updating to a new IP or domain.
- **Port:** Update the port number if the server port has changed (e.g., 3306 for MySQL, 5432 for PostgreSQL).
- **Username:** Enter a new username if access credentials have changed.
- **Password:** Update the password for secure access.
- **Database:** Adjust the database name if connecting to a different one within the same server.
4. **Save the Updated Connection:**
- After making the necessary changes, click **Save** to apply the updates to the connection.
DBCode will test the new settings to ensure the connection works correctly. If any details are incorrect, you'll receive an error message to help troubleshoot.
---
## Docs > Connections > Folder Connections
### Folder Connections
Set a connection and database for a folder, and DBCode automatically uses it for any `.sql` file you open inside that folder - so you don't have to pick a connection each time. Subfolders inherit the folder's connection, so new files and folders just work.
This is useful when a single workspace holds SQL for several databases at once, where each folder maps to a different environment, module, or business.
## Setting a Folder's Connection
Right-click any folder in the VS Code file explorer and select **Set Folder Connection with DBCode**, then choose the connection and database for that folder.
Now open a `.sql` file under that folder and DBCode selects that connection for it automatically - you'll see it in the status bar and code lens, with no prompt. The choice is saved to your workspace settings.
## How It Works
A folder connection is the default DBCode uses for `.sql` files inside the folder that don't already have a connection of their own. When you open such a file, DBCode finds the most specific folder connection that matches the file's path and assigns it:
- **Subfolder inheritance** - a connection set on `reports/` applies to every `.sql` file beneath it, including ones in subfolders you create later. There's nothing to update as the folder structure grows.
- **Most specific wins** - if you've set a connection on both `reports/` and `reports/prod/`, files in `reports/prod/` use the `reports/prod/` connection.
- **Your choice always wins** - the folder connection is only a default. If you pick a connection for a specific file yourself (from the status bar or code lens), DBCode remembers that choice for the file and uses it instead.
A folder connection is a default, not a lock. DBCode never silently switches a file: the assigned connection is always shown in the status bar and code lens, so you can see which database a file is set to before you run anything.
## Configuration
Folder connections are stored in the `dbcode.connectionBindings` setting as an array:
```json
"dbcode.connectionBindings": [
{ "path": "reports/sales/**", "connectionId": "...", "database": "sales" },
{ "path": "reports/ops/**", "connectionId": "...", "database": "ops", "schema": "public" }
]
```
| Field | Description |
|-------|-------------|
| `path` | A glob matched against the file's workspace-relative path. Use `
{logoUrl && (
)}
);
})}
-
{databases.map(db => (
- {db.data.sidebar?.label ?? db.data.title} ))}