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
- One-click row deletion
- One-click set column value to null
- Easy column value editing
- SQL query explanation using MySQL Visual Explain
- Intelligent factory class generation for Laravel Eloquent models
Requirements
- 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:
- Laravel with local default SQLite database
- Laravel MySQL/MariaDB with default .env config
- Containerized Laravel MySQL (Laravel Sail) with default .env/docker-compose.yml config (including dev containers support)
- Laravel PostgreSQL with default .env config
- 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"
}
]
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:
- Open a Laravel PHP file containing SQL query (Eloquent or
DB
facade)
- Select the SQL query to analyze
- Click the
Explain query
Code Lens or select Explain query
from the context menu
- 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:
- Eliminating the need to configure database connections separately in both application code and then in a DB client
- Reducing context switching between IDE and DB client windows by providing database visibility directly within VS Code
- Offering a streamlined, development-focused interface without overwhelming features
- Providing a beautiful, intuitive UI that enhances the development experience
- 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.
- Fork this repository and clone your fork locally
- Run
bun install
to install dependencies
- Make your contributions to the codebase
- Press
F5
to launch the debugger and test changes locally
- Run test suites with
bun run test-services
and ensure all tests pass
- Push changes to your fork
- Open a PR to this repository
- Take your flowers! 💐💐🎊🎊🎊