DEV Community

Cover image for New MongoDB Extension for VS Code
Aaron Bassett
Aaron Bassett

Posted on

New MongoDB Extension for VS Code

Whenever I'm coding, I find myself toggling between two applications; VS Code, and the MongoDB GUI—Compass—because at some point, I'll inevitably forget the name of a field in my database and need to check my schema, or I might want to quickly see the results of a query.

In the past, I'd hop over to Compass when I needed this information. But with the MongoDB VS Code extension, I can work with MongoDB from within VS Code.

I've spent the last day playing with the extension, and I am smitten ❤️


Download MongoDB for VS Code from the Marketplace

You can install the extension from within VS Code by searching for "MongoDB for VS Code" or from the Visual Studio Marketplace page.

Once the extension is installed, there will be a cute little leaf icon in the VS Code Activity Bar. This new editor view is the primary way of interacting with the MongoDB extension, although all of the commands are available via the command palette too.

MongoDB commands

Connecting to a Cluster

You can connect to your own instance of MongoDB or an Atlas cluster. For the examples, I've created a free Atlas cluster and loaded the sample dataset to play with. If you would like to try it with a dataset which exceeds the free tier limits, you can use the coupon AARON200 for $200 in Atlas credits.

Atlas Cluster

To create a new connection, click the MongoDB icon in the activity bar and then the plus icon next to "Connections".

You can choose to complete the connection form or use a connection string. If you're connecting to an Atlas cluster, you can find these details in the Atlas cluster Overview > Connect modal.

Atlas connection details modal

The connection string is the same as the one you would use for Compass, just remember to replace <password> with your user's password. If you are using the connection form with Atlas, remember to toggle the SRV Record switch on.

MongoDB Atlas connection settings

Taking a Quick Peek at your Data

Once you've connected, you can start exploring your databases, collections, schemas, and documents.

Exploring MongoDB cluster in VS Code

Having a sample document open in a split pane next to my code is already proving to be incredibly useful, and means I don’t have to toggle back-and-forth between VS Code and Compass to remember field names.

Code and Schema split pane view

MongoDB Playground

But it is the playgrounds which really blew me away. Playgrounds are a JavaScript environment where you can write MongoDB commands and see the results instantly! 😍

Finding documents within VS Code

You can perform all the same MongoDB operations in a Playground as you can in the mongo shell, but now with syntax highlighting, intelligent autocomplete, and well-documented code-snippets.

Use a Playground to define your document schema, add some sample data, demonstrate common queries and aggregations, then save the Playground file to your project repository and share it with your teammates!

I'm really excited by the prospect of using Playgrounds as a learning aid too. Add them to a blog post, tutorial, workshop, stream; turn Playgrounds into interactive code examples that users can run, modify and play with, all from within their own editor.

The Aggregations builder in Compass is impressive. But every so often for more complex aggregations I would use a Jupyter Notebook so I could code the aggregation myself, now I can do that in a Playground instead. Having instant feedback and results would have made writing this aggregation for a MERN tutorial I'm working on much easier…

Writing an aggregation pipeline in VS Code

You can disable the Playground template and the confirmation alert in the extension settings.

MongoDB for VS Code Settings


And MongoDB for VS Code is open-source under the Apache 2 license! You can find the code on GitHub. This is a preview release if you find any bugs, please do raise an issue or a PR.

Discussion (0)