---
# System prepended metadata

title: 新進前端人員教育訓練

---

# 新進前端人員教育訓練

* 靜態切版
* macos install `brew` + `nvm`
* macos install `iTerm2` + `zsh` + `powerlevel10k`
* vscode setting
```json=
{
    "editor.fontSize": 14,
    "editor.tabSize": 2,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active",
    "prettier.arrowParens": "avoid",
    "prettier.singleQuote": true,
    "prettier.printWidth": 120,
    "workbench.iconTheme": "material-icon-theme",
    "explorer.compactFolders": false,
    "workbench.startupEditor": "none",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.autoSave": "onWindowChange",
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[scss]": {
        "editor.defaultFormatter": "michelemelluso.code-beautifier"
    },
    "explorer.confirmDragAndDrop": false,
}
```
* vscode plugin
    * Auto Rename Tag
    * Babel JavaScript 
    * Beautify css/sass/scss/less
    * ES7+ React/Redux/React-Native snippets
    * ESLint
    * Git Graph
    * JavaScript (ES6) code snippets
    * Material Icon Theme
    * npm
    * Path Intellisense
    * Prettier - Code formatter
    * React Extension Pack
    * Reactjs code snippets
    * Remote Development
    * Tailwind CSS IntelliSense
* scss
* ReactJS HankMD
* ReactJS Plugin HankMD
* NextJS HankMD
* NextJS Plugin HankMD
* PostMan 文件參閱

---
目標
1. nextjs、typescript
2. 協助新頁面切版
3. 互相 code review
4. 活動專案維護


https://2021.thef2e.com/