sw-yx / amplify-vscode-snippets

This is an unofficial snippets extension for AWS Amplify users. Speed up your development by scaffolding out commonly used code snippets for Amplify CSS, UI Components, API/DataStore calls, and GraphQL Transform directives.

⚠️ this is unofficial and not formally maintained by the Amplify team! It is a personal project of some employees.

On the plus side, it's very simple. pls feel free to fork and customize your own, or propose additions! I may not accept them based on personal preference.

See Gif Demo

Install

You can add this by searching Amplify Snippets in your VS Code Extensions.

Direct link here: https://marketplace.visualstudio.com/items?itemName=sw-yx.amplify-vscode-snippets

Snippets Included

General TypeScript/JavaScript

Snippets for Angular and Vue are planned.

Prefix	Method
import amplify→	import Amplify from 'aws-amplify';import awsconfig from './aws-exports';Amplify.configure(awsconfig);
Authenticator→	import { withAuthenticator,AmplifySignOut } from \"@aws-amplify/ui-react\"
DataStore import→	import { DataStore } from '@aws-amplify/datastore' etc
DataStore Read/Create/Update/Delete→	relevant sample code

CSS

Prefix	Method
Amplify :root→	--amplify-primary-color/tint/shade

GraphQL

Prefix	Method
@auth public read→	@auth(rules: [{ allow: owner, queries: null }])
@auth everything private→	@auth(rules: [{ allow: owner }])
basic @model with no auth→	type Todo @model { /* etc */ }

Known Issues

this is not an official extension! it is just a helper for swyx

Publishing

• vsce publish minor
• https://code.visualstudio.com/api/working-with-extensions/publishing-extension