VS Code

Defined here is some best practice and tips for VSCode.

Snippets

Setup snippets to add blocks of code using a shortcut

• Press CMD+SHIFT+p in vs code and type 'snippets: configure user snippets' and add to the file
• Inside files you can then press the defined shortcut to quickly add the snippet
• You can use this generator to easily create snippets

Example Snippets

// Log the output of a variable to the screen 
"React TD": {
        "scope": "javascript,javascriptreact,typescriptreact",
        "prefix": "td",
        "body": [
            "<pre>{JSON.stringify($1, null, 4)}</pre>"
        ],
        "description": "Log output to screen"
    },

// Custom TS hook base
  "TS Use Hook default": {
    "prefix": "tsuh",
    "body": [
      "import React, {useCallback, useMemo} from \"react\";",
      "",
      "// Types",
      "type Props = {",
      "  extraProps?: any;",
      "};",
      "",
      "const $useHook = ({extraProps}: Props) => {",
      "  const getProps = useCallback(() => {",
      "    return {",
      "      ...extraProps",
      "    };",
      "  }, [extraProps]);",
      "",
      "  const values = useMemo(() => ({getProps}), [getProps]);",
      "",
      "  return values;",
      "};",
      "",
      "export default $useHook;"
    ],
    "description": "TS Use Hook default"
  }

Emmet balance outward

Allows quick highlighting of a tag and its children via a shortcut

• Press CMD+SHIFT+p in vs code and type 'emmet balance outward'
• Set up a shorcut for it