MERN Snippets for VS Code

Other languages

• Español

If you can't access the content of the translation, please visit the official documentation.

Introduction

Hi! I'm Adan-Perez, the creator of this Visual Studio Code extension called MERN 4 VSCode. This is my first extension and I am very excited to share it publicly. Please feel free to provide any comments or suggestions to improve it.

Description

MERN Snippets is a Visual Studio Code extension that provides code snippets to help you develop MERN (MongoDB, Express, React, Node.js) applications more quickly and efficiently. It includes snippets for React components with Tailwind CSS, Express server, Mongoose connection, and schemas. More information at MERN Snippets for VS Code.

Installation

1. Open VS Code.
2. Go to the extensions view by pressing Ctrl+Shift+X.
3. Search for "MERN Snippets 4 VSCode".
4. Click "Install".
5. Reload Visual Studio Code if necessary.

Alternatively, you can install it from the Visual Studio Code Marketplace.

Usage

Type the snippet prefix and press Tab or Enter to insert the code. Below are some examples of available snippets:

React with Tailwind CSS

• rfct-a - React Function Component with Axios data fetching and TailwindCSS.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    try {
      const { data } = await axios.get(
        'https://api.thecatapi.com/v1/images/search?limit=10'
      );
      console.log(data);
      setData(data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (loading) return <div className='text-center p-4'>Loading...</div>;
  if (error)
    return (
      <div className='text-center text-red-500 p-4'>Error: {error.message}</div>
    );

  return (
    <pre className='bg-zinc-900 p-4 rounded text-white'>
      <code>{JSON.stringify(data, null, 2)}</code>
    </pre>
  );
};

export default MyComponent;

Important

This project is under development, so you may encounter errors or issues. If so, please report the problem so it can be fixed.

If you notice that there are changes between one version and another, check the CHANGELOG file for more information.

"Whatever you lose, you'll find it again. But what you throw away you'll never get back." - Kenshin Himura