Twin Code Snippits for use in vscode - Shortcuts that make working with Twin a little easier

twin.code-snippets

{
  // Snippits that make working with Twin a little easier
  // https://github.com/ben-rogerson/twin.macro
  "Add react import": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "react",
    "body": "import React from 'react'",
    "description": "Add react import"
  },
  "Add twin imports": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "twin",
    "body": "import tw, { css, styled, theme } from 'twin.macro'",
    "description": "Add twin imports"
  },
  "Add twin tw imports": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "tw",
    "body": "import tw from 'twin.macro'",
    "description": "Add twin tw imports"
  },
  "Add twin css import": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "css",
    "body": "import { css } from 'twin.macro'",
    "description": "Add twin css import"
  },
  "Add twin styled import": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "styled",
    "body": "import { styled } from 'twin.macro'",
    "description": "Add twin styled import"
  },
  "Add twin theme import": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "theme",
    "body": "import { theme } from 'twin.macro'",
    "description": "Add twin theme import"
  },
  "Emotion jsx pragma": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "pragma",
    "body": "/** @jsx jsx */ import { jsx } from '@emotion/core'",
    "description": "Emotion jsx pragma"
  },
  "Add new component": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "const",
    "body": "const ${1:Component} = (${2:props}) => (${0:<></>})",
    "description": "Add new component"
  },
  "Add css prop": {
    "scope": "javascript,typescript,typescriptreact,jsx-attr",
    "prefix": "css",
    "body": "css={[${0:tw``}]}",
    "description": "Add css prop"
  }
}

3. Select the language for which the snippets should appear

Note that if adding them for a specific language, the scope property should be removed.

Also, "Add css prop" needs to be in the jsx-attr scope.

Cheers, updated