---
title: Git Workshop for MFEE25
tags: iii-mfee25
description: Git Workshop for iii MFEE25
version: 20220430
---

# Git Workshop for MFEE25

Ashley (小賴) 賴怡玲

[e-mail]

共筆:
- [Git Workshop for MFEE25](https://hackmd.io/@ashleylai/HkEICAvHc)
- https://bit.ly/3knaOrC
- [NodeJS Workshop for MFEE25 (1)](https://hackmd.io/x6t2OdYQTGul8W7fn1AukQ?both)

華如投影片
https://docs.google.com/presentation/d/12qWryCdDKHMu1-rEh2tYR1mxju2WsWTmbSPmf3jfOoc/edit#slide=id.gf3dc048546_1_704
-共筆:https://hackmd.io/74v8BUZQShKhFF90Px9waQ

作業繳交表:
https://docs.google.com/spreadsheets/d/11CyiDepSdvdnTb5jLvbb8KqG1ds61gRb8AvvCefwwEA/edit?usp=sharing

錄影檔 https://drive.google.com/drive/folders/13lbXBrTL90tqTzF-7hF9rTXkVs71m-k6?usp=sharing

5/8 測驗 https://forms.gle/37rpXtRfktkCo4au5

---

### 上課方式

## 課程說明

## 換我了解你們

https://forms.gle/4dBMiKekZHLA7AdV6

## 怎麼問問題
---
***<< 禮貌很重要 >>***
1. 自我介紹
2. 要做什麼事
3. 預期結果
4. 現在的狀況如何
5. 做了什麼研究

### Why git?

- 目前最新版的專案在哪裡？
- 目前正式環境裡是哪一個版本？
- 20010425 跟 20010421 差別是？
- 要退回實作登入的那一版程式，在哪裡？
- 20010421 是誰做的？
- 是誰把 20010421 的 login.html 裡的按鈕拿掉的？
- 硬碟不夠用...

git 是一個工具(分散式)
github是一個平台(github/gitlab/bit bucket/...)**
由Linus發明(https://progressbar.tw/posts/113)

----

## 任務 0: 終端機指令練習

. 你現在所在的位置
.. 上一層
~ 我的目錄， /Users/aaa

相對路徑: 相對於你現在的位置
絕對路徑

指令參數

-a all
-f force

rm -rf /

| Windows | 說明 |
| -------- | -------------------------- |
| cd | 顯示目前所在路徑 |
| cd | 切換目錄 change directory |
| mkdir | 建立新的檔案夾 make dir |
| type null > | 建立新的檔案 |
| dir | 列出目前檔案夾的檔案列表 list |
| copy | 複製檔案 copy |
| move | 移動檔案 move |
| del | 刪除檔案 remove |
| cls | 清除畫面上的內容 |

---
## 任務 1: 安裝 git
https://git-scm.com/downloads

---
## 任務 2: 設定環境變數

git config --global user.name "ashleylai"

git config --global user.email "[e-mail]"

# 確認設定的情況
git config --list

# git 的設定檔
cat ~/.gitconfig
type .gitconfig (windows)

C:\Users\$USER\.gitconfig

---
## 任務 3: 建立 repo

git init

這個 repo 自己專屬的設定檔，可以用指令修改，也可以直接用編輯器編輯修改。
.git/config

整台電腦、共用的設定
C:/Users/{帳號}/.gitconfig
這個設定檔裡的設定是全局的、整台電腦的，可以把比較常用的設定在這裡，就不用每個專案都設定一次


可以在這個全局的設定檔中加上以下設定（如果原本已經有的，注意不要加到重複)，這樣就可以有縮寫的指令：

[alias]
co = checkout
br = branch
ci = commit
st = status
lg = log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cd) %C(bold blue)<%an>%Creset' --abbrev-commit --date=iso
l = log --oneline --graph
la = log --all --oneline --decorate --graph

![](https://i.imgur.com/iYbhwu4.png)

---
## 任務 4: 在 repo 中新增、修改、刪除檔案

# 把檔案從 工作目錄 加到 暫存區
git add a.txt

git commit -m "記錄這次提交的緣由"

# 查看 commit log
git log

反悔加入暫存區，但保留檔案
git rm --cached file
反悔加入暫存區，而且真的刪除檔案
git rm -f file

# 比較檔案的差異 確認後，可以按 q 離開
$ git diff

# 已經加入過的檔案，可以不用 git add 重加
# 用 git commit -am 同時加入這次的修改與訊息
$ git commit -am "訊息"

commit message 應該怎麼寫？
https://udacity.github.io/git-styleguide/

git log 指令的運用:

# 看commitID跟歷史紀錄...
$ git log
$ git log --oneline --graph//簡短的歷史紀錄只會顯示7碼
# 查看特定檔案的紀錄
$ git log a.txt

# 查看檔案修改細節
$ git log -p a.txt

# 查看統計的檔案修改細節（次數）
$ git log --stat

# 可以搜尋關鍵字
$ git log --grep="delete"

# 查看內容是誰編寫的
$ git blame hello.txt

# 從暫存區域回到工作目錄
$ git restore --staged {檔案名稱}

# 捨棄在工作目錄的改變(包括修改與刪除)
$ git restore {檔案名稱}

---
## 任務 5: 建立分支與合併

vscode 套件: `git graph`

# 檢視分支
$ git branch

# 新增分支
$ git branch {branch-name}

# 切換分支
$ git switch {branch-name}
$ git checkout {branch-name}

# 合併分支, 例如把 feature-login 合併進去 main
# 先切換到 main
$ git switch main
# 再把 feature-login 合併進來
$ git merge feature-login

# 刪除本地分支
$ git branch -d {branch-name}

---
## 任務 6: 建立 Github 帳號

skip

---
## 任務 7: 建立 github repo

git-workshop

---
## 任務 8: 撰寫 readme

**markdown語法**
https://markdownlivepreview.com/



---
## 任務 9: 了解 git flow

![](https://i.imgur.com/rV7GdFn.png)



---

## 作業

- 熟悉終端機指令
- 熟悉 git 操作 
- 請你們在 github 上建立一個叫做 git-workshop 的 repo
    - 至少有要一個 readme.md 記錄 4/30 的上課心得
    - 請看完這個影片 https://www.youtube.com/watch?v=DgbSc6Ys710 ，建立一個叫做 video.md 的檔案，在 video.md 裡寫下你的觀影心得
    - 寫完後記得去作業表打勾
    - 星期五晚上 12:00 前教
- 複習 JS 語法，特別 array 的相關函式
    - concat, filter, find, findIndex, map, forEach, indexOf, join, map, pop, push, reduce, shift, slice, sort, splice, unshift
- 學習 ES6 的語法 https://gretema.github.io/javascript/20200504/221423942/


--- 

課表
https://docs.google.com/spreadsheets/d/1OTvdVgTVpz0Sc4U6x99UFREeMeGozdT8z7CsjoGYCFw/edit#gid=1401104145

座位表
https://docs.google.com/spreadsheets/d/1znVyRUlbNkBJn5Bx4dEcIgp0mWMT2BzVcmhYREEnx-M/edit#gid=1344765249

---

已經 git init 過的，想要把 master 改成 main
git branch -m master main
 
 

---
.gitconfig

 [init]
	defaultBranch = main
 




# VSCode 設定 for coding style

## vscode extensions

vscode 需要安裝的套件

{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
],
}

![](https://i.imgur.com/N43WiDJ.png)

## npm 套件

每個專案都要裝

npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier

"devDependencies": {
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"prettier": "^2.5.1"
}

## vscode settings.json

"editor.formatOnSave": true,
"editor.tabSize": 2,
"window.title": "${activeEditorLong}${separator}${rootName}",
"window.zoomLevel": 1,
"editor.codeActionsOnSave": {
// For ESLint and StyleLint
"source.fixAll": true
},
"prettier.singleQuote": true,
"prettier.configPath": ".prettierrc",
"eslint.format.enable": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true

.prettierrc
每個專案都要放

{
"singleQuote": true,
"printWidth": 180,
"semi": true,
"tabWidth": 2
}

ESLint RC

.eslintrc.json

{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"parserOptions": {
"ecmaVersion": "latest"
},

"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"rules": {}
}