Last active
June 16, 2023 02:22
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
// 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" | |
} | |
} |
- In vscode, open your command palette
- Choose "Preferences: Configure User Snippets"
- Select the language for which the snippets should appear, or the New Global Snippets file option if they should appear for all languages
- Paste into json the snippets from above
- 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How do i use those?