My VSCode snippets for MERN stack.

mern.code-snippets

{
  // Typescript
  "constructor": {
    "prefix": "ctor",
    "scope": "javascript, typescript",
    "body": ["constructor($1) {", "  $0", "}"]
  },
  "Class": {
    "prefix": "!c",
    "scope": "javascript, typescript",
    "body": ["export class ${TM_FILENAME_BASE} {", "  $0", "}"]
  },
  // Javascript
  "Import": {
    "prefix": "im",
    "scope": "javascript, javascriptreact",
    "body": ["import ${2:{$3\\}} from '$1';"],
    "description": "React functional Component"
  },
  "Log to console": {
    "prefix": "logg",
    "scope": "javascript, javascriptreact",
    "body": ["console.log('$1');$0"],
    "description": "Log output to console"
  },
  "Log to varibale console": {
    "prefix": "logv",
    "scope": "javascript, javascriptreact",
    "body": ["console.log('$1', $1);$0"],
    "description": "Log output to console"
  },
  "Inline console.log": {
    "prefix": "logi",
    "scope": "javascript, javascriptreact, typescript, typescriptreact",
    "body": ["console.log($1) || $0"],
    "description": "Log output to console"
  },
  // React
  "React Component": {
    "prefix": "rc",
    "scope": "javascript, javascriptreact",
    "body": [
      "const ${TM_FILENAME_BASE} = ({ $1 }) => (",
      "  $0",
      ")",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
    "description": "React functional Component"
  },
  "React Component Camelcase": {
    "prefix": "rcc",
    "scope": "javascript, javascriptreact",
    "body": [
      "import React from 'react';",
      "",
      "const ${TM_FILENAME/^([^.]+).*/${1:/pascalcase}/} = ({$1}) => (",
      "  $0",
      ")",
      "",
      "export default ${TM_FILENAME/^([^.]+).*/${1:/pascalcase}/}"
    ],
    "description": "React functional Component"
  },
  // React
  "React Component (ts)": {
    "prefix": "rc",
    "scope": "typescript, typescriptreact",
    "description": "React functional Component",
    "body": [
      "interface ${TM_FILENAME_BASE}Props {}",
      "",
      "export const ${TM_FILENAME_BASE}: React.FC<${TM_FILENAME_BASE}Props> = props => {",
      "  $0",
      "}",
      ""
    ]
  },
  "React Page (ts)": {
    "prefix": "rp",
    "scope": "typescript, typescriptreact",
    "description": "React functional Component",
    "body": [
      "const ${TM_FILENAME_BASE}: React.FC = () => (",
      "  $0",
      ")",
      "",
      "export default ${TM_FILENAME_BASE};"
    ]
  },
  "React UseReducer": {
    "prefix": "ur",
    "scope": "typescriptreact, javascriptreact",
    "body": "const [${1:state} ,dispatch] = useReducer($2);$0"
  },
  "React UseEffect": {
    "prefix": "ue",
    "scope": "typescriptreact, typescript, javascriptreact",
    "body": ["useEffect(() => {", "  $0", "}, []);"]
  },
  "React CreateRef": {
    "prefix": "cr",
    "scope": "typescriptreact, javascriptreact",
    "body": "const $1 = createRef($2);$0"
  },
  "React UseState": {
    "prefix": "us",
    "scope": "typescriptreact, javascriptreact",
    "body": "const [$1 ,set${1/(.*)/${1:/pascalcase}/}] = useState($2);$0"
  },
  // Storybook
  "Storybook": {
    "prefix": "story",
    "scope": "javascript, javascriptreact, typescript, typescriptreact",
    "body": [
      "import { Story } from '@storybook/react';",
      "import ${TM_FILENAME_BASE/(.*)\\.(story|stories)?$/$1/} from './${TM_FILENAME_BASE/(.*)\\.(story|stories)?$/$1/}';",
      "",
      "const Template: Story<${TM_FILENAME_BASE/(.*)\\.(story|stories)?$/$1/}> = () => (",
      ")",
      "",
      "export default {",
      "  title: '${TM_FILENAME_BASE/(.*)\\.(story|stories)?$/$1/}',",
      "  component: ${TM_FILENAME_BASE/(.*)\\.(story|stories)?$/$1/},",
      "}"
    ],
    "description": "React Stateful Component"
  },
  // Jest
  "Test": {
    "prefix": "its",
    "scope": "javascript,typescript",
    "body": ["it('$1', () => {", "  $0", "});"],
    "description": "Spec"
  },
  "Describe": {
    "prefix": "desc",
    "scope": "javascript,typescript",
    "body": ["describe('$1', () => {", "  $0", "});"],
    "description": "Spec"
  },
  "Expect": {
    "prefix": "exp",
    "scope": "typescript",
    "body": ["expect($1)$0"],
    "description": "seed chapter"
  },
  // Style
  "Flex Flow": {
    "prefix": "ff",
    "scope": "css, scss",
    "body": [
      "flex-flow: ${1|column,row,row-reverse,column-reverse|} ${2|nowrap,wrap|};",
      "$0"
    ],
    "description": "Graphql Spec"
  },
  // Nexus
  "Nexus Mutation": {
    "prefix": "nmu",
    "scope": "typescript",
    "body": [
      "import { idArg, mutationField, stringArg } from 'nexus';",
      "",
      "export const ${TM_FILENAME_BASE} = mutationField(t => {",
      "  $0",
      "});"
    ]
  },
  "Nexus Query": {
    "prefix": "nqu",
    "scope": "typescript",
    "body": [
      "import { queryField } from 'nexus';",
      "",
      "export const ${TM_FILENAME_BASE} = queryField(t => {",
      "  $0",
      "});"
    ]
  }
}