---
# System prepended metadata

title: 常用 Blueprint 模板

---

# 常用 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

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