Skip to content
Visual Studio Code code snippets for use with the GatsbyJS static site generator for React.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode added workspace settings for tab size. Aug 12, 2018
images Updated cheesy icon. Nov 26, 2018
snippets add graphql snippets for image sharp, contentful, and datocms (#7) Nov 25, 2018
.gitignore Updated cheesy icon. Nov 26, 2018
.npmrc Added prettier on precommit. Aug 12, 2018
.prettierignore Added prettier on precommit. Aug 12, 2018
.vscodeignore Initial commit. Dec 20, 2017
CHANGELOG.md Change the name of the extension to Gatsby Snippets. Dec 1, 2018
LICENSE
README.md Change the name of the extension to Gatsby Snippets. Dec 1, 2018
package-lock.json
package.json Change the name of the extension to Gatsby Snippets. Dec 1, 2018

README.md

Gatsby Snippets

Snippets for GatsbyJS.

Gatsby JS snippets in action

Release Notes

1.1.2

  • Changed the name of the package to Gatsby Snippets

1.1.1

  • Updated cheesy logo

1.1.0

Added GatsbyJS graphql image fragment snippets.

1.0.3

Added list of shortcuts.

1.0.2

Added cheesy icon.

1.0.1

Added the GatbsyJS markdown page snippet.

1.0.0

Initial release.


Gatsby Markdown snippets shortcuts

Press Ctrl+Space (Windows, Linux) or Cmd+Space (OSX) to see a list of Markdown snippets

Snippet Output
ga creates a new article
gp creates a new page

Working with Markdown

Here are some useful editor keyboard shortcuts:

  • Split the editor (Cmd+\ on OSX or Ctrl+\ on Windows and Linux)
  • Toggle preview (Shift+CMD+V on OSX or Shift+Ctrl+V on Windows and Linux)

More information

Gatsby Graphql snippets shortcuts

These snippets require embedded graphql syntax support. You can enable support by installing gatsby-extension-pack.

Gatsby Image sharp snippets

Snippet Output
gfi ...GatsbyImageSharpFixed
gfino ...GatsbyImageSharpFixed_noBase64
gfisvg ...GatsbyImageSharpFixed_tracedSVG
gfiwp ...GatsbyImageSharpFixed_withWebp
gfiwpno ...GatsbyImageSharpFixed_withWebp_noBase64
gfiwpsvg ...GatsbyImageSharpFixed_withWebp_tracedSVG
gfl ...GatsbyImageSharpFluid
gflno ...GatsbyImageSharpFluid_noBase64
gflsvg ...GatsbyImageSharpFluid_tracedSVG
gflwp ...GatsbyImageSharpFluid_withWebp
gflwpno ...GatsbyImageSharpFluid_withWebp_noBase64
gflwpsvg ...GatsbyImageSharpFluid_withWebp_tracedSVG

Gatsby Source Contentful snippets

Snippet Output
gscfi ...GatsbyContentfulFixed
gscfino ...GatsbyContentfulFixed_noBase64
gscfisvg ...GatsbyContentfulFixed_tracedSVG
gscfiwp ...GatsbyContentfulFixed_withWebp
gscfiwpno ...GatsbyContentfulFixed_withWebp_noBase64
gscfl ...GatsbyContentfulFluid
gscflno ...GatsbyContentfulFluid_noBase64
gscflsvg ...GatsbyContentfulFluid_tracedSVG
gscflwp ...GatsbyContentfulFluid_withWebp
gscflwpno ...GatsbyContentfulFluid_withWebp_noBase64

Gatsby Source DatoCMS snippets

Snippet Output
gsdfi ...GatsbyDatoCmsFixed
gsdfino ...GatsbyDatoCmsFixed_noBase64
gsdfl ...GatsbyDatoCmsFluid
gsdflno ...GatsbyDatoCmsFluid_noBase64

Enjoy!

You can’t perform that action at this time.