SQL Preview for VS Code
A Visual Studio Code extension for connecting to Presto/Trino databases, running SQL queries, and visualizing results directly within your editor.
Features
- SQL Query Execution: Run SQL queries against Presto/Trino databases directly from VS Code
- Code Lens Integration: Execute queries with a single click from SQL files
- Interactive Results View: View query results in a rich, interactive data grid
- Pagination Support: Handles large result sets efficiently
- Export Capability: Export results to CSV (coming soon)
- Syntax Highlighting: Proper SQL syntax highlighting
- Connection Management: Simple configuration via VS Code settings
- Secure Password Storage: Passwords stored securely using VS Code's encrypted SecretStorage API with convenient Settings UI
Technology Stack
- VS Code Extension API: Core extension framework
- TypeScript: Primary development language
- Trino Client: Node.js client for Presto/Trino database connections
- Axios: HTTP client for handling paginated query results
- AG Grid: Interactive data grid for displaying query results
- ESLint: Code quality and style enforcement
Configuration
Add the following configuration to your VS Code settings.json
:
{
"sqlPreview.host": "your-presto-host.example.com",
"sqlPreview.port": 443,
"sqlPreview.catalog": "hive",
"sqlPreview.schema": "default",
"sqlPreview.user": "your-username",
"sqlPreview.ssl": true, // Enable SSL
"sqlPreview.sslVerify": true, // Verify SSL certificate
"sqlPreview.maxRowsToDisplay": 500 // Limit the number of rows to display
}
Secure Password Management
For security reasons, passwords are never stored as plaintext. You have multiple ways to manage your password securely:
Option 1: Settings UI (Recommended)
- Open VS Code Settings (
Ctrl+,
/ Cmd+,
)
- Search for "SQL Preview"
- Find the "Password" field and click "Set Password" button
- Enter your password in the secure dialog
Option 2: Command Palette
- Set Password: Open Command Palette (
Ctrl+Shift+P
/ Cmd+Shift+P
) and run SQL Preview: Set Database Password
- Clear Password: Run
SQL Preview: Clear Stored Password
to remove the stored password
The password field in settings will show [Password Set]
when a password is stored securely. Passwords are encrypted using VS Code's built-in SecretStorage API and the operating system's credential manager.
Usage
Running a Query
- Open a SQL file or create a new file with the
.sql
extension
- Write your SQL query
- Click the "Run Query" Code Lens above your query, or:
- Open the Command Palette (
Ctrl+Shift+P
or Cmd+Shift+P
on macOS)
- Select "SQL Preview: Run Query Under Cursor"
Managing Database Password
For secure authentication, you can set your password in two convenient ways:
Via Settings (Easiest)
- Open Settings → Search "SQL Preview" → Click "Set Password" button next to the Password field
- The field will show
[Password Set]
when configured
Via Command Palette
- Set Password:
SQL Preview: Set Database Password
- Enter your password in a secure input field
- Clear Password:
SQL Preview: Clear Stored Password
- Remove the stored password
The password is stored securely using OS-level encryption and never appears in your settings files.
Viewing Results
Results will appear in the "SQL Preview" panel in the Activity Bar. The results view provides:
- Sortable columns (click column headers)
- Filterable columns (using floating filters below column headers)
- Resizable columns (drag column borders)
- Copy functionality (right-click on cells)
Project Structure
sql-preview/
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── resultsViewProvider.ts # Results view implementation
│ └── PrestoCodeLensProvider.ts # Code lens integration
├── webviews/
│ └── results/ # Results view UI components
│ ├── resultsView.js # Client-side webview logic
│ └── resultsView.css # Styling for results view
└── package.json # Extension manifest
Development
Prerequisites
- Node.js (v14+)
- npm or yarn
- VS Code
Setup
- Clone the repository
- Run
npm install
to install dependencies
- Open the project in VS Code
- Press F5 to start debugging