Skip to content

Instantly share code, notes, and snippets.

@ben-rogerson
Last active June 16, 2023 02:22
Show Gist options
  • Save ben-rogerson/c6b62508e63b3e3146350f685df2ddc9 to your computer and use it in GitHub Desktop.
Save ben-rogerson/c6b62508e63b3e3146350f685df2ddc9 to your computer and use it in GitHub Desktop.
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

  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

Cheers, updated

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