Skip to main content

Getting Started 🚀

What is the MERN Snippets 4 VSCode?​

It's a Visual Studio Code extension that helps you create a MERN stack project with ease. It provides you with a set of commands that you can run in the command palette to generate a new MERN stack project, add a new component, and more. 🚀

Let's be realistic, how many times do we write the same code over and over again every time we create a project?

What is the MERN stack? 🧩​

The MERN stack is a popular stack for building web applications. It consists of four main technologies:

  • MongoDB: A NoSQL database that stores data in a JSON-like format.
  • Express: A web application framework for Node.js that provides a set of features for building web applications.
  • React: A JavaScript library for building user interfaces.
  • Node.js: A JavaScript runtime that allows you to run JavaScript code on the server.

How does it work? 🛠️​

It works by providing you with a set of commands that you can run in the command palette. These commands allow you to generate a new MERN stack project, add a new component, and more.

For example: you can run the MERN: Mongoose Function command to generate a new MongoDB connection with Mongoose in your project. This command will create a new file called db.js or ask you to provide a name for the file, and add the necessary code to connect to your MongoDB database.

Snippet MongoDB Example

What do I need to get started?​

  • Visual Studio Code version 1.89.0 or higher. You can check your Visual Studio Code version by going to Help > About.

Additional Requirements:​

  • Tailwind CSS: If you plan to use the React snippets to generate components with Tailwind CSS, you need to have Tailwind CSS installed and configured in your project. You can find installation instructions in the Tailwind CSS documentation.

  • Node.js: To use the snippets related to Node.js, Express.js, or MongoDB, make sure you have Node.js installed on your system. These snippets can be helpful for generating code related to the server, API, and database interaction. We recommend using the latest LTS version of Node.js. You can download it from the official Node.js website.

Where can I find the snippets?​

"Yeah, I'm interested! Where can I find these snippets/commands?" 🤔

When you install the extension, you can access the commands by opening the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) and typing MERN:. You will see a list of available commands that you can run to generate code snippets for your MERN stack project. Additionally, you can view the complete snippets list by clicking on the extension icon on the left in the extensions bar.

"Happiness is not to be found in knowledge, but in the acquisition of knowledge." - Edgar Allan Poe