https://github.com/mskelton/vscode-react-emotion-snippets

Useful VS Code snippets for creating React Emotion styles.
https://github.com/mskelton/vscode-react-emotion-snippets

emotion react vscode-snippets

Last synced: 1 day ago
JSON representation

Useful VS Code snippets for creating React Emotion styles.

• Host: GitHub
• URL: https://github.com/mskelton/vscode-react-emotion-snippets
• Owner: mskelton
• License: isc
• Created: 2019-11-09T03:44:51.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2022-06-04T12:47:54.000Z (over 2 years ago)
• Last Synced: 2024-05-01T16:26:29.774Z (5 months ago)
• Topics: emotion, react, vscode-snippets
• Homepage:
• Size: 7.3 MB
• Stars: 2
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# VS Code React Emotion Snippets

![Build status](https://github.com/mskelton/vscode-react-emotion-snippets/workflows/Release/badge.svg?branch=main)

[![Extension version](https://img.shields.io/vscode-marketplace/v/mskelton.react-emotion-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=mskelton.react-emotion-snippets)

[![Extension installs](https://img.shields.io/vscode-marketplace/i/mskelton.react-emotion-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=mskelton.react-emotion-snippets)

[![All Contributors](https://img.shields.io/github/all-contributors/mskelton/vscode-react-emotion-snippets?color=orange)](#contributors-)

[![Semantic release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

> [React Emotion](https://emotion.sh) snippets for VS Code.

![Demo](static/demo.gif)

## Snippets

The following snippets are provided by this package. If you have ideas of other snippets that would be helpful, please [open an issue](https://github.com/mskelton/vscode-react-emotion-snippets/issues/new).

### Imports

| Prefix | Method                                     | Prefix meaning          |

| ------ | ------------------------------------------ | ----------------------- |

| `ies→` | `import styled from '@emotion/core'`       | _Import Emotion styled_ |

| `iec→` | `import { css, jsx } from '@emotion/core'` | _Import Emotion css_    |

| `iej→` | `import { jsx } from '@emotion/core'`      | _Import Emotion jsx_    |

### Other snippets

#### `ces→`

_Create Emotion style_

```js

const style = css`

`

```

#### `cec→`

_Create Emotion component_

```js

/** @jsx jsx **/

import { jsx } from '@emotion/core'

function Component(props) {

}

```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Mark Skelton
💻 🤔 📖

    
Sungdong Jo
📖 💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!