🌈 VSCode에서 클릭 한 번으로 컴포넌트 파일, stories.tsx, test.tsx 자동 생성하기

허지예·2024년 8월 11일

개인 프로젝트 기록

목록 보기

9/17

VSCode에서 Next.js + Typescript로 개인 프로젝트를 진행하고 있다.

생산성을 끌어올리기 위해서 클릭 한 번으로 정해진 템블릿으로 아래 3가지 파일을 생성하기를 구현해봤다.

Component.tsx
Component.stories.tsx
Component.test.tsx

`Folder Templates` 사용하기

https://marketplace.visualstudio.com/items?itemName=Huuums.vscode-fast-folder-structure#template-format

vscode extension인 Folder Templates를 활용했다.

1. 프로젝트 루트 폴더에 .fttemplates 폴더를 생성한다.

2. component template 폴더를 생성한다.

3. component template 폴더 아래 다음과 같이 파일들을 생성한다.

.fttemplates/
├── component template/
│   ├── [FTName].tsx
│   ├── [FTName].stories.tsx
│   ├── [FTName].test.tsx
│   ├── index.ts
│   ├── .ftsettings.json

[FTName].tsx

export type [FTName]Props = {}

// eslint-disable-next-line no-empty-pattern
function [FTName]({}: [FTName]Props) {
  return <div data-testid="[FTName]-component"/>
}

export default [FTName];

[FTName].stories.tsx

import type { Meta, StoryObj } from '@storybook/react';

import [FTName] from './[FTName]';

const meta = {
  title: 'Component/[FTName]',
  component: [FTName],
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: { },
  args: { },
} satisfies Meta<typeof [FTName]>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {},
};

[FTName].test.tsx

import { describe, expect, it } from '@jest/globals';
import { render, screen } from '@testing-library/react';

import [FTName] from './[FTName]';

describe('🎨 [FTName] 컴포넌트 테스트', () => {
  it('기본 렌더링 테스트', () => {
    render(<[FTName] />);
    const element = screen.getByTestId('[FTName]-component');
    expect(element).toBeInTheDocument();
  });
});

index.tsx
[__existingcontent__]은 파일을 덮어쓰기할 경우 이전 내용이 여기 담긴다.
그 폴더 내에서 처음 생성할 경우에는 저 문자가 그대로 들어가지만, (이건 수동으로 제거)
그 이후 생성할 때는 누적되서 들어간다.
```
```tsx
[__existingcontent__]
export * from './[FTName]';
export { default as [FTName] } from './[FTName]';
```
```

.ftsettings.json
"overwriteExistingFiles": "always": 이미 있는 파일이 있는 경우 덮어씌운다.
"omitParentDirectory": true : 폴더를 새로 생성하지 않고, 부모 폴더에 파일들을 추가한다.
```
```tsx
{
  "name": "🎨 component template",
  "overwriteExistingFiles": "always",
  "omitParentDirectory": true
}
```
```

끝👍