My Visual Studio Code Snippets

asraf2AsifSnippetsGlobal.code-snippets

{
  "ue: useEffect Hook": {
    "prefix": "ue",
    "body": ["useEffect(() => {", "  ${1:code}", "}, []);", ""],
    "description": "ue: useEffect Hook"
  },
  "us: New state variable using useState Hook": {
    "prefix": "us",
    "body": [
      "const [$1, set${1/(^.|.+$)/${1:/upcase}/}] = useState(${2:defaultValue});",
      ""
    ],
    "description": "us: New state variable using useState Hook"
  },
  "ss: setState": {
    "prefix": "ss",
    "body": ["${1:setStatefunct}(${2:value});", ""],
    "description": "ss: setState"
  },
  "ssf: setState (with prevState)": {
    "prefix": "ssf",
    "body": [
      "${1:setStatefunct}(prevState => {",
      "  return prevState ${3|+,-,*,/, |} ${2:code}",
      "});",
      ""
    ],
    "description": "ssf: setState (with prevState)"
  },
  "imp: import module": {
    "prefix": "imp",
    "body": ["import ${2:$1} from '${1:moduleName}';", ""],
    "description": "imp: import module"
  },
  "imd: import destructured module": {
    "prefix": "imd",
    "body": ["import {${2:compName}} from '${1:moduleName}';", ""],
    "description": "imd: import destructured module"
  },
  "ima: import destructured module with alias Name": {
    "prefix": "ima",
    "body": [
      "import {${2:compName} as ${3:aliasName} } from '${1:moduleName}';",
      ""
    ],
    "description": "ima: import destructured module with alias Name"
  },
  "exp: export default module": {
    "prefix": "exp",
    "body": ["export default ${1:moduleName};", ""],
    "description": "exp: export default module"
  },
  "exd: export destructured module": {
    "prefix": "exd",
    "body": ["export {${1:destructuredModule}};", ""],
    "description": "exd: export destructured module"
  },
  "dob: object descruct": {
    "prefix": "dob",
    "body": ["const {${2:props}} = ${1:object};", ""],
    "description": "dob: object descruct"
  },
  "dar: array descruct": {
    "prefix": "dar",
    "body": ["const [${2:props}] = ${1:array};", ""],
    "description": "dar: array descruct"
  },
  "sti: set Interval": {
    "prefix": "sti",
    "body": [
      "setInterval(() => {",
      "  ${2:code}",
      "}, ${1:intervalTime});",
      ""
    ],
    "description": "sti: set Interval"
  },
  "stt: set Interval": {
    "prefix": "stt",
    "body": ["setTimeout(() => {", "  ${2:code}", "}, ${1:delayTime});", ""],
    "description": "stt: set Interval"
  },
  "cmbj: comment block js": {
    "prefix": "cmbj",
    "body": ["", "/*", "  ${1:comment}", "*/", "", ""],
    "description": "cmbj: comment block js"
  },
  "imr: import react": {
    "prefix": "imr",
    "body": ["import React from 'react';", ""],
    "description": "imr: import react"
  },
  "imrse: import React, useState, useEffect": {
    "prefix": "imrse",
    "body": ["import React, { useState, useEffect } from 'react';", ""],
    "description": "imrse: import React, useState, useEffect"
  },
  "imrd: import react dom": {
    "prefix": "imrd",
    "body": ["import ReactDOM from 'react-dom';", ""],
    "description": "imrd: import react dom"
  },
  "imrr: import react router dom": {
    "prefix": "imrr",
    "body": [
      "import { BrowserRouter as Router, Route, Switch, NavLink, Link } from 'react-router-dom';",
      ""
    ],
    "description": "imrr: import react router dom"
  },
  "rrf: create React ref": {
    "prefix": "rrf",
    "body": ["const ${1:refName} = createRef();", ""],
    "description": "rrf: create React ref"
  },
  "clg: console.log": {
    "prefix": "clg",
    "body": [
      "console.${2|log,error,info,table,dir|}(${TM_SELECTED_TEXT:${1:value}});",
      ""
    ],
    "description": "clg: console log"
  },
  "clt: console.time": {
    "prefix": "clt",
    "body": [
      "console.time(${1:time});",
      "${TM_SELECTED_TEXT:${2:code}}",
      "console.timeEnd(${1:time});",
      ""
    ],
    "description": "clg: console time"
  },
  "rdds: redux dispatch and selector": {
    "prefix": "rdds",
    "body": [
      "import { useDispatch, useSelector } from 'react-redux';",
      "",
      "const dispatch = useDispatch();",
      "",
      "const {",
      "  ${1:props}",
      "} = useSelector((state) => state.${1:statePart});",
      ""
    ],
    "description": "rdds: redux dispatch and selector"
  },
  "rrdln: react router dom locacion and navigate": {
    "prefix": "rrdln",
    "body": [
      "import { useNavigate, useLocation } from 'react-router-dom';",
      "",
      "const location = useLocation();",
      "const history = useNavigate();",
      ""
    ],
    "description": "rrdln: react router dom locacion and navigate"
  },
  "fc: Function Component (Arrow function)": {
    "prefix": "fc",
    "body": [
      "function ${1:name} ({}) {",
      "  return ( ",
      "    ${2:code}",
      "  );",
      "};",
      ""
    ],
    "description": "fc: Function Component"
  },
  "fcx: Function Component (Arrow function) & export": {
    "prefix": "fcx",
    "body": [
      "export function ${1:name} ({}) {",
      "  return ( ",
      "    ${2:code}",
      "  );",
      "};",
      ""
    ],
    "description": "fcx: Function Component & export"
  },
  "fca: Function Component (Arrow function)": {
    "prefix": "fca",
    "body": [
      "const ${1:name} = ({}) => {",
      "  return ( ",
      "    ${2:code}",
      "  );",
      "};",
      ""
    ],
    "description": "fca: Function Component (Arrow function)"
  },
  "fcax: Function Component (Arrow function) & export": {
    "prefix": "fcax",
    "body": [
      "export const ${1:name} = ({}) => {",
      "  return ( ",
      "    ${2:code}",
      "  );",
      "};",
      ""
    ],
    "description": "fcx: Function Component (Arrow function) & export"
  },
  "rfcd: react default functional componant": {
    "prefix": "rfcd",
    "body": [
      "import React from 'react';",
      "",
      "function ${1:compName}() {",
      "    return (",
      "        ${2:code}",
      "    );",
      "};",
      "",
      "export default ${1: compName};",
      ""
    ],
    "description": "rfcd: react default functional componant"
  },
  "rfcad: react default functional arrow componant": {
    "prefix": "rfcad",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:compName} = () => {",
      "    return (",
      "        ${2:code}",
      "    );",
      "};",
      "",
      "export default ${1:compName};",
      ""
    ],
    "description": "rfcad: react default functional arrow componant"
  },
  "rfc: react functional componant": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "export function ${1:compName}() {",
      "    return (",
      "        ${2:code}",
      "    );",
      "};",
      ""
    ],
    "description": "rfc: react functional componant"
  },
  "rfca: react functional componant arrow": {
    "prefix": "rfca",
    "body": [
      "import React from 'react';",
      "",
      "export const ${1: compName} = () => {",
      "    return (",
      "        ${2:code}",
      "    );",
      "};",
      ""
    ],
    "description": "rfca: react functional componant arrow"
  }
}

keybindings.json

[
  {
    "key": "ctrl+alt+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "name": "clg: console.log"
    }
  },
  {
    "key": "ctrl+alt+t",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "name": "clt: console.time"
    }
  }
]