Skip to content

Commit

Permalink
VS Code snippet for component styles. (#6259)
Browse files Browse the repository at this point in the history
* VS Code snippet for component styles.

* Adds link to VS Code docs.
  • Loading branch information
daveyholler authored Sep 23, 2022
1 parent 53646a3 commit ea38de6
Showing 1 changed file with 39 additions and 0 deletions.
39 changes: 39 additions & 0 deletions wiki/writing-styles-with-emotion.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,45 @@ export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => {
};
```

---
<details>
<summary>🎉 <b>ProTip:</b> VS Code snippet</summary>
To make generating component boilerplate just a little bit easier, you can add the following block to a global or local snippet file in VS Code. Once saved, you'll be able to generate the boilerplate by typing `euisc` `tab`. <a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets" target="_blank">Learn how to add snippets in VS Code</a>:

```json
"euiStyledComponent": {
"prefix": "euisc",
"body": [
"/*",
"* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one",
"* or more contributor license agreements. Licensed under the Elastic License",
"* 2.0 and the Server Side Public License, v 1; you may not use this file except",
"* in compliance with, at your election, the Elastic License 2.0 or the Server",
"* Side Public License, v 1.",
"*/",
"",
"import { css } from '@emotion/react';",
"import {",
" euiFontSize,",
" logicalCSS,",
"} from '../../global_styling';",
"import { UseEuiTheme } from '../../services';",
"",
"export const ${1:componentName}Styles = ({ euiTheme }: UseEuiTheme) => {",
" return {",
" ${1:componentName}: css`",
" ${2:property}: tomato;",
" `",
" };",
"};"
],
"description": "EUI styled component"
}
```
</details>

---

```tsx
/* {component name}.tsx */
import { useEuiTheme } from '../../services';
Expand Down

0 comments on commit ea38de6

Please sign in to comment.