AugustusHsu's Blog

VS Code Note 01

AugustusHsu -

VS Code套件安裝記錄

VS Code對於開發者來說是一件非常好用的IDE，可以根據不同的開發環境安裝各種擴充套件，自己本身是寫深度學習的專案，不過這裡介紹的套件應該也可以套用到多數開發環境，具體的可能需要自行測試才會知道合不合適，目前安裝的套件有以下這幾種:

Git相關的VS Code套件

軟體開發的流程總是離不開版本控制，VS Code的套件已經將版本控制的一些功能非常好的整合到IDE上面，一些常用功能也有視覺化的套件可以使用。

GitLab Workflow

VS Code剛安裝完本身就可以Clone Github上面的Repository，如果是要用Clone GitLab上的project就需要這個套件來幫忙連線到GitLab上，使用方法也很簡單，安裝VSCode上的GitLab Workflow套件後，如果是自架的GitLab伺服器，需要創建access token接著點選Add Account將token輸入:

新增完token後點選複製存放庫，可以看到多了一個GitLab選項，點選後就能Clone該帳號下的專案了:

GitLens

在開發專案時總是會遇到一些想要飆罵髒話狀況，譬如:

啊?程式怎麼掛在這個地方?XXX!這行XX誰寫的!

這時候就可以使用git blame來找出導致發生這種事的兇手，而GitLens就是可以在每一行程式碼後面加上git blame的訊息:

除此之外還可以針對這個檔案或是行去查過往的commit紀錄:

在右上角的按鈕還可以比對前一次commit的差異:

點選後就像下面這張圖片，基本上就是git diff畫面，比起命令列友善許多:

在下面還可以看到最近一次commit的時間和commit的內容，可以快速掌握上次commit做了什麼:

Git Graph

Git Graph算是我在git相關套件中最喜歡的套件之一了，當多人協作時，每個人都會開一個branch，透過Git Graph可以查看各個branch、和各個commit、merge的狀況，除此之外還可以做一些基本操作，比如分支合併、rebase、tag、stash 等等:

git-commit-lint-vscode

用來規定git commit標題在指定的類型清單中選擇，可以對該類型的說明添加自訂的敘述，還可以對不同的類型設定指定的Emoji:

"gitCommitLintVscode.customType": [
    {
        "emoji": "🎉",
        "type": "init",
        "name": "初始化",
        "description": "初次提交/初始化專案"
    },
    {
        "emoji": "✨",
        "type": "feat",
        "name": "功能",
        "description": "新增/修改功能 (feature)"
    },
    {
        "emoji": "🐛",
        "type": "fix",
        "name": "修復bug",
        "description": "修復bug (bug fix)"
    },
    {
        "emoji": "📝",
        "type": "docs",
        "name": "文檔",
        "description": "添加/更新文檔，完善專案說明 (documentation)"
    },
    {
        "emoji": "💄",
        "type": "style",
        "name": "代碼風格、格式",
        "description": "程式碼風格變更，例如格式調整，不影響程式碼運行"
    },
    {
        "emoji": "♻️",
        "type": "refactor",
        "name": "程式碼重構",
        "description": "不影響既有的功能前提下，改進程式碼的結構、可讀性和維護性"
    },
    {
        "emoji": "👌",
        "type": "perf",
        "name": "優化",
        "description": "增進效能、修復效能問題、新增效能優化 (增加快取)"
    },
    {
        "emoji": "✅",
        "type": "test",
        "name": "測試",
        "description": "涉及測試方面的更改，如新增/修改測試案例"
    },
    {
        "emoji": "🛠️",
        "type": "chore",
        "name": "維護性的工作",
        "description": "建置流程或輔助工具/套件的變動 (保持程式碼的健康和可讀性，不直接影響代碼的功能)"
    },
    {
        "emoji": "↩️",
        "type": "revert",
        "name": "撤銷",
        "description": "撤銷回復先前的commit (標記撤銷操作，讓團隊成員更容易了解變更的背景和原因)"
    },
    {
        "emoji": "➖",
        "type": "",
        "name": "",
        "description": "─────────────────────────以上為常用的type─────────────────────────"
    },
    {
        "emoji": "🥚",
        "type": "format",
        "name": "格式化代码",
        "description": "格式化"
    },
    {
        "emoji": "🚑",
        "type": "patch",
        "name": "添加重要补丁",
        "description": "补丁"
    },
    {
        "emoji": "📦",
        "type": "file",
        "name": "添加新文件",
        "description": "新文件"
    },
    {
        "emoji": "🚀",
        "type": "publish",
        "name": "发布新版本",
        "description": "新版本"
    },
    {
        "emoji": "📌",
        "type": "tag",
        "name": "发布版本/添加标签",
        "description": "书签"
    },
    {
        "emoji": "🔧",
        "type": "config",
        "name": "修改配置文件",
        "description": "配置"
    },
    {
        "emoji": "🙈",
        "type": "git",
        "name": "添加或修改.gitignore文件",
        "description": "不可见"
    }
]

輔助開發的VS Code套件

VS Code套件除了有強而有力的git相關套件以外，還有一些套件可以幫助自己管理開發的專案。

Settings Sync

每個人安裝的套件、VSCode的設定還有setting.json的內容都是根據個人的使用狀況而製作的，當換了一台電腦，總不能一一把舊電腦上的套件裝到新電腦上，所以這時候就要有同步的工具來儲存紀錄舊電腦安裝過的套件、使用的設定，還原到新電腦上。

套件本身已不再更新，現在使用內建的Settings Sync功能即可，使用方法也很簡單，點選左下角的齒輪後選擇開啟設定同步，再跟Github做連結即可。

詳細的操作可以直接查看VS Code的官方說明文檔。

Project Manager

當同時要開發好幾個專案時，使用VS Code會需要開好幾個視窗，切換視窗時總是會分不清哪個視窗是哪個專案的，可以透過這個套件直接在一個視窗中切換不同專案，使用方法也很簡單，開啟要開發的專案然後點選Save Project，接著命名專案名稱就可以顯示在左邊的清單中了:

要新增其他的專案也是一樣，開啟其他專案後點選清單旁邊被紅框圈選起來的圖示新增到左邊，需要切換的話點一下就可以切換不同的專案:

Metarial Icon Theme

這個套件功能很簡單，基本上就是替換在VS Code中出現的Icon，具體替換的圖示可以參考套件上的說明:

如果不喜歡這個套件更換的圖示，可以試試看file-icons，這個套件的圖示整體亮度會比上一個稍低，也是一個不錯的選擇:

TODO Tree

在寫程式時總有些時候會突然有新的想法，感覺可以在某段程式碼中加上一些功能、或是優化這段程式碼，通常會寫一些註解在想修改的程式附近，但是當正在開發的部分告一段落後，突然發現想不起來想要加上的功能或是優化的方法在哪；也有些時候有段程式碼出現了bug，為了要debug而新增某段程式，當修復好bug後忘記修改的地方在哪，導致產生了新的bug。

而這個套件對於開發來說很方便，可以管理在專案中一些臨時新增的測試程式碼或是想在要新增的功能說明，如下可以在某段程式碼上增加註解，並統一管理:

Todo Tree設定排除的資料夾可以在設定裡面搜尋Todo-tree › Filtering: Exclude Globs，將要排除的資料夾填入:

可以設定自己Todo Tree的註解樣式，icon的部分可以去這個網站上查，下面是我的設定檔:

"todo-tree.general.tags": [
    "TODO",
    "TEST",
    "BUG",
    "FIXME",
    "FIX",
    "HACK",
    "NOTE",
    "TAG",
    "DONE"
],
"todo-tree.highlights.customHighlight": {
    "TODO": {
        "icon": "checklist",
        "foreground": "#000000",
        "background": "#ffffff",
        "iconColour": "#ffffff",
        "rulerColour": "#ffffff",
        "gutterIcon": true
    },
    "BUG": {
        "icon": "bug",
        "background": "#d10000",
        "foreground": "#ffffff",
        "iconColour": "#d10000",
        "rulerColour": "#d10000",
        "gutterIcon": true
    },
    "FIXME": {
        "icon": "flame",
        "background": "#a32cc4",
        "foreground": "#ffffff",
        "iconColour": "#a32cc4",
        "rulerColour": "#a32cc4",
        "gutterIcon": true
    },
    "TEST": {
        "icon": "beaker",
        "background": "#FF4500",
        "foreground": "#ffffff",
        "iconColour": "#FF4500",
        "rulerColour": "#FF4500",
        "gutterIcon": true
    },
    "TAG": {
        "icon": "tag",
        "background": "#0000ff",
        "foreground": "#ffffff",
        "iconColour": "#0000ff",
        "rulerColour": "#0000ff",
        "gutterIcon": true
    },
    "NOTE": {
        "icon": "bookmark",
        "background": "#00ff00",
        "foreground": "#ffffff",
        "iconColour": "#00ff00",
        "rulerColour": "#00ff00",
        "gutterIcon": true
    },
    "DONE": {
        "icon": "verified",
        "background": "#000000",
        "foreground": "#ffffff",
        "iconColour": "#000000",
        "rulerColour": "#000000",
        "gutterIcon": true
    },
    "HACK": {
        "icon": "rocket",
        "background": "#08deea",
        "foreground": "#ffffff",
        "iconColour": "#08deea",
        "rulerColour": "#08deea",
        "gutterIcon": true
    }
},
"todo-tree.general.tagGroups": {
    "FIXME": [
        "FIXME",
        "FIX"
    ]
},
"todo-tree.highlights.defaultHighlight": {
    "type": "tag",
    "rulerLane": "full"
},

自訂Highlight設定說明

icon: 圖示，可以從上面說的官方網站中查詢，但不是全部可以用
background: 背景顏色
foreground: 前景演色 (字體顏色)
iconColour: 圖示顏色
rulerColour: 右邊滾動條上顯示的顏色
rulerLane: 滾動條的顯示類型 (left, center, right, full, none)
gutterIcon: 在行數左邊是否顯示圖示
opacity: 背景的不透明度

autoDocstring

在程式中註解有多重要相信不需要過多的強調，這個套件可以自動的把所有函式的輸入輸出參數以指定的風格生成註解，自己習慣使用的google風格:

使用方式也很簡單，直接在函式下面輸入"""就行，以下圖片來自該套件的資料中:

Rainbow Fart

這個套件趣味性十足，它可以加速開發的速度，也可以讓你在寫程式的時候充滿信心，在你身心俱疲的時候還會為你提供幫助，具體的等你安裝過後就知道(嘿嘿嘿)。

Python相關的VS Code套件

Python、Pylance基本上是必裝的套件，這裡不多做介紹。

Python Indent

Python Indent的功能很簡單，就是對縮排進行優化，以下是官方的說明動畫:

Python Environment Manager

如果有使用coda或是venv來建構python環境的話這個套件還蠻實用的，可以查看目前有的環境，和環境內安裝的套件，不過我自己本身還是習慣透過命令列管理環境，畢竟環境這東西使用的頻率不會太高，而且目前也蠻多專案是使用docker來建構環境的，所以目前是沒有使用這個套件。