vscode-snippets

gistfile1.js

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Wait Function": {
    "prefix": "sleep",
    "body": ["await new Promise((_: any) => setTimeout(_, 2000));"],
    "description": "Create a sleep function"
  },
  "Connect Props": {
    "prefix": "cnc",
    "body": [
      "const mapStateToProps = (state: ReduxStoreState) => ({",
      "",
      "});",
      "",
      "const dispatchProps = {",
      "",
      "};",
      "",
      "type ConnectProps = ReturnType<typeof mapStateToProps> & typeof dispatchProps;",
      "",
      "const withProps = connect(mapStateToProps, dispatchProps);"
    ],
    "description": "Create starter code for connecting props to a component"
  },
  "Try Catch": {
    "prefix": "ty",
    "body": ["try {", "  $1", "} catch (err) {", "  console.log(err);", "}"],
    "description": "Create a try/catch block"
  },
  "Create an <a> Link": {
    "prefix": "link",
    "body": ["<a href=\"\" target=\"__blank\">$1</a>"],
    "description": "Create an <a> link"
  },
  "Add a media query": {
    "prefix": "med",
    "body": ["@media (max-width: 768px) {", "  $1", "}"],
    "description": "Create a media query snippet"
  },
  "Jest Unit Test Describe Block": {
    "prefix": "desc",
    "body": [
      "describe(\"\", () => {",
      "  test(\"\", () => {",
      "    const result = $1",
      "    expect(result).toMatchInlineSnapshot();",
      "  });",
      "});"
    ],
    "description": "Create a unit test describe block for Jest"
  },
  "Jest Unit Test": {
    "prefix": "ts",
    "body": [
      "test(\"\", () => {",
      "  const result = $1",
      "  expect(result).toMatchInlineSnapshot();",
      "});"
    ],
    "description": "Create a unit test for Jest"
  },
  "React Starter File": {
    "prefix": "file",
    "body": [
      "import React from \"react\";",
      "",
      "/** ===========================================================================",
      "* React Component",
      "* ============================================================================",
      "*/",
      "",
      "const Component: React.FC = () => {",
      "  return (",
      "    <div>",
      "      <p>Content...</p>",
      "    </div>",
      "  );",
      "};",
      "",
      "/** ===========================================================================",
      "* Export",
      "* ============================================================================",
      "*/",
      "",
      "export default Component;"
    ],
    "description": "Create a React starter file"
  },
  "Toggle Hook": {
    "prefix": "hook",
    "body": [
      "const [isMenuOpen, setMenuState] = useState(false);",
      "const close = () => setMenuState(false);",
      "const open = () => setMenuState(true);"
    ],
    "description": "Create a React Hook for a toggle behavior"
  },
  "Cypress Data ID": {
    "prefix": "cy",
    "body": ["data-cy=\"$1\""],
    "description": "Create a Cypress data-cy attribute"
  },
  "Styled Components Props": {
    "prefix": "props",
    "body": [
      "color: ${(props: IThemeProps) => {",
      "  return props.theme.dark ? COLORS.TEXT_WHITE : undefined",
      "}};"
    ],
    "description": "Create a props method in a Styled Component"
  },
  "Flex Center": {
    "prefix": "flex",
    "body": [
      "display: flex;",
      "align-items: center;",
      "justify-content: center;"
    ],
    "description": "Add flex centering CSS"
  },
  "Comment Block": {
    "prefix": "com",
    "body": [
      "/** ===========================================================================",
      " * Types & Config$1",
      " * ============================================================================",
      " */"
    ],
    "description": "Create a comment block"
  },
  "i18n Line": {
    "prefix": "i18",
    "body": ["| readonly [\"$1\"]"],
    "description": "Create a i18n line"
  },
  "i18n tFn": {
    "prefix": "tn",
    "body": ["{t(\"$1\")}"],
    "description": "Create a tFn in JSX"
  },
  "Inline Snapshot": {
    "prefix": "inline",
    "body": ["expect(result).toMatchInlineSnapshot();"],
    "description": "Jest toMatchInlineSnapshot snippet"
  },
  "Ignore TypeScript": {
    "prefix": "tsi",
    "body": ["// @ts-ignore"],
    "description": "Add lines to disable tsi errors"
  },
  "Ignore eslint": {
    "prefix": "lint",
    "body": ["// eslint-disable-next-line"],
    "description": "Add lines to disable eslint errors"
  },
  "Print to console": {
    "prefix": "con",
    "body": ["console.log($1);"],
    "description": "Log output to console"
  },
  "Create an import line": {
    "prefix": "pt",
    "body": ["import { $1 } from \"$2\";"],
    "description": "Log output to console"
  },
  "Generate Arrow Function": {
    "prefix": "fn",
    "body": [
      "const $1 = (args$2: any): any$3 => {",
      "  return null;",
      "};",
      ""
    ],
    "description": "Creates an arrow function"
  }
}