https://github.com/nickytonline/vscode-gatsby-snippets
Visual Studio Code code snippets for use with the GatsbyJS static site generator for React.
https://github.com/nickytonline/vscode-gatsby-snippets
Last synced: 10 months ago
JSON representation
Visual Studio Code code snippets for use with the GatsbyJS static site generator for React.
- Host: GitHub
- URL: https://github.com/nickytonline/vscode-gatsby-snippets
- Owner: nickytonline
- License: mit
- Created: 2017-12-20T02:59:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-01T18:41:12.000Z (over 7 years ago)
- Last Synced: 2025-04-02T00:31:26.565Z (about 1 year ago)
- Homepage: https://marketplace.visualstudio.com/items?itemName=nickytonline.vscode-gatsby-snippets
- Size: 622 KB
- Stars: 12
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Gatsby Snippets
Snippets for GatsbyJS.
## 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
- [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
- [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
## Gatsby Graphql snippets shortcuts
These snippets require embedded graphql syntax support. You can enable support by installing [gatsby-extension-pack](https://marketplace.visualstudio.com/items?itemName=nickytonline.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!**