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

更新 發佈閱讀 4 分鐘


raw-image

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

raw-image

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…多個常用的程式語言。
raw-image
  • Prettier|Code formatter using prettier
    支援多個程式語言的排版工具,再也不用自己為了排版按很多 tab 和空白鍵,一鍵產生整齊清楚的程式碼。
raw-image
  • TODO Highlight|highlight TODOs, FIXMEs, any keywords, and annotations.
    很多時候會習慣在未來要改動程式碼的位置,使用註解 TODO 紀錄代辦內容,使用 TODO Highlight 能夠清楚的找到這些 TODO List。除了 TODO 、FIXME 等等關鍵字之外,也可己新增自定義關鍵字更貼近個人的使用情境。
raw-image
raw-image
  • Jira and Bitbucket (Atlassian Labs)VSCode 整合 Atlassian 旗下的兩個工具 — Jira 專案管理工具,Bitbucket 程式碼倉儲,在 VSCode 中即可新增、查看 issue、發 Pull request、code review…等等,簡化日常開發的工作流程。
raw-image
raw-image
  • Excel Viewer
    資料分析的時候,常需要邊寫程式,邊打開原始資料 excel 檔案確認內容,Excel Viewer 能夠在 VSCode 中讀取 excel 檔案,也支援基本的功能 eg. Filter, Sort。
raw-image
  • Markdown All in One
    推薦給有習慣用 Markdown 語言寫文件的人,之前團隊的技術文件是以 Github 上常見的說明文件 README.md 方式紀錄,使用 Markdown All in One 能夠快速的寫出 Markdown 語法、也可以先預覽 Markdown 呈現的內容。
raw-image
raw-image
  • GitHub Copilot|Your AI pair programmer
    Copilot 是 GitHub 於 2021/06/29 推出的 AI 程式碼撰寫工具,以 GitHub 上大量的原始碼訓練出的 AI 模型,在寫程式的過程中會依照前後文給予你相對應的建議。
raw-image
raw-image
raw-image
  • Git History|View git log, file history, compare branches or commits
    在 VSCode 中查看 Git 版本控制的歷史紀錄
raw-image
  • GitLens
    通過 Git blame 註釋和 CodeLens 一目了然代碼的作者與過去的改動資料, 包含作者、上一次改動的時間、PR 的資料、Commit 內容。在大家一起開發大型系統時,遇到不確定這一段程式碼作用時,也更容易找到寫代碼的人來幫助你解答。
raw-image

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

留言
avatar-img
Everything ✨
7會員
17內容數
AI x Data Science 探討 AI 大小事
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
一般在使用 TypeScript 的時候,大家都有遇過定義列舉資料的情境吧。 不過不管是 enum 和 literal 的方式其實都有些小缺點,以下推薦一個個人認為體驗更好的方式。
Thumbnail
一般在使用 TypeScript 的時候,大家都有遇過定義列舉資料的情境吧。 不過不管是 enum 和 literal 的方式其實都有些小缺點,以下推薦一個個人認為體驗更好的方式。
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
本篇將分享VSCode工作區的設定與功能,包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo,提高工作效率。
Thumbnail
本篇將分享VSCode工作區的設定與功能,包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo,提高工作效率。
Thumbnail
VS code是什麼? Visual Studio Code(通常縮寫為VS Code)是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言,提供了一系列先進功能和插件,讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
Thumbnail
VS code是什麼? Visual Studio Code(通常縮寫為VS Code)是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言,提供了一系列先進功能和插件,讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News