Gatsby Snippets for VS Code

⚠️ Disclaimer ⚠️

This is not the official Visual Studio Code extension. This is a community-created extension that has collection of useful code snippets for Gatsby development in Visual Studio Code.

Features

This extension provides snippets for common Gatsby patterns and components:

Basic Components

• gpage - Create a new Gatsby page component with GraphQL query
• gstatic - Create a Gatsby static query using useStaticQuery hook
• glink - Create a Gatsby Link component
• gimg - Create a Gatsby Image component
• gseo - Add SEO component to your page
• glayout - Create a basic Gatsby layout component
• gimgq - Create a GraphQL query for Gatsby Image
• ghead - Create a Gatsby Head component for page metadata

TypeScript Support

• gpage-ts - Create a new Gatsby page component with TypeScript and GraphQL query
• gstatic-ts - Create a Gatsby static query with TypeScript
• gimg-ts - Create a Gatsby Image component with TypeScript

Advanced Features

• gsharp - Create a detailed Gatsby Plugin Sharp image query
• gmdx - Create a Gatsby MDX page component
• gfs - Create a Gatsby Source Filesystem query

Plugin Configurations

• gsitemap - Add Gatsby Plugin Sitemap configuration
• gmanifest - Add Gatsby Plugin Manifest configuration
• goffline - Add Gatsby Plugin Offline configuration
• ganalytics - Add Gatsby Plugin Google Analytics configuration
• gfeed - Add Gatsby Plugin Feed configuration for RSS

Usage

1. Install the extension
2. Open a JavaScript/TypeScript file
3. Type the snippet prefix (e.g., gpage) and press Tab or Enter
4. Fill in the placeholders using Tab to navigate between them

Snippets

Basic Components

Gatsby Page Component (gpage)

Creates a new page component with a GraphQL query.

import React from 'react'
import { graphql } from 'gatsby'

const PageName = ({ data }) => {
  return (
    <div>
      <h1>Page Title</h1>
    </div>
  )
}

export const query = graphql`
  query {
    queryName {
      field
    }
  }
`

export default PageName

Gatsby Static Query (gstatic)

Creates a static query using the useStaticQuery hook.

import { useStaticQuery, graphql } from 'gatsby'

const data = useStaticQuery(graphql`
  query {
    queryName {
      field
    }
  }
`)

TypeScript Support

Gatsby Page Component with TypeScript (gpage-ts)

Creates a new page component with TypeScript and GraphQL query.

import React from 'react'
import { graphql, PageProps } from 'gatsby'

type PageNameProps = PageProps<Queries.QueryNameQuery>

const PageName: React.FC<PageNameProps> = ({ data }) => {
  return (
    <div>
      <h1>Page Title</h1>
    </div>
  )
}

export const query = graphql`
  query QueryName {
    queryName {
      field
    }
  }
`

export default PageName

Advanced Features

Gatsby MDX Page (gmdx)

Creates an MDX page component with custom components.

import React from 'react'
import { graphql } from 'gatsby'
import { MDXProvider } from '@mdx-js/react'
import { MDXRenderer } from 'gatsby-plugin-mdx'

const PageName = ({ data }) => {
  return (
    <MDXProvider components={{
      h1: props => <h1 className="text-3xl font-bold" {...props} />,
      p: props => <p className="my-4" {...props} />,
    }}>
      <div className="prose">
        <MDXRenderer>{data.mdx.body}</MDXRenderer>
      </div>
    </MDXProvider>
  )
}

Plugin Configurations

Gatsby Plugin Manifest (gmanifest)

Adds PWA manifest configuration.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'App Name',
        short_name: 'Short Name',
        start_url: '/',
        background_color: '#ffffff',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/icon.png',
        icons: [
          {
            src: 'icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'icons/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    },
  ],
}

Requirements

• Visual Studio Code 1.60.0 or higher
• Gatsby project

Extension Settings

This extension contributes the following settings:

• No additional settings required

Known Issues

None at the moment.

Contributing

We welcome your feedback and suggestions to improve these snippets.

License

This project is licensed under the MIT License - see the LICENSE file for details.