# DAY 5 -- Github & vscode
Author：[柚子](https://hackmd.io/@925)
## <font color ="orange"> 01. vscode extensions</font>

列出幾個我們常用的 extensions。

#### <font color ="magenza"> 1） C/C++</font>
> 基本上有用 C language 就會裝這個包。


#### <font color ="magenza"> 2） Python</font>
> 基本上有用 Python 就會裝這個包。


#### <font color ="magenza"> 3） Remote - SSH</font>
> 遠端連接機器時會需要這個，以後連像樹梅派的 SBC 時會用到。


#### <font color ="magenza"> 4）ROS</font>
> 裝了這個有關 ros 的指令就不會再跳出沒定義的錯誤波浪線囉~


#### <font color ="magenza"> 5）Power Mode</font>
> 酷酷的打字特效還有中二的 combo 數顯示器~


像這樣（文字上方的小煙火和右上方的 combo）：


#### <font color ="magenza"> 6）Tabnine AI</font>
> 自動跳出程式碼，可以大大加快打程式的速度。


#### <font color ="magenza"> 7）Prettier</font>
> 可以設定成「儲存時自動排版」，也是提升效率的好套件。


#### <font color ="magenza"> 8）WSL</font>
> 得以在 VScode 中開啟 wsl 中的檔案。


:::success
**通常要在 vscode 用一個新功能時，就可以先去延伸模組看看有沒有他的包。像是 markdown 語法、pdf 檔案、excel to csv 等等，都有它們對應的模組。我覺得要用到的時候再裝就可以了！**
:::

## <font color ="orange"> 02. vscode 快捷鍵</font>
這邊比較基本的複製、貼上、剪下、全選、undo、儲存、另存新檔等指令就不多說囉。
#### <font color ="magenza"> 1. 一次編輯多行： 滑鼠中鍵</font>
> 按著滑鼠中鍵，然後往上下拖曳，就可以同時對多行加減文字。
> 

但這個只能對「連續多排的同行」進行一次修改。
如果要對多個任意位置修改，改用 <font color ="magenza">alt + 滑鼠左鍵</font> 點擊。

#### <font color ="magenza"> 2. 搜尋文字： ctrl + F</font>
> 其實大部分的網頁都可以用 ctrl+F。
> 右上方的視窗還可以打開，同時改變所有相同的文字。
>

#### <font color ="magenza"> 3. 開關控制面板： ctrl + `</font>
> 開關下方大大的視窗，通常就是終端機啦。
> 

#### <font color ="magenza"> 4. 開關側邊攔： ctrl + B</font>
> 開關左側的側邊欄，加大程式的視野面積。
> 

#### <font color ="magenza"> 5. 註解：ctrl + / </font>
> 對多行進行註解。
> 

#### <font color ="magenza"> 6. 刪除當前行：ctrl + shift + k </font>
> 這個蠻好用的，減少碰到滑鼠的機會。

更多的快捷鍵、設定快捷鍵等都可以在按 <font color ="magenza">ctrl+K</font> 後再按 <font color ="magenza">ctrl+S</font> 看到喔！

## <font color ="orange"> 03. GitHub -- setup</font>
### <font color ="pink"> 3-1. 註冊 Github 帳號、安裝 Git</font>
註冊 [Github](https://github.com/)
安裝 [Git Install](https://git-scm.com/downloads)，點選藍色的「Downloads」框框。

### <font color ="pink"> 3-2. Github 簡介</font>
我覺得 [youtube 学习呀三木](https://www.youtube.com/watch?v=N6YQlPuAamw&ab_channel=%E5%AD%A6%E4%B9%A0%E5%91%80%E4%B8%89%E6%9C%A8) 很好懂！可以先花個 10 分鐘認識 git 和 github。

介面的話就放個粗淺的示意圖，先熟悉 Repositories 就可以了。


### <font color ="pink"> 3-3. generate ssh key </font>

#### <font color="yellow"> step1. 開啟 cmd，輸入生成指令。</font>

ssh-keygen -t ed25519 -C "[e-mail]"

#### <font color="yellow"> step2. 連按三次 enter，產生以下圖形代表生成成功。
</font>


#### <font color="yellow">step3. 到畫底線的位置找到 `id_ed25519.pub` 的文件 。</font>


複製裡面的長得像亂碼的公鑰。開頭會是 SHA256，代表用 SHA-2 加密演算法。

SHA256:JL2lFT132zdWoFLgz8Vys79GtXWabhXlTHQYqiv78yw

#### <font color="yellow">step4. 到 GitHub 新增 SSH Key。</font>
右上角圖示下拉選單 $\rightarrow$ settings $\rightarrow$ 左側欄位 SSH and GPG keys $\rightarrow$ 藍色的 New SSH Keys。


### <font color ="pink"> 3-4. vscode extensions </font>

在 extensions 上搜尋「git」，會有很多相關的延伸模組。
這裡放上幾個我常用到的延伸模組。

 

 

## <font color ="orange"> 04. GitHub -- application</font>
:::spoiler git 概念圖
看這張圖會更好理解自己接下來在做什麼喔~
:::

### <font color ="pink"> 4-1-1. create repo with VScode </font>
接下來我都會直接用 VSCode 去操作 Git（而不是在 Git Bash 中打指令）。
VSCode 幫我們把 Git 工具以按鍵代替指令，讓操作更快速方便、學習也更快。

我會把 vscode 中按鍵所對應的 「Git Bash 指令」寫出來。
一樣的步驟在 Git Bash 中打是一樣的效果。

#### <font color="yellow">step1. 到 vscode 中的 source control ，進行初始化。</font>
> ```
> git init
> ```


#### <font color="yellow">step2. 在 vscode 新增資料到暫存區 ( Storage Area )。</font>

> ```
> git add .
> ```

 $\;\;\;\;\;\;$

#### <font color="yellow">step3. 寫 commit 訊息。</font>
> ```
> git commit -m "first commit -- arduino project create"
> ```


:::success
**※ 第一次使用 git 會跳出的錯誤**


**解決方法如下：**
用快捷鍵 `ctrl + ~` 打開終端機，在右上方「+」的下拉選單中選 Git Bash。


這個必須在 Git Bash 中輸入以下兩行指令來告訴 Git 你是誰。

git config --global user.name "MY_NAME"
git config --global user.email "MY_EMAIL"

指令的雙引號要留著。另外這個 email 和 name 都是指 GitHub 上的，不能亂取喔。
:::

#### <font color="yellow">step3. 按下「publish branch」建立分支。</font>


:::success
**※ 第一次會有一些認證的步驟，點你直覺對的 ww**




:::

#### <font color="yellow">step4. 選擇 「public repository」，並輸入「REPO_NAME」。</font>
截圖的範例名稱是 Python，但注意通常名稱是小寫開頭。
>```
>git remote add origin https:[e-mail]:pomelo925/Python.git
>git push -u origin master
>```


（公開性之後也可以再到 Github 上去設定，選 public 可以讓其他人看看你的 repo。）

:::info
**幾個須要注意的事情：**

1. 為了方便我用 vscode 來操作 git。但很多技巧要靠打指令，所以建議大家找資料熟悉以指令來操作，對這些操作更熟悉再用 vscode 混搭也可以喔。
2. 遇錯時記得看 error message。複製貼上，網路上應該都能找到解方。
:::

### <font color ="pink"> 4-1-1. create repo with Github page </font>
#### <font color="yellow">step1. 進入個人的Github頁面，選擇New</font>

#### <font color="yellow">step2. 針對此repo進行設定</font>
* 輸入Repo名
* 輸入Description
* 選擇是否公開
* 選擇是否要加入Readme檔
* 選擇是否要加入git ignore檔
* 使用什麼樣的license(理論上不用)
* 這邊假設加入Readme檔，按下Create

這樣就能夠創建一個新Repo了，詳見4-4 git clone來拿取這個Repo

### <font color ="pink"> 4-2. git pull </font>
#### <font color="yellow">step1. 到 Github 的 repo，在這裡新增 README。</font>

readme file 預設是 markdown 檔案，隨便寫寫即可。

# Python
---
This is a sample for readme file.

#### <font color="yellow">step2. 到本地端的 vscode，進行 git pull。</font>
> ```
> git pull
> ```

到「source control」的右側「...」，選擇「提取」。


:::success
**現在去看你的本地端資料，應該會多一個 readme 檔案喔！是不是很方便呢？**
:::

### <font color ="pink"> 4-3. git push </font>
上個小節是在雲端更改資料，而本地端 `git pull` 下來。
但通常是在本地端更改資料，而需要 `git push` 上去雲端的 remote repo 。

#### <font color="yellow">step1. 更改本地端資料，新增一個檔案 hello.txt。</font>

#### <font color="yellow">step2. git add 並 git commit。</font>


#### <font color="yellow">step3. sync change</font>

git push

按下「同步變更」就能夠成功 push 上去囉！


:::success
**現在去看 GitHub 的 repo，重新整理後應該會看到更新！**
:::

:::info
**※ 同步變更？**

假設今天在雲端新增 readme 後，我們沒有 git pull 下來；同時間我又在本地端新增了 hello.txt 檔案，這樣會出現本地和遠端版本不同的情況。

「同步變更」其實就是先「git pull」再「git push」，這樣可以避免發生上述狀況時有資料遺失。事實上，**git 規定了在 push 之前必須更新到和雲端版本相同**。必要時是可以透過 force 關鍵詞來強制推送，但你必須知道自己在做什麼。
:::

### <font color ="pink"> 4-4. git clone </font>

假設我有了一台新裝置，想下載我放在 GitHub 上的 repo 時，要怎麼做呢？
那就是透過 `git clone` 指令下載，非常的簡單方便！

#### <font color="yellow">step1. 複製 repo 的網址。</font>

# 範例
[e-mail]:JustinShih0918/git_example_repo.git

# don't use
[e-mail]:DIT-ROBOTICS/Winter-Tutorial.git


#### <font color="yellow">step2. 到本地端任意資料夾位置。</font>

使用Terminal進入資料夾，輸入指令

git clone "the url"


或按control+alt+p，開啟命令選單，輸入clone選擇 **Git:Clone** 的服務

### <font color ="pink"> 4-4. git commands </font>

下載並連結Repo至Github

git clone "url"

更新Repo

git pull

跑去別的branch

git checkout branchName