Create Component

這是一個 Visual Studio Code 的 extension，可以讓 Hahow for Business 的前端團隊根據自己的「資料夾分類＆檔案命名規則」自動批次建立 template

Report Bug · Request Feature

Table of Contents

1. Features
2. Getting Started
   • Installation
3. Usage
4. Contributing
   • Diagram

Features

目前支援建立以下 template：

• Component
• Higher-Order Component
• Hook
• Utility Function

Getting Started

Installation

前往 Visual Studio Marketplace 安裝 Visual Studio Code extension

Usage

1. 在 Visual Studio Code 的 explorer tab 中，找到想要建立 template 的資料夾，點擊右鍵選單
2. 點擊「Create Component」
3. 選擇想要建立的類型
4. 輸入檔案名稱，然後 enter
5. extension 將會自動建立一個新的資料夾以及一系列相關檔案

Contributing

如果你有一些可以讓這個 extension 變得更好用的建議，請 fork 這個 repository 然後送 Pull Request 給我們，或是你也可以開個 issue 讓我們知道。別忘了給 project 點個 Star！感激不盡！

要在 local 開發的步驟：

1. git checkout forked repository
2. npm install 安裝 dependencies
3. Visual Studio Code 開啟專案
4. 修改程式碼，F5 進入 debug 模式
5. Visual Studio Code 會開啟第二個 development 專用的視窗

Diagram

下圖以 Component 類型的元件為例，其它類型以此類推：

classDiagram
  IFactory <|.. ComponentFactory
  <<Interface>> IFactory
  IFactory: +createValidator()
  IFactory: +createGenerator()
  ComponentFactory: +createValidator()
  ComponentFactory: +createGenerator()
  IValidator <|.. ComponentValidator
  <<Interface>> IValidator
  IValidator: +string validate(string name)
  ComponentValidator: +string validate(string name)
  Generator <|-- ComponentGenerator
  Generator: +generate(string name, string folder)
  ComponentGenerator: +generate(string name, string folder)
  ComponentValidator <.. ComponentFactory
  ComponentGenerator <.. ComponentFactory
  IFactory <-- extension
  IValidator <.. extension
  Generator <.. extension
  extension: -IFactory factory
  extension: +execute()

Loading

1. 如果要調整 template，可以改 /src/templates/component/*.ts 和 src/utils/generator/ComponentGenerator.ts 這兩份檔案
2. 如果要調整 validator，可以改 src/utils/validator/ComponentValidator.ts 這個檔案
3. 如果要新增類型，可以參考 src/utils/factory/ComponentFactory.ts 新增相關檔案，然後在 src/utils/execute.ts 新增一筆 enum Item

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgments

Inspired by pranshuagrawal/vscode-create-component, special thanks to @pranshuagrawal.