DevDb

A lightweight VS Code extension that auto-loads your database and provides affordances from your database to aid development and debugging. Built with 💖 for developers.

Latest Features

1. One-click row deletion
2. One-click set column value to null
3. Easy column value editing
4. SQL query explanation using MySQL Visual Explain
5. Intelligent factory class generation for Laravel Eloquent models

Requirements

• VS Code 1.83 or newer
• A VS Code project using any of the supported databases

OS/Platform Support

• Linux (Linux-x64, Linux-arm64, Linux-arm, Alpine-x64)
• macOS (Darwin-x64, Darwin-arm64 Apple Silicon)
• Windows (Win32-x64)

Quick Start

• In a VS Code project using any of the supported databases, ensure your database is properly configured and accessible from your application code.
• For zero-config environments, DevDb auto-loads your database. View your database by opening the DevDb view as shown in the screenshot or by using the shortcut.

Note

DevDb also provides several Language and Framework Integrations

UI Actions and Key Map

• Cmd + K + D to toggle the view panel
• Cmd + Click table name in the sidebar to open the table in the current tab
• Cmd + Click on a database value to edit it
• Click any value to preview it in the pane (useful for viewing prettified JSON string values)
• The right pane offers options to view the current table schema or selected value
• During edit sessions (activated during data edit/delete), the control box appears as shown in the screenshot
• During edit sessions: Cmd + Z to undo changes, Cmd + Y to redo changes, and Cmd + S to save changes
• Added new "Suggest New Feature" button

One-click Actions

• Click the trash icon on a table row to delete it
• Click the Set null button on a database value to set the value to null

Supported Databases

Currently supported databases:

• SQLite
• MySQL
• MariaDB
• PostgreSQL*
• Microsoft SQL Server

* PostgreSQL support for table column status (primary/optional column indicator) and table creation SQL display is in development

Loading Databases

DevDb can automatically load your database using connection details from your VS Code workspace (zero-config mode). When zero-config support isn't available, a configuration file option is provided.

1. Zero-config (Automatic Database Loading)

No configuration file needed for:

1. Laravel with local default SQLite database
2. Laravel MySQL/MariaDB with default .env config
3. Containerized Laravel MySQL (Laravel Sail) with default .env/docker-compose.yml config (including dev containers support)
4. Laravel PostgreSQL with default .env config
5. Laravel Microsoft SQL Server with default .env config

2. Config-based Database Loading

If zero-config support isn't available for your environment, create a .devdbrc file in your project root with your database connection details.

Warning

Exclude the .devdbrc config file from version control by adding it to .gitignore. This protects sensitive information and allows team members to use different database configurations.

The configuration file should contain a single array of database connection objects. DevDb provides rich editing features for .devdbrc:

• JSON Schema Validation: Automatic configuration validation
• IntelliSense: Autocompletion for all fields, including type
• Snippets: Quick configuration templates:
  • devdb mysql: MySQL configuration
  • devdb mariadb: MariaDB configuration
  • devdb postgres: PostgreSQL configuration
  • devdb sqlite: SQLite configuration
  • devdb mssql: Microsoft SQL Server configuration

Configuration File Example

[
  {
    "name": "My test MySQL database",
    "type": "mysql",
    "host": "127.0.0.1",
    "port": "3306",
    "username": "root",
    "password": "12345",
    "database": "test" // <-- the database to show in VS Code DevDb view
  },
  {
    "type": "sqlite",
    "path": "/path/to/database.sqlite"
  }
]

Tools and Framework Integrations

Context Menu Entry

Open any database table in DevDb by right-clicking its name/model/entity from the editor in any framework/programming language. Example from a Node.js app (Sequelize model definition):

Laravel

Eloquent Model Code Lens

DevDb provides Code Lens features for:

• Viewing the underlying table for the Eloquent model
• Generating a factory for the model (automatically pre-filled with real data from the underlying table)

Note

Factory Generation is also available via the context menu

Query Explainer

The Query Explainer integrates with MySQL Visual Explain to optimize SQL queries by analyzing MySQL's query execution plan. Usage:

1. Open a Laravel PHP file containing SQL query (Eloquent or DB facade)
2. Select the SQL query to analyze
3. Click the Explain query Code Lens or select Explain query from the context menu
4. View the explanation in your browser or copy the URL

Why DevDb?

Two words: Better DX.

DevDb aims to be a DB GUI client specifically designed for improved development experience when working with databases by addressing common pain points:

1. Eliminating the need to configure database connections separately in both application code and then in a DB client
2. Reducing context switching between IDE and DB client windows by providing database visibility directly within VS Code
3. Offering a streamlined, development-focused interface without overwhelming features
4. Providing a beautiful, intuitive UI that enhances the development experience
5. Provide affordances for easily performing common database tasks, as well as for improving DX during development and debugging.

Note

VS Code multi-root workspaces support is in development. Track progress here.

Contribution

Important

Contributions are currently limited to the extension core code. UI code is not available for public contribution.

1. Fork this repository and clone your fork locally
2. Run bun install to install dependencies
3. Make your contributions to the codebase
4. Press F5 to launch the debugger and test changes locally
5. Run test suites with bun run test-services and ensure all tests pass
6. Push changes to your fork
7. Open a PR to this repository
8. Take your flowers! 💐💐🎊🎊🎊