Custom Snippets for Visual Studio Code

React Functional Component

Description

This snippet generates a basic template for a React functional component.

Usage

• Prefix: comp
• Scope: javascriptreact, javascript, typescript

Code

import React from 'react';

const $1 = ({
}) => {
  return <div />;
};

export default $1;

Print to Console

Description

This snippet allows you to quickly log output to the console, with or without a second argument.

Usage

• Prefix: clg (with second argument), clge (without second argument)
• Scope: javascriptreact, javascript, typescript

Code

// With Second Argument
console.log('== $1 == ', $1);
$2

// Without Second Argument
console.log('== $1 ==');

Formatted Message

Description

This snippet generates a template for a formatted translation message using the <FormattedMessage> component.

Usage

• Prefix: fm
• Scope: javascriptreact, javascript, typescript

Code

<FormattedMessage translation={TRANSLATIONS.$1} domain={TRANSLATIONS.DOMAINS.$2} />

Formatted HTML Message

Description

This snippet provides a template for a formatted HTML translation message using the <FormattedHtmlMessage> component.

Usage

• Prefix: fhm
• Scope: javascriptreact, javascript, typescript

Code

<FormattedHtmlMessage translation={$1} domain={$2} />

Define Translation

Description

This snippet assists in defining a translation object with the defineTranslation function.

Usage

• Prefix: deftrans
• Scope: javascriptreact, javascript, typescript

Code

export const $1 = defineTranslation({
  keyword: '$1',
  defaultMessage: '$2',
});

Styled Div

Description

This snippet generates a basic template for a styled div using the styled-components library.

Usage

• Prefix: sdiv
• Scope: javascriptreact, javascript, typescript

Code

const Styled$1 = styled.div`
$2
`;

Styled Components Theme Usage

Description

This snippet demonstrates how to access and use theme variables in styled components.

Usage

• Prefix: theme
• Scope: javascriptreact, javascript, typescript, css

Code

${({ theme }) => theme.$1}

Redux Toolkit Query Snippet

Description

This snippet creates boilerplate for a simple RTKQuery hook.

Usage

• Prefix: rq
• Scope: javascriptreact, javascript, typescript, css

Code

import { useQuery } from '@tanstack/react-query';
import { apiKy } from 'core/data-fetching/api-rq';

const QUERY_KEY = '$1';

/**
 *
 * @param {import('ky').KyInstance} api
* @returns
 */
const fetch$1 = async (api) => {
  const res = await api.get('api/proxy/$1').json();
  return res;
};

const useGet$1 = () =>
  useQuery({
    queryKey: [QUERY_KEY],
    queryFn: async () => fetch$1(apiKy),
    select: (data) => data.data
  });

export { useGet$1, fetch$1, QUERY_KEY as $1_QUERY_KEY };