# 常用 Blueprint 模板

[VScode Blueprint](https://marketplace.visualstudio.com/items?itemName=teamchilla.blueprint)

Blueprint 會幫我們產生程式碼模板，創建 Component 這種重複性的工作應該交給自動化工具就好，不需要每次自己手動寫。
( 最下面有設定檔結構 )

## flowjs

稍微添加常用嚴格模式

結構：

├── blueprint-templates
│   └── .flowconfig
│       └── .flowconfig

## react-component

以符合 airbnb 的 ESLint 規則方向開發

結構：

├── blueprint-templates
│   └── react-component
│       └── __pascalCase_name__.jsx

內容：

import React from 'react';

function {{pascalCase name}}() {
  return (
    <h1>
      Hello {{pascalCase name}} Component!
    </h1>
  );
}

export default {{pascalCase name}};

## 設定檔結構

.vscode/
├── blueprint-templates
│   └── react-component
│       └── __pascalCase_name__.jsx
└── settings.json

settings.json

{
  "blueprint.templatesPath": [
    "./.vscode/blueprint-templates"
  ]
}