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
留言分享你的想法!
avatar-img
Everything ✨
5會員
17內容數
AI x Data Science 探討 AI 大小事
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
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擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News