Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Twin Code Snippits for use in vscode - Shortcuts that make working with Twin a little easier
{
// 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"
}
}
@alanxp
Copy link

alanxp commented May 22, 2021

How do i use those?

@ben-rogerson
Copy link
Author

ben-rogerson commented May 23, 2021

  1. In vscode, open your command palette
  2. Choose "Preferences: Configure User Snippets"
  3. Select the language for which the snippets should appear, or the New Global Snippets file option if they should appear for all languages
  4. Paste into json the snippets from above

@deepfriedmind
Copy link

deepfriedmind commented Oct 19, 2021

  1. 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.

@ben-rogerson
Copy link
Author

ben-rogerson commented Oct 19, 2021

Cheers, updated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment