Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>My SnippetsNew to Visual Studio Code? Get it now.

My Snippets

Jaedeok Kim

|
45 installs
| (0) | Free
These are actually my snippets, not just my snippets by name.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

My Snippet!

This may or may not help you.
These are actually my snippets, not just my snippets by name.
It will be updated as per my needs and no support for the feature will be provided.
This means I can add or remove features and modify existing ones as my needs.

Snippets

React(ts)

Snippet Renders
fc Functional Component
efc Export Functional Component
fce Functional Component Export Default
ust useState
uef useEffect
ume useMemo
uca useCallback
use useSelector

Next.js(ts)

Snippet Renders
np Next Page
gsp Get Static Props
gssp Get Server Side Props

Utils(js, ts)

Snippet Renders
af Arrow Function
cx ClassName Bind
cl Console
co Console Log
ce Console Error
ct Console Table

Full Expansions

React(ts)

fc - Functional Component

  interface |Props| {
    |
  };

  const | = (props: |Props) => {
   return |;
  };

efc - Export Functional Component

  interface |Props| {
    |
  };

  export const | = (props: |Props) => {
   return |;
  };

fce - Functional Component Export Default

  interface |Props| {
    |
  };

  const | = (props: |Props) => {
   return |;
  };

  export default |;

ust - useState

  const [|, set|] = useState|(|);

uef - useEffect

  useEffect|(() => {
    |
  }, [|]);

ume - useMemo

  const | = useMemo|(() => |, [|]);

uca - useCallback

  const | = useCallback|((|) => |, [|]);

use - useSelector

  const | = useSelector|((|) => |, [|]);

Next.js(ts)

np - Next Page

  import { NextPage } from 'next'
  import { useTranslation } from 'next-i18nex';

  interface |Props {
    |
  };

  const |: NextPage<|Props> = (props) => {
    const { t } useTranslation(`|`);

    return (|);
  };

  export default |;

gsp - Get Static Props

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

  export const | = async ({ locale }): MyGetStaticPropsContext|) => {
    |
    return {
      props: {
        ...(await serverSideTranslation(locale ['common' |],
        |
      }
    };
  };

gssp - Get Server Side Props

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

  export const | = async ({ locale }): MyGetServerSidePropsContext|) => {
    |
    return {
      props: {
        ...(await serverSideTranslation(locale ['common' |],
        |
      }
    };
  };

Utils(js, ts)

af - Arrow Function

  const | = (|) => {|};

cx - ClassNames Bind

  import classNames from 'classnames/bind';
  import styles from './$1.module.scss';

  const cx = classNames.bind(styles);

co - Console

  console.|(|);

cl - Console Log

  console.log(|);

ce - Console Error

  console.error(|);

ct - Console Table

  console.table(|);
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft