VSCode javascript snippets

javascript.json

{
  "Component": {
    "prefix": "component",
    "body": [
      "import{any,array,arrayOf,bool,element,func,instanceOf,node,number,object,oneOf,oneOfType,required,shape,string,}from'prop-types';",
      "import React from 'react';",
      "",
      "${4:import styles from './styles.module.scss';}",
      "",
      "const ${1:Component} = ({ ${2:onClick} }) => (",
      "  <div className={styles.container}>",
      "    ${5}",
      "  </div>",
      ")",
      "",
      "${1:Component}.propTypes = {",
      "  ${2:onClick}: ${3:func}.isRequired",
      "};",
      "",
      "export {${1:Component}};"
    ],
    "description": "A skeleton for a simple display component",
    "scope": "javascript"
  },
  "Console Log": {
    "prefix": ["cl", "console", "console.l"],
    "body": ["console.log($1);$0"],
    "description": "Log output to console",
    "scope": "javascript"
  },
  "Console Log - JSON": {
    "prefix": "clj",
    "body": ["console.log(JSON.stringify({$1}, null, 2));$0"],
    "description": "Log stringified output to console",
    "scope": "javascript"
  },
  "Console Log - Ramda": {
    "prefix": "clr",
    "body": [
      "obj => console.log(obj) || obj, // eslint-disable-line no-console${0}"
    ],
    "description": "Log output to console",
    "scope": "javascript"
  },
  "div Emmet css-modules": {
    "prefix": "div",
    "body": ["<div className={styles.${1:container}}>${2}</div>"],
    "description": "A div with css module className built-in",
    "scope": "javascript"
  },
  "Enumeration - Index": {
    "prefix": ["enumindex", "typeindexenum"],
    "body": [
      "import { Enumeration, graphqlSchema, propTypes } from './typedef';",
      "",
      "export const ${1:ExampleEnum} = {",
      "  ...Enumeration,",
      "  graphqlSchema,",
      "  propTypes,",
      "};",
      "${0}"
    ],
    "description": "The index for an enumeration type",
    "scope": "javascript"
  },
  "Enumeration - Typedef": {
    "prefix": ["enumdef", "typedefenum"],
    "body": [
      "import gql from 'graphql-tag';",
      "import { oneOf } from 'prop-types';",
      "import { values as ramdaValues } from 'ramda';",
      "",
      "export const graphqlSchema = gql`",
      "  enum ${1:EnumName} {",
      "    \"${3:Enum description}\"",
      "    ${2:ENUM_VALUE}",
      "    ${0}",
      "  }",
      "`;",
      "",
      "export const Enumeration = {",
      "  ${2:ENUM_VALUE}: '${2:ENUM_VALUE}',",
      "};",
      "",
      "const values = ramdaValues(Enumeration);",
      "",
      "export const propTypes = oneOf(values);",
      ""
    ],
    "description": "The type definition for an enumeration type",
    "scope": "javascript"
  },
  "Import - Classnames": {
    "prefix": ["cx", "impc", "import cx", "importclassnames"],
    "body": ["import cx from 'classnames'${0}"],
    "description": "A default import",
    "scope": "javascript"
  },
  "Import - Default": {
    "prefix": ["defaultimport", "imp", "impd", "importdefault"],
    "body": ["import ${2:name} from'${1:package}'${0}"],
    "description": "A default import",
    "scope": "javascript"
  },
  "Import - makeHOC": {
    "prefix": ["hoc", "imphoc", "makeHOC"],
    "body": ["import{makeHOC}from'shared/makeHOC'${0}"],
    "description": "Import makeHOC",
    "scope": "javascript"
  },
  "Import - Named": {
    "prefix": ["impn", "importnamed", "namedimport"],
    "body": ["import{${1:name}}from'${2:package}'${0}"],
    "description": "A named import",
    "scope": "javascript"
  },
  "Import - PropTypes": {
    "prefix": "proptypes",
    "body": "import{any,array,arrayOf,bool,element,func,instanceOf,node,number,object,oneOf,oneOfType,required,shape,string,}from'prop-types'${0}",
    "description": "Import all prop-types",
    "scope": "javascript"
  },
  "Import - Ramda": {
    "prefix": ["importramda", "impra", "ramda"],
    "body": "import{__,add,addIndex,adjust,all,allPass,always,and,any,anyPass,ap,aperture,append,apply,applySpec,applyTo,ascend,assoc,assocPath,binary,bind,both,call,chain,clamp,clone,comparator,complement,compose,composeK,composeP,composeWith,concat,cond,construct,constructN,contains,converge,countBy,curry,curryN,dec,defaultTo,descend,difference,differenceWith,dissoc,dissocPath,divide,drop,dropLast,dropLastWhile,dropRepeats,dropRepeatsWith,dropWhile,either,empty,endsWith,eqBy,eqProps,equals,evolve,F,filter,find,findIndex,findLast,findLastIndex,flatten,flip,forEach,forEachObjIndexed,fromPairs,groupBy,groupWith,gt,gte,has,hasIn,hasPath,head,identical,identity,ifElse,inc,includes,indexBy,indexOf,init,innerJoin,insert,insertAll,intersection,intersperse,into,invert,invertObj,invoker,is,isEmpty,isNil,join,juxt,keys,keysIn,last,lastIndexOf,length,lens,lensIndex,lensPath,lensProp,lift,liftN,lt,lte,map,mapAccum,mapAccumRight,mapObjIndexed,match,mathMod,max,maxBy,mean,median,memoizeWith,merge,mergeAll,mergeDeepLeft,mergeDeepRight,mergeDeepWith,mergeDeepWithKey,mergeLeft,mergeRight,mergeWith,mergeWithKey,min,minBy,modulo,move,multiply,nAry,negate,none,not,nth,nthArg,o,objOf,of,omit,once,or,otherwise,over,pair,partial,partialRight,partition,path,pathEq,pathOr,pathSatisfies,pick,pickAll,pickBy,pipe,pipeK,pipeP,pipeWith,pluck,prepend,product,project,prop,propEq,propIs,propOr,props,propSatisfies,range,reduce,reduceBy,reduced,reduceRight,reduceWhile,reject,remove,repeat,replace,reverse,scan,sequence,set,slice,sort,sortBy,sortWith,split,splitAt,splitEvery,splitWhen,startsWith,subtract,sum,symmetricDifference,symmetricDifferenceWith,T,tail,take,takeLast,takeLastWhile,takeWhile,tap,then,thunkify,times,toLower,toPairs,toPairsIn,toString,toUpper,transduce,transpose,traverse,trim,tryCatch,type,unapply,unary,uncurryN,unfold,union,unionWith,uniq,uniqBy,uniqWith,unless,unnest,until,update,useWith,values,valuesIn,view,when,where,whereEq,without,xprod,zip,zipObj,zipWith,}from'ramda'${0}",
    "description": "Import ramda",
    "scope": "javascript"
  },
  "Import - React": {
    "prefix": ["import React", "importreact", "impre", "react"],
    "body": "import React from 'react'${0};",
    "description": "Import react",
    "scope": "javascript"
  },
  "Import - Vortex Common": {
    "prefix": ["impv", "importvortex"],
    "body": "import{${1:isNullOrEmpty}}from'@vortex/common';${0}",
    "description": "Import react",
    "scope": "javascript"
  },
  "Index - Bundle": {
    "prefix": "indexb",
    "body": [
      "import { lazy } from 'react';",
      "",
      "export const ${1:Component} = lazy(() =>",
      "  import(",
      "    /* webpackChunkName: \"${2:camelCasedFirstLetter}${1:Component}\" */",
      "    './bundle'",
      "  )",
      ");${0}"
    ],
    "description": "A component's typical bundle.js when using lazy loading",
    "scope": "javascript"
  },
  "PropTypes": {
    "prefix": "props",
    "body": [
      "${1:Component}.propTypes = {",
      "  ${2:onClick}: ${3:func}.isRequired",
      "};${0}"
    ],
    "description": "Start of component propTypes structure",
    "scope": "javascript"
  },
  "PropTypes - Default": {
    "prefix": "propsd",
    "body": [
      "${1:Component}.defaultProps = {",
      "  ${2:onClick}: ${3:() => null}",
      "};${0}"
    ],
    "description": "Start of component default props structure",
    "scope": "javascript"
  },
  "Snapshot": {
    "prefix": "snapshot",
    "body": [
      "import { shallow } from 'enzyme';",
      "import React from 'react';",
      "",
      "import { ${1:Component} } from '..${2:/component}';",
      "",
      "describe('<${1:Component} />', () => {",
      "  const defaultProps = { t };",
      "",
      "  const render = props => shallow(<${1:Component} {...defaultProps } {...props } />);",
      "",
      "  test('renders properly', () => {",
      "    expect(render()).toMatchSnapshot();",
      "  });",
      "});${0}"
    ],
    "description": "A full component snapshot file",
    "scope": "javascript"
  },
  "Styles - Scss import": {
    "prefix": "import styles",
    "body": "import styles from './styles.module.scss';",
    "description": "Import css-module styles.module.scss",
    "scope": "javascript"
  },
  "Test": {
    "prefix": "test",
    "body": ["test('${1}', () => {", "  ${2}", "});"],
    "description": "The structure for a test",
    "scope": "javascript"
  },
  "Test - Async": {
    "prefix": "testa",
    "body": [
      "test('${1}', async () => {",
      "  const expected = {${2}};",
      "",
      "  const actual = await ${3:new Promise(resolve => resolve({\\}))};",
      "",
      "  expect(actual).toEqual(expected);",
      "});"
    ],
    "description": "The structure of an async test",
    "scope": "javascript"
  },
  "Test - Callback": {
    "prefix": "testc",
    "body": [
      "test('${1}', done => {",
      "  const expected = {${2}};",
      "",
      "  ${3:callbackMethod}((err, actual) => {",
      "    if(err) return done(err);",
      "",
      "    expect(actual).toEqual(expected);",
      "",
      "    done();",
      "  });",
      "});"
    ],
    "description": "The structure of an asynchronous test with the done callback",
    "scope": "javascript"
  },
  "Test - Describe Block": {
    "prefix": "describe",
    "body": ["describe('${1}', () => {", "  ${2}", "});"],
    "description": "A test file describe block",
    "scope": "javascript"
  },
  "Test - Drive Me": {
    "prefix": "tdme",
    "body": [
      "export const ${1:resolver} = (_parent, _args, _context) => {",
      "  throw new Error('test-drive me!');",
      "};"
    ],
    "description": "A stub function that needs to be test-driven into true existence",
    "scope": "javascript"
  },
  "Type Module - Examples": {
    "prefix": "typeexample",
    "body": [
      "import { makeSafeExample } from 'utils/makeSafeExample';",
      "",
      "import { apiToUi, backendToApi, dbToApi, uiToInput } from './transforms';",
      "",
      "${1:export const backendExample = makeSafeExample({ property: '' \\}); // TODO: Delete if no backend format}",
      "",
      "${2:export const dbExample = makeSafeExample({ property: '' \\}); // TODO: Delete if no db format}",
      "",
      "${3:export const apiExample = makeSafeExample(backendToApi(backendExample())); // TODO: Delete if no backend format}",
      "${4:export const apiExample = makeSafeExample(dbToApi(dbExample())); // TODO: Delete if no api format}",
      "",
      "export const uiExample = makeSafeExample(apiToUi(apiExample()));",
      "",
      "${5:export const inputExample = makeSafeExample(uiToInput(uiExample())); // TODO: Delete if no input format}",
      "${0}"
    ],
    "description": "The examples for a type module",
    "scope": "javascript"
  },
  "Type Module - Index": {
    "prefix": "typeindex",
    "body": [
      "import { apiExample, backendExample, dbExample, inputExample, uiExample, } from './examples';",
      "import { apiToBackend, apiToUi, backendToApi, dbToApi, inputToApi, inputToBackend, uiToApi, uiToInput, withDisplayUnits, } from './transforms';",
      "import { fragment, fragmentName, graphqlSchema, propTypes } from './typedef';",
      "import { Limits, validationSchema } from './validation';",
      "",
      "export const ${1:TypeName} = { Limits, apiExample, apiToBackend, apiToUi, backendExample, backendToApi, dbExample, dbToApi, fragment, fragmentName, graphqlSchema, inputExample, inputToApi, inputToBackend, propTypes, uiExample, uiToApi, uiToInput, validationSchema, withDisplayUnits, };",
      "${0}"
    ],
    "description": "The index for a type module",
    "scope": "javascript"
  },
  "Type Module - Transforms": {
    "prefix": "typetransforms",
    "body": [
      "import { curry, identity, pipe } from 'ramda';",
      "",
      "${1:export const backendToApi = identity; // TODO: Delete if no backend format}",
      "",
      "${2:export const dbToApi = identity; // TODO: Delete if db format same as api format}",
      "",
      "export const apiToUi = identity;",
      "",
      "${3:export const uiToApi = identity; // TODO: Delete if no input format}",
      "",
      "${4:export const uiToInput = identity; // TODO: Delete if no input format}",
      "",
      "${5:export const inputToApi = identity; // TODO: Delete if no input format}",
      "",
      "${6:export const apiToBackend = identity; // TODO: Delete if no backend format, or if read-only}",
      "",
      "${7:export const inputToBackend = pipe(inputToApi,apiToBackend); // TODO: Delete if no input format}",
      "",
      "export const withDisplayUnits = curry((unitConverter, ${8:instance}) => ${8:instance});",
      "${0}"
    ],
    "description": "The transforms for a type module",
    "scope": "javascript"
  },
  "Type Module - Transforms Spec": {
    "prefix": ["typetransformsspec", "typetransformsspec"],
    "body": [
      "import { ${1:TypeName} } from '..';",
      "",
      "describe('${2:type name} transforms', () => {",
      "  describe('converting from backend to api format', () => {",
      "    test('${3:description}', () => {",
      "      const backend = ${1:TypeName}.backendExample();",
      "      const api = ${1:TypeName}.backendToApi(backend);",
      "",
      "      expect(api).toEqual({",
      "        ${0}",
      "      });",
      "    });",
      "  });",
      "});"
    ],
    "description": "Transforms spec for a type module",
    "scope": "javascript"
  },
  "Type Module - Typedef": {
    "prefix": "typedefinition",
    "body": [
      "import gql from 'graphql-tag';",
      "import { arrayOf, bool, number, oneOfType, shape, string } from 'prop-types';",
      "",
      "export const graphqlSchema = gql`",
      "  \"${1:type description}\"",
      "  type ${2:TypeName} {",
      "    \"${3:property description}\"",
      "    ${4:property}: ${5:GraphQL Type}",
      "  }",
      "",
      "  \"${1:type description} input\"",
      "  input ${2:TypeName}Input {",
      "  }",
      "`;",
      "",
      "export const propTypes = shape({",
      "  ${4:property}: ${6:propType}.isRequired,",
      "});",
      "",
      "export const fragmentName = '${2:TypeName}Fragment';",
      "",
      "export const fragment = gql`",
      "  fragment \\${fragmentName} on ${2:TypeName} {",
      "    ${4:property}",
      "  }",
      "`;",
      "${0}"
    ],
    "description": "The type definition for a type module",
    "scope": "javascript"
  },
  "Type Module - Validation": {
    "prefix": "typevalidation",
    "body": [
      "import { Validation } from 'utils/validation';",
      "",
      "const { date, number, object, quantity, string } = Validation;",
      "",
      "export const Limits = {",
      "  ${1:property}: {",
      "    max: 200,",
      "    min: 0,",
      "    step: 1,",
      "  },",
      "};",
      "",
      "export const validationSchema = object().shape({",
      "  ${1:property}: ${2:type}()",
      "    .limits(Limits.${1:property}, '${1:property}RangeError')",
      "    .required('${1:property}MissingError'),",
      "});",
      "${0}"
    ],
    "description": "Validations for a type module",
    "scope": "javascript"
  }
}