From 33e614793302a69e5aa1c610016ad3a7d8bfdd28 Mon Sep 17 00:00:00 2001
From: Davey Holler <daveyholler@hey.com>
Date: Wed, 21 Sep 2022 16:50:27 -0700
Subject: [PATCH 1/2] VS Code snippet for component styles.

---
 wiki/writing-styles-with-emotion.md | 36 +++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md
index e7d51b250b9..6a039ce3d47 100644
--- a/wiki/writing-styles-with-emotion.md
+++ b/wiki/writing-styles-with-emotion.md
@@ -19,6 +19,42 @@ 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.
+
+  ```json
+  "euiStyledComponent": {
+    "prefix": "euis",
+    "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';

From e28e639cbd996439f40d47e0fef5ab8fa4f635a8 Mon Sep 17 00:00:00 2001
From: Davey Holler <daveyholler@hey.com>
Date: Thu, 22 Sep 2022 09:03:58 -0700
Subject: [PATCH 2/2] Adds link to VS Code docs.

---
 wiki/writing-styles-with-emotion.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md
index 6a039ce3d47..bb9d6b9ac37 100644
--- a/wiki/writing-styles-with-emotion.md
+++ b/wiki/writing-styles-with-emotion.md
@@ -19,13 +19,14 @@ 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.
+  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": "euis",
+    "prefix": "euisc",
     "body": [
       "/*",
       "* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one",
@@ -55,6 +56,8 @@ export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => {
   ```
 </details>
 
+---
+
 ```tsx
 /* {component name}.tsx */
 import { useEuiTheme } from '../../services';