VS code 推薦擴充套件

社長(Sajhon)
6 min readDec 26, 2023

--

Hi~我是社長,
上一篇文章中跟大家快速地說明如何安裝vs code後,
為了之後能更順暢的寫code,
這邊有一些擴充套件(extension)想要介紹給大家,
各位根據自己的需求安裝即可,
如果有什麼好用的套件也歡迎分享讓社長知道哦!!

那我們就開始來看看有那些好用的套件吧!

1. Chinese (Traditional) Language Pack for Visual Studio Code

首先當然是方便我們看懂介面的翻譯套件了,在新手時期為了能更快的上手程式碼,社長會建議能調整成自己看得比較習慣的語言。
但有的時候遇到問題會需要查找資料,這時候用英文搜尋可能會有比較多資源,所以就算介面是中文,還是建議要將對應的英文記起來哦!!

套件連結:https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant

2. Code Runner

這是一款能夠讓你在vs code上快速執行各種code的擴充套件,
其中包含了C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML, Zig, Mojo...等

套件連結:https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

3. Git Graph

在我們寫code時常常會用到git這個版控工具,git可以協助我們針對專案或者是程式碼進行版本控制以及追蹤。
但在追蹤的過程中,原生的git只能透過指令的方式去進行操作,對於剛接觸的新手較不友善。
這款擴充套件能夠在vs code中使用圖形化的介面去對git進行操作,也有較為美觀的版控圖能夠幫助我們更清楚的看到目前版本的節點以及和其他版本之間的關係。

套件連結:https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

4. Tabnine: AI Autocomplete

在AI起飛的時代,如果不善用AI的力量,可能會事倍功半。
Tabnine能夠透過AI幫助我們在寫code時,根據我們所打的code去推斷接下來可能會輸入的程式碼。
社長自己使用下來的感覺是還蠻不錯的,推斷的準確度跟提供的程式碼都算不錯,有興趣的朋友也可以試試這款擴充套件。

套件連結:https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

5.Prettier

在寫code的時候,常常會需要使用空格來做排版,為了讓排版清楚好看,常常會花許多時間。
Prettier能夠快速的將我們的code依據想要的格式或規範進行排版,能夠手動觸發也可以設定為在code存檔時自動進行排版。

套件連結:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

6. GitHub Copilot

Copilot也是相當有名的code補全和提供寫code建議的AI工具,透過GitHub上的程式碼大量訓練的模型和第4點提到的Tabnine一樣,能夠讓我們撰寫code的速度大幅提升,省去機械或重復性的工作。

套件連結:https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

7. Auto Close Tag

寫過前端語言的都知道,當tag有缺的時候找起來有時候真的很痛苦。
這時候就需要用到這個擴充套件了,它能夠在我們輸入前面的tag時,自動把結尾也補上,避免我們寫code寫一寫亂掉的情形,強烈推薦這個套件!

套件連結:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

8. Live Server

Live Server的功能主要是讓我們在寫code的時候,能夠及時的預覽網頁上是否呈現的是我們要的效果。
裝好套件後可以啟動Server,每當我們改變程式碼時,網頁就會自動刷新成當前的狀態囉!

套件連結:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

以上就是社長平常比較常使用的套件,推薦給大家~

--

--

社長(Sajhon)

👋🏼我是社長~心理系轉職後端工程師 📚分享程式介紹,轉職心得和記錄生活 🐱喜歡HelloKitty 🌟歡迎動動小手幫我按個追蹤!