---
# System prepended metadata

title: DAY 7 -- Github & vscode
tags: [DIT 11th 教學 -- ROS]

---

---
tags : DIT 11th 教學 -- ROS
---
{%hackmd BJrTq20hE %}
# DAY 7 -- Github & vscode 
Author：[柚子](https://hackmd.io/@925)
## <font color ="orange"> 01. vscode extensions</font>

列出幾個我們常用的 extensions。

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

![](https://i.imgur.com/QjXBpNB.png =60%x)


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

![](https://i.imgur.com/FCSyVvm.png =60%x)


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

![](https://i.imgur.com/r58jrRg.png =60%x)


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

![](https://i.imgur.com/YrSQ1h1.png =60%x)

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

![](https://i.imgur.com/ULMH6um.png =60%x)

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

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

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

![](https://i.imgur.com/4zBJyTC.png =60%x)


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

![](https://i.imgur.com/zpeazQR.png =60%x)


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

![](https://i.imgur.com/NkOzJ54.png =60%x)

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


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

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

#### <font color ="magenza"> 2. 搜尋文字： ctrl + F</font>
> 其實大部分的網頁都可以用 ctrl+F。
> 右上方的視窗還可以打開，同時改變所有相同的文字。
>![](https://i.imgur.com/vhEPFps.png =80%x)


#### <font color ="magenza"> 3. 開關控制面板： ctrl + `</font>
> 開關下方大大的視窗，通常就是終端機啦。
> ![](https://i.imgur.com/9PzF9Ur.png)



#### <font color ="magenza"> 4. 開關側邊攔： ctrl + B</font>
> 開關左側的側邊欄，加大程式的視野面積。
> ![](https://i.imgur.com/0pnU2jx.png =40%x)


#### <font color ="magenza"> 5. 註解：ctrl + / </font>
> 對多行進行註解。
> ![](https://i.imgur.com/CUVCnw7.png =80%x)


#### <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>
註冊應該沒有問題ww
安裝 [Git for Windows](https://gitforwindows.org/)，點選藍色的「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 就可以了。

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

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

#### <font color="yellow"> step1. 開啟 cmd，輸入生成指令。</font>
```=
ssh-keygen -t ed25519 -C "your_email@example.com"
```

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

![](https://i.imgur.com/ItaXVng.png =80%x)


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

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

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

```=
SHA256:JL2lFT132zdWoFLgz8Vys79GtXWabhXlTHQYqiv78yw
```

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

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

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

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

![](https://i.imgur.com/fC5WTVF.png =48%x) ![](https://i.imgur.com/OwSyMZc.png =48%x)

![](https://i.imgur.com/vJXIzze.png =48%x) ![](https://i.imgur.com/AcBJkXr.png =48%x)



## <font color ="orange"> 04. GitHub -- application</font>
:::spoiler git 概念圖
看這張圖會更好理解自己接下來在做什麼喔~
![](https://i.imgur.com/tKbGV1f.png =90%x)
:::

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

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

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

![](https://i.imgur.com/avteCMG.png =40%x)


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

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

![](https://i.imgur.com/yO2MDge.png =46%x) $\;\;\;\;\;\;$![](https://i.imgur.com/DuOwuT9.png =46%x)


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

![](https://i.imgur.com/qENJGnJ.png =50%x)

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

![](https://i.imgur.com/5fpPaij.png =70%x)

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

![](https://i.imgur.com/uAECiJM.png =40%x)

這個必須在 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>

![](https://i.imgur.com/hEN7IFE.png =48%x)

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

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

![](https://i.imgur.com/T31unc8.png =50%x)

![](https://i.imgur.com/qBv98A7.png =70%x)

:::

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


![](https://i.imgur.com/pmLtQT5.png =60%x)

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

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

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


### <font color ="pink"> 4-2. git pull </font>
#### <font color="yellow">step1. 到 Github 的 repo，在這裡新增 README。</font>
![](https://i.imgur.com/3853f8N.png)

readme file 預設是 markdown 檔案，隨便寫寫即可。
```md=
# Python
---
This is a sample for readme file.
```

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

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

![](https://i.imgur.com/TiPDICx.png =70%x)


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


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

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

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

![](https://i.imgur.com/w8VyN29.png =50%x)



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

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

![](https://i.imgur.com/fKEIwx8.png =50%x)

:::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>
```py=
# 範例
git@github.com:pomelo925/tel2022_DoItTomorrow.git
```

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


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

進到資料夾內，點擊右鍵，選擇「Git Bash Here」。
（或是要用 vscode 開啟也可以。）

![](https://i.imgur.com/GGSVnNO.png =70%x)


#### <font color="yellow">step3. git clone。</font>
輸入 `git clone` 指令並貼上網址。

```
git clone git@github.com:pomelo925/tel2022_DoItTomorrow.git
```

![](https://i.imgur.com/rjZTes4.png =80%x)

檔案就成功下載下來囉，十分之方便 ~ 