How To Use The MongoDB Visual Studio Code Plugin
Rate this tutorial
- Create MongoDB Playgrounds, the fastest way to prototype CRUD operations and MongoDB commands;
- Quickly access the MongoDB Shell, to launch the MongoDB Shell from the command palette and quickly connect to the active cluster.
First things first, we will need to set up a account. And don't worry, you can create an M0 MongoDB Atlas cluster for free. No credit card is required to get started! To get up and running with a free M0 cluster, follow the , or follow the steps below. First you will need to start at the , and fill in your account information.
Once you log in, Atlas prompts you to build your first cluster. You need to click "Build a Cluster." You will then select the Starter Cluster. Starter clusters include the M0, M2, and M5 cluster tiers. These low-cost clusters are suitable for users who are learning MongoDB or developing small proof-of-concept applications.
Once you deploy your cluster, it can take up to 10 minutes for your cluster to provision and become ready to use.
before you can connect to your cluster. To add your IP address to the IP access list. This is important, as it ensures that only you can access the cluster in the cloud from your IP address. You also have the option of allowing access from anywhere, though this means that anyone can have network access to your cluster. This is a potential security risk if your password and other credentials leak. From your Clusters view, click the Connect button for your cluster.
Click Add Your Current IP Address.
In the Create a MongoDB User step of the dialog, enter a Username and a Password for your database user. You'll use this username and password combination to access data on your cluster.
MongoDB for Visual Studio Code can connect to MongoDB standalone instances or clusters on MongoDB Atlas or self-hosted. Once connected, you can browse databases, collections, and read-only views directly from the tree view.
For each collection, you will see a list of sample documents and a quick overview of the schema. This is very useful as a reference while writing queries and aggregations.
Once installed there will be a new MongoDB tab that we can use to add our connections by clicking "Add Connection". If you've used before, then the form should be familiar. You can enter your connection details in the form, or use a connection string. I went with the latter as my database is hosted on MongoDB Atlas.
To obtain your connection string, navigate to your "Clusters" page and select "Connect".
Choose the "Connect using MongoDB Compass" option and copy the connection string. Make sure to add your username and password in their respective places before entering the string in Visual Studio Code.
Then paste this string into Visual Studio Code.
Once you've connected successfully, you should see an alert. At this point, you can explore the data in your cluster, as well as your schemas.
Once you connect to your deployment using MongoDB for Visual Studio Code, use the left navigation to:
- Explore your databases, collections, read-only views, and documents.
- Create new databases and collections.
- Drop databases and collections.
When you expand an active connection, MongoDB for Visual Studio Code shows the databases in that deployment. Click a database to view the collections it contains.
When you expand a collection, MongoDB for Visual Studio Code displays that collection's document count next to the Documents label in the navigation panel.
When you expand a collection's documents, MongoDB for Visual Studio Code lists the
_idof each document in the collection. Click an
_idvalue to open that document in Visual Studio Code and view its contents.
Alternatively, right-click a collection and click View Documents to view all the collection's documents in an array.
Your collection's schema defines the fields and data types within the collection. Due to MongoDB's flexible schema model, different documents in a collection may contain different fields, and data types may vary within a field. MongoDB can enforce to ensure your collection documents have the same shape.
When you expand a collection's schema, MongoDB for Visual Studio Code lists the fields which appear in that collection's documents. If a field exists in all documents and its type is consistent throughout the collection, MongoDB for Visual Studio Code displays an icon indicating that field's data type.
When you create a new database, you must populate it with an initial collection. To create a new database:
- Hover over the connection for the deployment where you want your database to exist.
- Click the Plus icon that appears.
- In the prompt, enter a name for your new database.
- Press the enter key.
- Enter a name for the first collection in your new database.
- Press the enter key.
To create a new collection:
- Hover over the database where you want your collection to exist.
- Click the Plus icon that appears.
- In the prompt, enter a name for your new collection.
- Press the enter key to confirm your new collection.
- Prototype your queries, aggregations, and MongoDB commands with MongoDB syntax highlighting and intelligent autocomplete for MongoDB shell API, MongoDB operators, and for database, collection, and field names.
- Run your playgrounds and see the results instantly. Click the play button in the tab bar to see the output.
- Save your playgrounds in your workspace and use them to document how your application interacts with MongoDB
- Build aggregations quickly with helpful and well-commented stage snippets
To open a playground and begin interacting with your data, open Visual Studio Code and press one of the following key combinations:
- Control + Shift + P on Windows or Linux.
- Command + Shift + P on macOS.
The Command Palette provides quick access to commands and keyboard shortcuts.
Use the Command Palette search bar to search for commands. All commands related to MongoDB for Visual Studio Code are prefaced with MongoDB:.
When you run the MongoDB: Create MongoDB Playground command, MongoDB for Visual Studio Code opens a playground pre-configured with a few commands.
To run a playground, click the Play Button in Visual Studio Code's top navigation bar.
Let's run through the default MongoDB Playground template that's created when you initialize a new Playground. In the default template, it executes the following:
use('mongodbVSCodePlaygroundDB')switches to the
When you press the Play Button, this operation outputs the following document to the Output view in Visual Studio Code:
Common uses for aggregation include:
- Grouping data by a given expression.
- Calculating results based on multiple fields and storing those results in a new field.
- Filtering data to return a subset that matches a given criteria.
- Sorting data.
When you run an aggregation, MongoDB for Visual Studio Code conveniently outputs the results directly within Visual Studio Code.
This pipeline performs an aggregation in two stages:
When you press the Play Button, this operation outputs the following documents to the Output view in Visual Studio Code:
There you have it! MongoDB for Visual Studio Code Extension allows you to connect to your MongoDB instance and enables you to interact in a way that fits into your native workflow and development tools. You can navigate and browse your MongoDB databases and collections, and prototype queries and aggregations for use in your applications.
If you are a Visual Studio Code user, getting started with MongoDB for Visual Studio Code is easy:
- Connect to it and start building a playground.
Check out the following resources for more information: