2023 推薦 10 個 VSCode extension，提升開發效率，一秒寫數行程式碼！

來自 2022 stackoverflow 的調查資料中顯示，有 74%的開發者使用 Visual Studio Code (VSCode) 進行開發，由此可見 VSCode 的受歡迎程度。

FIg. stackoverflow 開發環境使用調查 (ref: 2022 stackoverflow survey)

VSCode 有許多實用的 extensions 幫助我們提高開發效率，今天介紹 10 個能夠提升生產力的 extensions。

推薦的 10 個 VSCode extensions：

• 提高開發生產力，工作效率大增
  ○ Tabnine｜AI Autocomplete (自動補齊)，
  ○ Prettier｜Code formatter，輕鬆寫出漂亮的程式碼
  ○ TODO Highlight｜清楚紀錄代辦事項，
  ○ Jira and Bitbucket (Atlassian Labs)｜整合 Jira 專案管理與 Bitbucket 程式碼倉儲工具
• 在 VSCode 打開各種檔案 （樸實無華的功能，每日相伴的工具們）
  ○ PDF — Vscode-pdf
  ○ Excel — Excel Viewer
  ○ Markdown — Markdown All in One
• 整合 Github 功能
  ○ GitHub Copilot｜一秒寫數行程式碼，AI 寫 code 好輕鬆
  ○ Git History｜了解每一行程式碼的歷史紀錄，回顧過去，展望未來
  ○ GitLens｜紀錄程式碼的歷史與作者，遇到困難不再求助無門

VSCode extensions 介紹

• Tabnine｜AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more
  程式碼 Autocomplete (自動補齊)，利用 AI 實現一秒寫數行程式碼，大幅提升開發效率。目前 Tabnine 支援 JavaScript, Python, Java…多個常用的程式語言。

Fig. Tabnine Autocomplete demo (ref: VSCode marketplace)

• Prettier｜Code formatter using prettier
  支援多個程式語言的排版工具，再也不用自己為了排版按很多 tab 和空白鍵，一鍵產生整齊清楚的程式碼。

Fig. Prettier demo (ref: Prettier)

• TODO Highlight｜highlight TODOs, FIXMEs, any keywords, and annotations.
  很多時候會習慣在未來要改動程式碼的位置，使用註解 TODO 紀錄代辦內容，使用 TODO Highlight 能夠清楚的找到這些 TODO List。除了 TODO 、FIXME 等等關鍵字之外，也可己新增自定義關鍵字更貼近個人的使用情境。

Fig. highlight keywords (ref: VSCode marketplace)

Fig. list annotations and reveal from corresponding files (ref: VSCode marketplace)

• Jira and Bitbucket (Atlassian Labs)
  VSCode 整合 Atlassian 旗下的兩個工具 — Jira 專案管理工具，Bitbucket 程式碼倉儲，在 VSCode 中即可新增、查看 issue、發 Pull request、code review…等等，簡化日常開發的工作流程。

Fig. Using Jira and Bitbucket in VSCode (ref: VSCode marketplace)

• Vscode-pdf
  在 vscode 打開 PDF 檔案

Fig. open the PDF file in VSCode (ref: VSCode marketplace)

• Excel Viewer
  資料分析的時候，常需要邊寫程式，邊打開原始資料 excel 檔案確認內容，Excel Viewer 能夠在 VSCode 中讀取 excel 檔案，也支援基本的功能 eg. Filter, Sort。

Fig. open the excel file in VSCode (ref: VSCode marketplace)

• Markdown All in One
  推薦給有習慣用 Markdown 語言寫文件的人，之前團隊的技術文件是以 Github 上常見的說明文件 README.md 方式紀錄，使用 Markdown All in One 能夠快速的寫出 Markdown 語法、也可以先預覽 Markdown 呈現的內容。

Fig. Markdown preview

Fig. write Markdown with keyboard shortcuts (ref: VSCode marketplace)

• GitHub Copilot｜Your AI pair programmer
  Copilot 是 GitHub 於 2021/06/29 推出的 AI 程式碼撰寫工具，以 GitHub 上大量的原始碼訓練出的 AI 模型，在寫程式的過程中會依照前後文給予你相對應的建議。

Fig. 將註解轉為程式碼 (ref: VSCode marketplace)

Fig. 產生單元測試 (ref: VSCode marketplace)

Fig. 根據預測，自動產生程式碼 (ref: VSCode marketplace)

• Git History｜View git log, file history, compare branches or commits
  在 VSCode 中查看 Git 版本控制的歷史紀錄

Fig. Git History (ref: VSCode marketplace)

• GitLens
  通過 Git blame 註釋和 CodeLens 一目了然代碼的作者與過去的改動資料， 包含作者、上一次改動的時間、PR 的資料、Commit 內容。在大家一起開發大型系統時，遇到不確定這一段程式碼作用時，也更容易找到寫代碼的人來幫助你解答。

Fig. GitLens｜Current Line Blame

使用 VSCode 進入第五年，突然發現在許多工具的幫助下，自己開發的速度有顯著的提升，希望大家在 Extension 的幫助下都可以開發順利 🙂