common-js-snippets.code-snippets

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and description.
  "Show console logs in development mode": {
    "prefix": "sidlog",
    "body": [
      " if (process.env.NODE_ENV === 'development') {",
      "      console.log($TM_SELECTED_TEXT, '$TM_FILENAME', ':$TM_LINE_NUMBER');",
      "    }"
    ],
    "description": "Show console logs in development mode"
  },
  "Show console logs in development mode With chalk": {
    "prefix": "sidcha",
    "body": [
      " if (process.env.NODE_ENV === 'development') {",
      "      console.log(chalk.blue($TM_SELECTED_TEXT, '$TM_FILENAME', ':$TM_LINE_NUMBER'));",
      "    }"
    ],
    "description": "Show console logs in development mode With chalk"
  },
  "Console log": {
    "prefix": "log",
    "body": [
      "      console.log($TM_SELECTED_TEXT, '$TM_FILENAME', ':$TM_LINE_NUMBER');"
    ],
    "description": "Console log"
  },
  "Show in development mode": {
    "prefix": "sid",
    "body": [
      " if (process.env.NODE_ENV === 'development') {",
      "     $TM_SELECTED_TEXT",
      "}"
    ],
    "description": "Show in development mode"
  },
  "useState": {
    "prefix": "useState",
    "body": [
      "const[$TM_SELECTED_TEXT, set${TM_SELECTED_TEXT/^(.)/${1:/upcase}/}] = useState('');"
    ],
    "description": "useState"
  },
  "React Fragment Component": {
    "prefix": "rfc",
    "body": ["<>", "  $TM_SELECTED_TEXT", "</>"],
    "description": "React Fragment Component"
  },
  "Error Location": {
    "prefix": "errloc",
    "body": ["err.errLocation = '$TM_FILENAME:$TM_LINE_NUMBER';"],
    "description": "Error Location"
  },
  "Error Location Variable": {
    "prefix": "errLOC",
    "body": ["const errLocation = '$TM_FILENAME:$TM_LINE_NUMBER';"],
    "description": "Error Location Variable"
  },
  "Error Body Full": {
    "prefix": "errbd",
    "body": [
      "const message = '';",
      "const errLocation = '$TM_FILENAME:$TM_LINE_NUMBER';",
      "const errBody = { message, errLocation };"
    ],
    "description": "Error Body Full"
  },
  "React Functional Component": {
    "prefix": "rfccc",
    "body": [
      "/* Classes */",
      "import classes from './${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}.module.css';",
      "",
      "/* Main Component */",
      "const ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g} = (props) => {",
      "  return <div className={classes.main}>${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}</div>;",
      "};",
      "",
      "/* Export Main Component */",
      "export default ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g};",
      ""
    ],
    "description": "React Functional Component"
  },
  "Pretty Log": {
    "prefix": "plog",
    "body": [
      "prettyLog('error', $TM_SELECTED_TEXT, ' $TM_FILENAME:$TM_LINE_NUMBER');"
    ],
    "description": "Pretty Log"
  },
  "Pretty Log File Name": {
    "prefix": "plf",
    "body": [
      "fileNameLog($TM_SELECTED_TEXT, ' $TM_FILENAME:$TM_LINE_NUMBER');"
    ],
    "description": "Pretty Log File Name"
  },
  "Pretty Log Informative": {
    "prefix": "plf",
    "body": [
      "informativeLog($TM_SELECTED_TEXT, ' $TM_FILENAME:$TM_LINE_NUMBER');"
    ],
    "description": "Pretty Log Informative"
  },
  "React Props": {
    "prefix": "=P",
    "body": ["$TM_SELECTED_TEXT={$TM_SELECTED_TEXT}"],
    "description": "React Props"
  },
  "NextJs Export Default": {
    "prefix": "nfc",
    "body": [
      "export default function ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}() {",
      "",
      "}"
    ],
    "description": "NextJs Export Default"
  },
  "Element Creating Skeleton": {
    "prefix": "ecs",
    "body": [
      "import { useId } from \"react\";",
      "",
      "import classNames from \"classnames\";",
      "import { PropTypes } from \"prop-types\";",
      "",
      "const COMPONENT_NAME = \"${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}\";",
      "const ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g} = (props) => {",
      "  const id = useId() + '-' + COMPONENT_NAME;",
      "",
      "  const { className = '', ...rest } = props;",
      "",
      "  return (",
      "    <div id={id} {...rest} className={classNames(className, COMPONENT_NAME)}>",
      "      {COMPONENT_NAME}",
      "    </div>",
      "  );",
      "};",
      "",
      "${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}.propTypes = {",
      "  className: PropTypes.string,",
      "};",
      "",
      "${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}.displayName = COMPONENT_NAME;",
      "",
      "export { ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g} };",
      ""
    ],
    "description": "Element Creating Skeleton"
  },
  "Old Element Creating Skeleton": {
    "prefix": "oEcs",
    "body": [
      "import React from \"react\";",
      "",
      "import classNames from \"classnames\";",
      "import { PropTypes } from \"prop-types\";",
      "",
      "const COMPONENT_NAME = \"${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}\";",
      "const ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g} = (props) => {",
      "  const id = Math.floor(Math.random() * 9999) + 1 + \"-\" + COMPONENT_NAME;",
      "",
      "  const { className = '', ...rest } = props;",
      "",
      "  return (",
      "    <div id={id} {...rest} className={classNames(className, COMPONENT_NAME)}>",
      "      {COMPONENT_NAME}",
      "    </div>",
      "  );",
      "};",
      "",
      "${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}.propTypes = {",
      "  className: PropTypes.string,",
      "};",
      "",
      "${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}.displayName = COMPONENT_NAME;",
      "",
      "export { ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g} };",
      ""
    ],
    "description": "Old Element Creating Skeleton (kebab-case to PascalCase)"
  },
  "Nextjs Typescript Element Creating Skeleton": {
    "prefix": "necs",
    "body": [
      "import { useId } from \"react\";",
      "import classNames from \"classnames\";",
      "",
      "const COMPONENT_NAME = \"${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}\";",
      "const ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g} = (props: { className?: string }) => {",
      "  const id = useId() + \"-\" + COMPONENT_NAME;",
      "",
      "  const { className, ...rest } = props;",
      "",
      "  return (",
      "    <div id={id} {...rest} className={classNames(className, COMPONENT_NAME)}>",
      "      {COMPONENT_NAME}",
      "    </div>",
      "  );",
      "};",
      "",
      "${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}.displayName = COMPONENT_NAME;",
      "",
      "export { ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g} };",
      ""
    ],
    "description": "Element Creating Skeleton"
  },
  "Query Page Creating Skeleton": {
    "prefix": "qpcs",
    "body": [
      "import classNames from 'classnames';",
      "import { PropTypes } from 'prop-types';",
      "import { useRouter } from 'next/router';",
      "import { serverSideTranslations } from 'next-i18next/serverSideTranslations';",
      "import { useTranslation } from 'next-i18next';",
      "",
      "export default function ${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}(props) {",
      "  const router = useRouter();",
      "  const { searchFor } = router.query;",
      "  return (",
      "  <>",
      "    <HeadSeo",
      "        title={t('Main.Title')}",
      "        description={`Your description goes here on every page. ",
      "                  Keep character count between 140 to 160 characters`}",
      "        canonicalUrl={siteMetadata.siteUrl}",
      "        ogTwitterImage={siteMetadata.siteLogoSquare}",
      "        ogType={'website'}",
      "      />",
      "    <div className={classNames(props.className, '${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}')}>",
      "      Are you looking for {searchFor}?",
      "    </div>",
      "  </>",
      "  );",
      "}",
      "",
      "${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}.propTypes = {",
      "  className: PropTypes.string,",
      "};",
      "",
      "${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}.displayName = '${TM_FILENAME_BASE/^([a-z])|([a-z]*)[-@_.*0-9]+([a-z]*)/${1:/capitalize}${2}${3:/capitalize}/g}';",
      "",
      "export const getServerSideProps = async ({ locale }) => ({",
      "  props: {",
      "    ...(await serverSideTranslations(locale, ['common'])),",
      "  },",
      "});",
      ""
    ],
    "description": "Query Page Creating Skeleton"
  }
}