Settings

gistfile1.md

  "workbench.colorCustomizations": {
    "editor.selectionHighlightBackground": "#ff0000", //same content as the selection
    "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
    "editor.findMatchHighlightBackground": "#ff7b00a1", //Other SEARCH MATCHES
    "tab.activeBackground": "#2416e2"
  }

Typescript snippets

{
  // Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. 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": {
    "prefix": "!con",
    "body": ["console.log($1)", "$2"],
    "description": "Log output to console"
  },
  "Try Catch!": {
    "prefix": "!try",
    "body": ["try{$1} catch(e){}", "$2"],
    "description": "Log output to console"
  },
  "This": {
    "prefix": "<",
    "body": ["<%= $1 %>", "$2"],
    "description": "ejs"
  },
  "ReactDOM": {
    "prefix": "!r",
    "body": ["ReactDOM.render($1, document.getElementById('$2'))"],
    "description": "render"
  },
  "useEffect": {
    "prefix": "!effect",
    "body": ["  useEffect(() => {$1}, [])"],
    "description": "create useEffect Hook"
  },
  "forLoop": {
    "prefix": "!for",
    "body": ["for (let i = 0; i < ${1:here}; i++) {$2}"],
    "description": "create useEffect Hook"
  },
  "angularLoop": {
    "prefix": "!ngFor",
    "body": ["*ngFor='let $1 of $2'"],
    "description": "Loop an array in Angular"
  },
  "Init": {
    "prefix": "!strict",
    "body": ["strictPropertyInitialization"],
    "description": "initialize variables without value"
  },
  "Arrow funct": {
    "prefix": "!arrow",
    "body": ["const ${TM_SELECTED_TEXT:${1:functName}} = ($2) => {$3}"],
    "description": "Arrow Funct Quick"
  },
  "Function": {
    "prefix": "!function",
    "body": ["function ${TM_SELECTED_TEXT:${1:functName}}($2){$3}"],
    "description": "quick function"
  },
  "!>": {
    "prefix": "!a",
    "body": "=> {return ${TM_SELECTED_TEXT:}}",
    "description": "arrow finisher"
  }
}

Typescript React snippets

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. 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": {
    "prefix": "!con",
    "body": ["console.log($1);", "$2"],
    "description": "Log output to console"
  },
  "Arrow funct": {
    "prefix": "!arrow",
    "body": ["const ${TM_SELECTED_TEXT:${1:functName}} = ($2) => {$3}"],
    "description": "Arrow Funct Quick"
  },
  "Try Catch!": {
    "prefix": "!try",
    "body": ["try{$1} catch(e){}", "$2"],
    "description": "Log output to console"
  },
  "mesh": {
    "prefix": "!mesh",
    "body": ["<mesh><boxGeometry /><meshBasicMaterial /></mesh>"],
    "description": "Log output to console"
  },
  "Function": {
    "prefix": "!function",
    "body": ["function ${TM_SELECTED_TEXT:${1:functName}}($2){$3}"],
    "description": "quick function"
  },
  "useEffect": {
    "prefix": "!effect",
    "body": ["  useEffect(() => {$1}, [])"],
    "description": "create useEffect Hook"
  },
  "Typescript React Component": {
    "prefix": "rfce",
    "body": [
      "import { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {}",
      "",
      "const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({}) => {",
      "  return <div>${TM_FILENAME_BASE}</div>",
      "}",
      "",
      "export default ${TM_FILENAME_BASE}"
    ],
    "description": "React Functional Component"
  },
  "Typescript dashed React Component": {
    "prefix": "gc",
    "body": [
      "import { FC } from 'react';",
      "",
      "interface ${TM_FILENAME_BASE/([A-Za-z]+)-([A-Za-z]+)/${1:/capitalize}${2:/capitalize}/}Props {}"
      "",
      "const ${TM_FILENAME_BASE/([A-Za-z]+)-([A-Za-z]+)/${1:/capitalize}${2:/capitalize}/}: FC<${TM_FILENAME_BASE/([A-Za-z]+)-([A-Za-z]+)/${1:/capitalize}${2:/capitalize}/}Props> = ({}) => {",
      "  return <div>${TM_FILENAME_BASE/([A-Za-z]+)(-[A-Za-z])?/${1:/upcase}${2:/upcase}/}</div>;",
      "};",
      "",
      "export default ${TM_FILENAME_BASE/([A-Za-z]+)-([A-Za-z]+)/${1:/capitalize}${2:/capitalize}/};"
    ],
    "description": "React Functional Component"
  }
}