---
# System prepended metadata

title: IDE 環境設定（VSCode)
tags: [tools]

---

# IDE 環境設定（VSCode）
:::info
:book:這裡記錄平常在使用上的工具！
:::
[TOC]
## 目前使用的介面
![image](https://hackmd.io/_uploads/S1EIPd5g0.png)

為了看起來自己覺得舒服點？？找了些讓開發介面變得美觀的套件工具

### One Dark Pro 
----
>基於 Atom 的預設 One Dark 主題，是 VS Code 下載次數最多的主題之一，採用暗色調、高對比、語法高亮化設計減少眼睛疲勞

![image](https://hackmd.io/_uploads/rks9NcjlA.png)

### vscode-icons
----
>將檔案、資料及加上美美的圖示快速識別（主要是美美的看起來舒服？）

![image](https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/images/screenshot.gif)
### Chinese (Traditional)
----
> 中文（繁體）語言套件，讓 VS Code 提供在地化的使用者介面

### Preview on Web Server
----
> 提供在 Web 伺服器上執行的 HTML 的預覽。當您儲存檔案時，此擴充功能會自動重新載入瀏覽器或側面板（即時預覽功能）

![image](https://github.com/YuichiNukiyama/vscode-preview-server/raw/master/images/feature.gif)

### Rainbow CSV
----
> 對所有「純文字」和「.csv」檔案執行表格自動偵測演算法，並加入顏色增加對比度

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

### Python
----
這個套件主要方便自己確認運行環境版本以及透過自動完成、程式碼導覽、語法檢查等編輯程式碼，另外有提供測試(Python 調試器)、格式化、重構、變數瀏覽器、測試瀏覽器
<img src="https://raw.githubusercontent.com/microsoft/vscode-python/main/images/InterpreterSelectionZoom.gif" alt="HTTP-GO" width="250px" heigh="200px">

![image](https://raw.githubusercontent.com/microsoft/vscode-python/main/images/ConfigureTests.gif)

### Jupyter
----
> Jupyter 套件是一個在開發 python 非常方便測試和驗證的工具，該套件可以整合進 vscode 開發環境

![image](https://github.com/Microsoft/vscode-jupyter/raw/HEAD/images/Jupyter%20README/notebookui.png)

### Git Extension Pack
----
擴充包包含以下實用的 Git 工具：
#### GitLens 

> 直覺的 Git 紀錄，一目暸然當前的版本狀態

![image](https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/current-line-blame.png)
![image](https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/status-bar.png)
![image](https://hackmd.io/_uploads/r1eFbojx0.png)

> 查閱歷史修改紀錄中向後和向前導航

![image](https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/revision-navigation.gif)

> 詳細資訊視圖，可以方便、輕鬆地存取提交圖

![image](https://hackmd.io/_uploads/r1TVF3il0.png)

### Git Graph
----
> 想要簡單一點的顯示方式也可以選擇這個套件
![image](https://hackmd.io/_uploads/By9AC3oeR.png)


#### Git History
> 檢視 git 日誌、檔案或行歷史記錄

![image](https://raw.githubusercontent.com/DonJayamanne/gitHistoryVSCode/main/images/fileHistoryCommandv3.gif)
#### Project Manager
> 可定義自己的專案（也稱為收藏夾），或選擇自動偵測Git、Mercurial或SVN儲存庫、VSCode資料夾或任何其他資料夾，可以儲存資料夾專案並給予所屬標籤

![image](https://hackmd.io/_uploads/SyAEC3ilR.png)

### AWS Toolkit
----
> AWS 的工具包裡面有多個AWS服務套件，主要希望使用 AWS Code Whisperer 透過AI程式碼撰寫發想

![image](https://d2908q01vomqb2.cloudfront.net/7719a1c782a1ba91c031a682a0a2f8658209adbf/2023/05/27/s3-well-defined-comment.gif)

> AWS Code Whisperer 還提供了安全掃描，可以自動檢查程式碼是否存在風險
![image](https://docs.aws.amazon.com/images/codewhisperer/latest/userguide/images/security-scan-vscode-python.gif)


### 終端機(oh-my-zsh)
----
![image](https://hackmd.io/_uploads/B1j4pToxR.png)

> 漂漂的終端機美化可以參考菜小鬼這篇安裝oh-my-zsh[終端機介面設定筆記](https://hackmd.io/@e9gZC-1CQNOzcD2pMY6apA/HyCaKdKI6)

