PostgreSQL Client

A PostgreSQL-only VS Code extension: explore servers and clusters, write and run SQL with a rich results panel, browse table data, and visualize your schema as an interactive ERD.

Features

Server explorer

• Connections are plain postgresql:// URLs; manage them from the sidebar.
• Every database expands to the full PostgreSQL object tree:
  • Casts, Catalogs, Event Triggers, Extensions, Foreign Data Wrappers, Languages, Publications, Schemas and Subscriptions.
  • Schemas expose their tables, views, enum types and functions; tables open the data browser or the ERD, and enum nodes list their labels.
• Cluster level folders for Databases, Login/Group Roles and Tablespaces.
• Create schemas, inspect database properties, drop databases or disconnect from the context menu.

SQL editor and query runner

• .sql files get PostgreSQL syntax highlighting out of the box (a dedicated source.sql grammar replaces the built-in one), plus a pgsql language for .pgsql, .psql and .pgsql.sql files.
• Smart SQL autocompletion: every PostgreSQL keyword from the parser, built-in functions and data types, plus schemas, tables/views and columns from the connection bound to the document. Aliases (u.), schema. and :: casts are resolved against the catalog.
• Snippets for common PostgreSQL statements (SELECT, INSERT, CREATE TABLE, CTEs, window functions, …).
• Run the whole file or just the selection with Ctrl+Enter (Cmd+Enter on macOS); multi-statement scripts return one result set per statement.
• Results open in the bottom Panel, next to the Terminal/Problems/Output tabs (PostgreSQL panel → Query Results), keeping your editor focused.
• Choose which connection a document runs against from the editor context menu or the status bar.
• A CodeLens on the first line of every SQL document shows the bound connection and database; click either to switch, hold the pointer over it for the target details, and pin a document to another database on the same connection with Select Database for Query. Both bindings survive a window reload.

Results panel (bottom Panel)

• Lives in the bottom panel area, alongside the Terminal, and is revealed automatically when a query runs.
• Row grid with sticky headers, column types, client-side sorting and filtering.
• Copy or save results as CSV/JSON, copy the executed SQL, reopen it in an editor, or rerun it.
• PostgreSQL errors show code, detail, hint and the failing line/column.
• The executed statement is always one tab away, and recent queries are kept in a Query History view (last 100).

ERD diagrams

• Interactive entity relationship diagram with crow's-foot/one markers, schema colours and row estimates.
• Schema picker, database switcher, table filter, hide/collapse tables and saved layout per connection/database.
• Layouts: horizontal, vertical, grid or circular; curved or orthogonal edges; all fields, keys only or table names.
• Double-click a table to open its data; generate SELECT statements or export the schema as DDL (copy, save .sql, or open in the query editor).

Table data browser

• Paginated data grid with column filters, table properties and generated DDL.

Getting started

1. Install the extension and open the PostgreSQL Client view in the activity bar.
2. Run Manage Connections and add a postgresql://user:password@host:5432/database URL.
3. Use New Query (or create a .sql file) and press Ctrl/Cmd+Enter to run it.
4. Right-click a database or schema and choose Open ERD to explore relationships.

Requirements

• VS Code 1.107.0 or higher.
• PostgreSQL 11 or newer (some folders, like subscriptions, need a superuser to be listed).

Settings

Development

Prerequisites

• Node.js and pnpm
• A PostgreSQL server for manual testing

Setup

pnpm install
pnpm --dir web install

Build

# Type-check and bundle the extension host code
pnpm run check-types
node esbuild.js

# Build the webviews and copy them into media/
pnpm --dir web build
rm -rf media && mkdir -p media && cp -r web/dist/* media/

scripts/build.sh performs the webview build and copy in one step. Press F5 in VS Code to launch the extension host.

Webviews

The UI lives in web/ (Svelte 5, Tailwind CSS 4 and @xyflow/svelte) and is built by Vite into web/dist. The extension loads the pages from media/src/pages/<page>/index.html:

• connection – connection manager (PostgreSQL only)
• tables – table data browser
• query – query results view (bottom panel)
• diagram – ERD

Project layout

src/
├── commands/        # explorer, query and diagram commands
├── db/client/       # PostgreSQL client and catalog queries
├── provider/        # tree data provider
├── query/           # session, autocomplete, document, history, results panel
├── tree/nodes/      # explorer nodes (objects, schemas, tables, roles…)
├── types/           # shared types
└── extension.ts     # activation and command registration
syntaxes/            # PostgreSQL TextMate grammar (pgsql + source.sql override)
snippets/            # PostgreSQL snippets
web/                 # Svelte webviews

License

MIT

Author

wilmervasquez