フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

scaffdog

1. scaffdogのインストール

npm install scaffdog

2. フォルダ .scaffdog の 中に設定ファイルを作成する

mkdir .scaffdog
vi .scaffdog/config.js

config.js

export default {
  files: ['*'],
}
vi .scaffdog/mycomponent.md

テンプレートの作成

---
name: 'mycomponent'
description: 'React component を生成します'
root: 'src'
output: '**/*'
ignore: []
---

# Variables(自由に書き換えてください)

**コンポーネント名**
- component_name: MyComponent



# `{{ component_name }}.tsx`

\```tsx

import { FC, ReactNode } from "react"

type Props = {
  title: string;
  onclickfunction: () => void;
  children: ReactNode;
}

export const Child: FC<Props> = (props) => {
  return (
    <div>
      <h1>{{ component_name }}!!!</h1>
      this is {{ component_name }} Component
      <button onClick={props.onclickfunction}>ボタン</button>
    </div>
  );
};
\```

3. 実行する

package.json

  "scripts": {
    "scaffdog:generate": "scaffdog generate --force",
  },

テンプレートの name を指定して実行します

npm run scaffdog:generate --output "mycomponent" 
No.2418
11/15 17:07

edit