Пользовательские фрагменты кода VSCode

Всем привет!

Изначально я планировал сделать этот пост в LinkedIn, но в конечном итоге он оказался слишком длинным для LinkedIn, ааааааа, и я не мог добавить фрагменты кода в визуально приятном виде.

В любом случае, как разработчику, который почти ежедневно работает с React и TypeScript, мне было невероятно утомительно постоянно настраивать компоненты вручную. Вытягивание того же импорта, следуя тому же скелету и экспортируя указанный компонент.

Но что, если я скажу вам, что есть более эффективный способ? *Здесь мем с Морфеусом*

Так вот как для меня будет выглядеть типичная настройка универсального компонента.

import { FunctionComponent } from "react";
import styled from "styled-components";

interface ExtendedProps {}

const ComponentName: FunctionComponent<ExtendedProps> = ({}) => {
  return <StyledComponentName></StyledComponentName>;
};
const StyledComponentName = styled.div``;

export default ComponentName;

В этом коде не так уж много, и настройка компонента за компонентом за компонентом — просто пустая трата времени. Поэтому, чтобы сэкономить время, я настроил собственный фрагмент кода VSCode, в котором мне нужно только ввести «stsx» и POOF! Код есть у меня.

Чтобы сделать то же самое для себя, просто обобщите код, который вы хотите, в фрагменте. Затем перейдите на https://snippet-generator.app/.

После того, как вы сгенерировали свой фрагмент, перейдите в VSCode > «Настройки» > «Пользовательские фрагменты». Выберите, на каком языке вы хотите, чтобы фрагмент был доступен. Я указал, что мой язык доступен только в расширениях .tsx. Вставьте свой фрагмент и сохраните. Время - деньги, и, надеюсь, это сэкономило вам время!

Не стесняйтесь связаться со мной на LinkedIn: https://www.linkedin.com/in/alexanderdgeorge/